Social Media has become the main source of your Blog/website traffic,there fore never underestimate the social media networks.For Boosting Blog traffic you should add Social Sharing Buttons Widget to your Blog.Which helps you and your visitors to easily share your Blog Contents with their Friends,as a result you will get the bonus of traffic to your blog.The widget we are sharing contain Google+ Share Button,Twitter Tweet Buttons,Stumble,Facebook Send and Like Button,Pinterest,and many other social network buttons.You can add it either above the Blogger Post or Below the Blogger Posts,however it is very simple and clean widget which will not effect your Blog Loading Speed.
How To Add Social Sharing Buttons Widget To Blogger
- Go To Blogger Dashboard
- There Click On Template
- Now Search for This Script/Code <data:post.body/>
- After Finding The above Code in Template
- Copy The Below Script and paste it above(for Showing Buttons above The Blogger Post) or below(for Showing Buttons Below Blogger Post) this Script <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div class="sharethatsblogging"> <center><div class="headingthatsblogging">Like the Post? Do share with your Friends.</div> <ul class='social' id='cssanimation'> <li class='facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a> </li> <li class='googleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a> </li> <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a> </li> <li class='delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a> </li> <li class='reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a> </li> <li class='technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a> </li> </ul></center></div> <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/> <style> ul.social { list-style:none; display:inline-block; margin:15px auto; } ul.social li { display:inline; float:left; background-repeat:no-repeat; } ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; } ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; } ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOe21wvw2mw2iluIWUErUo3lj1X3MfBBFkFZLHXL9YdUqNuY9ZvlvdThbB8kImgfTjZpvWW0ff9qdDrlON6r8s7XERfcKcL-FXleRowGrDAHECBJoLWUDx282eO0jVR1-OnZd62UbsG1c/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiECM5Pb7jRASP1X7np63s4K49ymz04UY9HDGDKhDWpZqGjB216k89v0PKJw3fBvsScP4mII_3ItF-zRcJ50Ter3U-X3UwNw84T3UvQ1nLgMOa-Lezsi6zRBGdy_k5V-2wZzRchw16xqI/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpIFpvSAoI4Hyr5D5ixmJ5ZpkIbeJqkCYK9KZ13t1ADbepH_QHEVXf3jhT9WOVtMnd0YpQEH_a0b81qHWWma2T4HVg-2e8f9FbcyzAT7wFss2H8DlJNohiuOzOa8DjjzY8GWpEdn30xw/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPQtbqg-wBr8zqZVle-yO49W3VX-1ts2owEa1H1uUyG9zBBwZuiaCrSVi_Zl8eI-WK8k1WDunCioBU7yfibLM6u5gSPQinOLR39z06WaYAFb46lhyqSXv_MMBSTg2hEC_LVHngNFdDZ0/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3Vufdjl6bnxIloWrm0nVo20cPf6BE1qy6bS57Q6fLEBBlNNxAnd5jLBp5XiG7YxaFzKXED6BiRFenzMM0X6G-1jEjBrZWDILASPW-s9nWrmKZjFkaWb4pvHHH08738HPDvguzeDtLCM/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGh6TTQ1sEHHI7RgOwISByNsyd6uJ_dJkKtHsSI0KGXTILKmPha76avxloTAoURgfSUttwUFq8yiRE94Ggt1N1y_9eJ0NdxoP3VXM3CHEi6U2wDZWUrzjMu5BtdjsIcLtzvuwKEYqgrE/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaX6wr9p47nxyqVcNzg0muzBY4tBWJWZ9hnVgi32qo8s3oGxHOmCQUxx8WhL6Vdq_v8qGx_ixNqvD_NcQd6-MttEV5ZXj6Ls2rdi2URKpy3bY57CsmWbQRk5wsch7X5K7UHzijkCewEU/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQ8SmbyMLM9OgZdvuqui5vI3PpJdLcWZJnqbuA46pwUifm4PXSOnJ7hSMc7TMrc5s3D_J8T3LRHuUlCDIKQK4Arp9txVr60m-PbDPRTxmtTTodJjQ4_uljWMt_AMY0qyd4dmb0tWNl8Q/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj887oHsdSjQdvMRMXYz56swp2JG4d_ty__gPYf0FHSWiYYZ8VJUi2ih2dceh6PXMhJ8dhFnMLvg_wU1LopA0muTflZvxWasSecV6vr4qI5-UnJox2hNlFeXXB3Nh2fWKUo-q3rTDZu9LnC/s1600/TBI-technorati.png); } #cssanimation:hover li { opacity:0.2; } #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; } #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; } #cssanimation li:hover { opacity:1; } #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{ font-size:25px; font-family: 'Englebert', sans-serif; } .sharelordhtml{ border-top:30px solid #3873CC; padding:16px; -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s; background:#D9D6FF; } .sharelordhtml:hover { background:white; } </style> </b:if>
Note:-
- In Magazine Blogger Templates,there are more then two Scripts similar to <data:post.body/>,so do paste the above Script after each script.
- Now when you paste the above script after <data:post.body/> ,take a Preview and Then Hit save Template.
- That's it,now take a look on your blog post social sharing widget will dancing there :)
So What's UP
Actually this widget is the main source of many blogger to get a flood of traffic,however this widget is very easy to navigate,so it will help your readers to share your blog contents with their friends.Share your beautiful ideas with us,stay Blessed Happy Blogging :)
Ifti, is there any missing/mistake in the script? I can't make it happen in my blog. By the by I found two Scripts/code similar to and pasted your Script after each script that is twice in total. Plz visit my blog: Faster Maths and suggest me. Thanks in advance.
ReplyDeleteGreat blog.. I have learn a to on your post here..
ReplyDeleteArcMail Defender
Thanks for Stopping by :)
DeleteIfti!
hey , that didn't work
ReplyDeleteYah, that works.
Delete@ Sangram Barge,
u'll have to look for
twice
This may vary for different templates.
So if u have that twice then paste twice
@Barge Yas Ofcourse it works perfectly follow the steps carefully !
Deletethanks a lot
ReplyDeleteI am noy finding the , and I dont have that tab to search it!
ReplyDelete@Iftikhar uddin
Your article is very informative, specially to the new individual entering to the field of blogging..... Make Money , Blogging Tips
ReplyDeleteThanks your sir.. :D i added it to my blog ..
ReplyDeleteGreat blog.thank you..
ReplyDeleteRead at amazing news,> bangla news paper, bangla news, bangla blog, english news, english blog, technology news, technology blog, computer tips and tricks
hey its work for me checkout http://mybloggertipstricks.com
ReplyDeleteHi, just twitter button doesnt work 4 my blog site what can ı do? it's not share any post my page..
ReplyDeleteI am fixed twitter problem but Technorati & pinterest codes are not working..
ReplyDeleteThanks alot, it worked for me. check it out on my site www.eupdates247.com
ReplyDelete2015 hot jerseys, nike nfl jerseys,mlb jerseys,nba jerseys,nhl jerseys, Christian Louboutin shoes, sale new jerseys,cheap wholesale new jerseys,2015 new nike nfl jerseys, Christian Louboutin uk, nfl hoodies jerseys,nhl hoodies jerseys,nba hoodies jerseys, Christian Louboutin Outlet
ReplyDeletegood post, thanksssssssssssss
ReplyDeletehttp://www.mycodingland.com/
Great work. thank you for sharing great ideas with us.
ReplyDeletehttp://problogworld.blogspot.com
This widget looks nice but not working with my blog, still trying to fit it in my blog
ReplyDeletehttp://pharmacyhelps.blogspot.com/
http://itnews-solutions-tips.blogspot.com/