How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View

How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View.guess you would like to add a simple stylish facebook, twitter, google plus, whatsapp share button on your blogger blog, especially below your blogger blog post on mobile view.most of us most have seen share button on their blogger blog, especially the desktop version but still wonders why it doesn't  display on their blogger mobile template.well, this is because the mobile template is a separate design from the desktop view.

blogger made their mobile template to display only contents that is being posted on your site, leaving their default elements to display on the mobile view. other elements you added to the desktop version of your site will not appear on your mobile template.with this, it prevents you from tweaking your desktop view to enable the design to appear on the mobile template. this is why you may see a share button on your desktop view but won't find it on your blogger mobile view but their is a way you can tweak the mobile template to display social media share button of your choice.the mobile template has its own mobile elements and tags that enables you to tweak it.in this post i will share with you on How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View

just follow the steps below to get it done.

You May Like To Read How To Add Stylish Social Media Share Button On Your Blogger Blog

How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View

==> Login to your blogger dashboard and go to the site you wish to add the code

from your dashboard, scroll down and Click On Template=Edit HTML

the template html code will be displayed.search for this code in the template using Ctrl F.

</head>


just above the head tag, add this code


<style type='text/css'> /*** Share Post Styling ***/ #share-buttons{margin:0 0 8px;padding:0;overflow:hidden;text-transform:uppercase;font-size:12px} #share-buttons p{font-size:100%;float:left;background:#1abc9c;display:block;padding:2px 10px;margin:2px;color:#fff} #share-buttons a{position:relative;float:left;display:block;color:#fafafa;padding:2px 10px;margin:2px} #share-buttons a:hover{background:#626e7c!important} </style>


if you have already added this code before on your template from the previous tutorial, then no need to add it


after adding it, now find this code below

<b:if 
cond='data:top.showMobileShare'>

==> find the ending div tag. there are three div tag seen on the image below

insert this share button below/after the Ending </div>


<div id="share-buttons"> 
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;via=HANDLERNAME&amp;text=&quot; + data:post.title' title='Twitter' rel='nofollow' style='background:#00aced;' target='_blank'>Twitter</a><a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' style='background:#dd4b39;' target='_blank' title='Google+'>Google+</a><a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20&quot; + data:post.url' rel='nofollow' style='background:#4dc247;' target='_blank' title='Whatsapp'>WhatsApp</a> 

</div>


after adding it, save your template.
note: at the twitter share button, the spot that is marked red should be replaced with your twitter username.

also, note: Always backup your template before making any changes

visit www.gurubest.com to view the latest post update you are not seeing right now.
more articles update is posted on gurubest every day,so don't be the last to get update to your email.Subscribe by email

DON'T FORGET TO SHARE WITH YOUR FRIENDS ON FACEBOOK BY CLICKING THE SHARE BUTTON.

ATTENTION!!!.Do You Want To Learn Website Design And Development Like A PRO

Click To Download This Video Tutorial Courses Now