Date: - Time:

For Questions and Quick contact
Call us - FB: Oscar Lee

6.10.2016

Add Share Buttons to your BLOG's Mobile view

 how-to-make-$25-on-payoneer
Share blog post
Blog Traffic,Popularity and Atrraction of Loyal readers can be Easily achieved when your readers share 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> or in the CSS Box in the Customize Page, 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='http://4.bp.blogspot.com/-Zjt2mnyBXoI/VTSp0Rh-3QI/AAAAAAAABwQ/mzMMmuSMiHw/s1600/facebook%2Btgz-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='http://2.bp.blogspot.com/-CIWxQjogJ7Q/VTSp0Zxwi2I/AAAAAAAABwM/Og9TSVoV7pw/s1600/googleplus%2Bshare%2Btgz-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='http://3.bp.blogspot.com/-3iRv91gmzDU/VTSp1MZf8MI/AAAAAAAABwg/Hjt8IqcAkjI/s1600/twitter%2Btgz-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='http://4.bp.blogspot.com/-NvYOpytmUuQ/VTSp0AD7sDI/AAAAAAAABwI/-hTBq-daTjM/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="http://4.bp.blogspot.com/-Zjt2mnyBXoI/VTSp0Rh-3QI/AAAAAAAABwQ/mzMMmuSMiHw/s1600/facebook%2Btgz-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="http://2.bp.blogspot.com/-CIWxQjogJ7Q/VTSp0Zxwi2I/AAAAAAAABwM/Og9TSVoV7pw/s1600/googleplus%2Bshare%2Btgz-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="http://3.bp.blogspot.com/-3iRv91gmzDU/VTSp1MZf8MI/AAAAAAAABwg/Hjt8IqcAkjI/s1600/twitter%2Btgz-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="http://4.bp.blogspot.com/-NvYOpytmUuQ/VTSp0AD7sDI/AAAAAAAABwI/-hTBq-daTjM/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!


Like US on Facebook

 

2 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. The ease of creating a mobile marketing campaign should not mean that some effort is not put in to target the campaign.SuperSu root

    ReplyDelete

We love to hear from you!

RECENT COMMENTS

Featured post

JAMB 2017 Results are online now - check yours here

JAMB - the Joint Admission matriculation board , has started the release of the 2017 UTME RESULTS online for the examinations that start...