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 :
- Log in Blogger Dashboar
- Click "Template" menu
- Click "Edit" menu"
- Look for ]]</b:skin> or </style>. Use Ctrl+F to make easy find.
- Place below code right before ]]</b:skin> or </style>.
- Look for code <data:post.body/> and then place below code right after it :
- And then save Template.
- The share button appearance will be :
/* share buttons */ .share-buttons-box { height: 67px; background: url(https://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/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; }
<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)?'https':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
But if you want to remove "Please Share" section, you need to remove below URL from style code
https://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/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
Post a Comment