Add Share Buttons to your BLOG's Mobile view

Blog Traffic,Popularity and Atrraction of Loyal readers can be Easily achieved when your readers shares your post to their Social Media pages, what a way to Expose your articles.
Now that Most Visits comes from Mobile Devices, there's a need to get the social media share buttons on your Mobile template..If you're on a PC right now, you can see a Demo of it HERE

To set up yours,Follow the Instructions Below.

1. Login to your Blogger Dashboard
2. Click on Template
3. Click the 'Edit HTML' button 
4. In the Html Box, hit CTRL+F to get a Search box.
5. In the search box,search for ]]></b:skin>
6.  right above ]]></b:skin> paste the code Below

.shr-btn-sclmob img{  opacity: 1; filter: alpha(opacity=100); }
.shr-btn-sclmob img:hover { opacity: 0.9; filter: alpha(opacity=90); }
.socialmediabartitlemob h5 {
margin: 0px;
font:bold 30px Port Lligat Slab;
}

There are Two styles: the Horizontal style and the Vertical style, so Just Copy the Code of the style You want and Paste it Directly Below <span class='post-comment-link'>

VERTICAL STYLE BELOW

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'>
<div class='shr-btn-sclmob'>
<div class='socialmediabartitlemob'>
  <h5> Share This Post-</h5>
</div><div align='center'>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='facebook share' border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKe428vrmL8GwOS3t4qY4RLLzobvtK3PjSnCIASOfu1h3gn8B25lxzDbxGEYMvO0uvWytSFpXO4E_tmXEwufeikZ_HziHmsrLlU7JWJ70WneYPfr49ZqU6GbylhePo6U0_kiPo8sEvOs/s1600/facebook+tgz-min.jpg' width='200'/></a></div>
<div align='center'>
<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Google'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULGiy48a32RbHljtqNTSMkerG3Fh2XSjXRKMziqrbEBYONZTptM6-Bh9nr_MYJoxBnN-RbKkY79uWBu7XjyVNfJ_nAJrfydGvPHYzHy0AFUhlP3rDLRHBXo0CKEPyn757WCGA8krrYH8/s1600/googleplus+share+tgz-min.jpg' width='200'/></a></div>
<div align='center'>
<a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhor2G8Stri9TfWuqL4hGPTp3Z7QUTH7sIVesdmGLXJ3MKt1lEycGI31Ht8sFT3gp7uUjjb2_2k60FuuWeL6xVdoQifUtaaJ7UPFy1NDe7ieWwEUFo_0UYcdz21iZJ2hAan_R1fpBSX9LM/s1600/twitter+tgz-min.jpg' width='200'/></a></div>
<div align='center'>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPUGB-nsaZkW-NlQiA5tszZwglyPaqFr-64y5ZJDwzWGWO1GLpfe6YlOtMSOMuTpqsRGx8a0Ze9ET2VkCvWEv8YI-ZuZ6I5TpJC_874v4nkSW_pRzQTp9kMGJr7Q_vRO9HQxGZ_Rt6Xc/s1600/stumbleupontgz-min.jpg' width='200'/></a></div>
  </div></div>  </b:if>

HORIZONTAL STYLE BELOW

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'>
<div class='shr-btn-sclmob'>
<div class='socialmediabartitlemob'>
  <h5> <b><i><u>Sharing is Caring</u></i></b></h5>
</div><div align='center'>
 <a class="facebook" expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share This On Facebook"><img alt="facebook share" border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSKe428vrmL8GwOS3t4qY4RLLzobvtK3PjSnCIASOfu1h3gn8B25lxzDbxGEYMvO0uvWytSFpXO4E_tmXEwufeikZ_HziHmsrLlU7JWJ70WneYPfr49ZqU6GbylhePo6U0_kiPo8sEvOs/s1600/facebook+tgz-min.jpg" width="100"  /></a><a class="google" expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share This On Google"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULGiy48a32RbHljtqNTSMkerG3Fh2XSjXRKMziqrbEBYONZTptM6-Bh9nr_MYJoxBnN-RbKkY79uWBu7XjyVNfJ_nAJrfydGvPHYzHy0AFUhlP3rDLRHBXo0CKEPyn757WCGA8krrYH8/s1600/googleplus+share+tgz-min.jpg" width="100"/></a><a class="twitter" expr:href="&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Tweet This"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhor2G8Stri9TfWuqL4hGPTp3Z7QUTH7sIVesdmGLXJ3MKt1lEycGI31Ht8sFT3gp7uUjjb2_2k60FuuWeL6xVdoQifUtaaJ7UPFy1NDe7ieWwEUFo_0UYcdz21iZJ2hAan_R1fpBSX9LM/s1600/twitter+tgz-min.jpg" width="100" /></a><a class="stumbleupon" expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Stumble this"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPUGB-nsaZkW-NlQiA5tszZwglyPaqFr-64y5ZJDwzWGWO1GLpfe6YlOtMSOMuTpqsRGx8a0Ze9ET2VkCvWEv8YI-ZuZ6I5TpJC_874v4nkSW_pRzQTp9kMGJr7Q_vRO9HQxGZ_Rt6Xc/s1600/stumbleupontgz-min.jpg" width="100" /></a></div>
</div></div>  </b:if>

MORE:

You can make  changes to suit your style, for instance, the 'share this post' and 'Sharing is Caring' caption can be changed by you, you can also add some attributes like making it bold, slanted, underlined.
To make it bold, add <b>  </b>
 To make it slanted, add <i>  </i>
To make it underlined, add <u>  </u>

 The above tags would be Added around the  'share this post' text only, because it's present in the horizontal style already. 

  This share Buttons would show only in the Post pages, If you want it to show on all the Pages in your Blog, then delete the <b:if cond='data:blog.pageType == &quot;item&quot;'>   and the Ending </b:if> both highlighted in Red in the codes

 Now, If you want other social media buttons added, Drop them as comments below, also use the share button on this Blog to share this post to your social pages.

Helpful Post? Drop your comments below

Happy Blogging!