Adding the Share Button on the Revoltify Template

Adding the Share Button on the Revoltify Template - Good night blogger friend, this time I will share how to install the share button on the main page of the blog on the Revoltify template.

This post I made at the request of the blogger friend here about how to add the share button that appears when the mouse cursor is shifted to a post like the one on this blog. Of course, my friend already knows the function of this share button and here I will not explain the function but how to implement it, you don't need to worry about loading pages because this button is quite lightweight that only uses CSS and Markup.

Here's how to apply it:

Open the Blogger dashboard
Click Template
Click Edit HTML
Apply the code below in the special CSS of the homepage / main page

/* CSS Homepage Share */
ul.twitfbshare{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:0;top:20px;left:20px;line-height:normal;overflow:hidden;}
ul.twitfbshare li{text-align:left;float:left;margin-bottom:0;margin-top:-30px;opacity:0;padding:0;transition:all 0.3s;}
.post:hover .twitfbshare li{opacity:1;margin-top:0;}
ul.twitfbshare li a{background-clip:padding-box;background-repeat:no-repeat;display:block;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap;width:30px;height:30px;line-height:30px;position:relative;margin:0;padding:0;font-size:14px;font-weight:normal;background-color:#fff;color:#aaa;transition:all 0.3s;}
ul.twitfbshare li a:hover{color:#fff;}
ul.twitfbshare li a.f-like:hover {background-color:#5379b7;}
ul.twitfbshare li a.t-share:hover {background-color:#59c2e7;}
ul.twitfbshare li a.gplus-share:hover {background-color:#f35d5c;}

Then find the code below

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.thumbnailUrl'>

Apply the code below right after the code above

<ul class='twitfbshare'>
  <li>
   <a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a> 
  </li>
        <li>
   <a class='t-share' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a> 
  </li>
        <li>
   <a class='gplus-share' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a> 
  </li>
 </ul>

Once applied it will look like this

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.thumbnailUrl'>
 <ul class='twitfbshare'>
  <li>
   <a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a> 
  </li>
        <li>
   <a class='t-share' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a> 
  </li>
        <li>
   <a class='gplus-share' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a> 
  </li>
 </ul>

Finally save the template and see the results.

If you want to install the share button on another template, please adjust it again. That's enough and hopefully useful.