How To Add Cool Social Share Button On Your Blog

facebook

As mentioned in previous posting, that social media share gives some benefits to our blog. So, to me, adding social media share button in our blog posting is very important thing for blogger. Alongside benefit for us, social media share will make blog audience ease to share blog contents to their friends and colleagues. It will simplify how to share.

To complement and enhance your blog with share buttons, following the share button adapted from EvoMag blogger template. To me, this share button is very cool and user-friendly.

And how to add this share button? Just follow below easy steps :

1. Log in Blogger Dashboar
2. Click "Template" menu
3. Click "Edit" menu"
4. Look for ]]</b:skin> or </style>. Use Ctrl+F to make easy find.
5. Place below code right before  ]]</b:skin> or </style>.



/* share buttons */ .share-buttons-box { height: 67px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO6cgBYSKxkps0MIAm54xmNu0tBKUAleU_BbUE8S71EGEH_sNjmBL5-6TBuYMNxRVLKRkGMx0HCZfdKmav4oILxeDoYJkp8WGALpzskb9qqb8F3syWtXKOGvRRTvWi8maV1pmtGZJKPUZf/s1600/share.png) no-repeat 330px 10px; margin:20px 0 15px; overflow:hidden; } .share-buttons { margin:0 0; height:67px; float:left; } .share-buttons .share { float:left; margin-right:10px; display:inline-block; }



6. Look for code   <data:post.body/> and then place below code right after it :



<div class='share-buttons-box'> <div class='share-buttons'> <div class='share gplus'> <div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div> <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div> <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div> <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div> <div class='share linkedin'> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div> </div> </div> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.test(d.location)?&#39;https&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>



7. And then save Template. 
8. The share button appearance  will be :

But if you want to remove "Please Share" section, you need to remove  below URL from style  code

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO6cgBYSKxkps0MIAm54xmNu0tBKUAleU_BbUE8S71EGEH_sNjmBL5-6TBuYMNxRVLKRkGMx0HCZfdKmav4oILxeDoYJkp8WGALpzskb9qqb8F3syWtXKOGvRRTvWi8maV1pmtGZJKPUZf/s1600/share.png

And the share button appearance will be :

That was the article tips on how to add a social sharing button on your blog. I hope these article tips can help you to improve the appearance of your blog

Baca Juga: