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/AVvXsEjf_xo-NJF0TBv1gw_rxXwaDXkO4XjbZtfU0IM4hu0Q6rdRyxx7OMQ1UNda70VFwogtY0_nkWW-WDfQallK2rfNxkvnVEOx4Cu-cvrPBXUIIwnAncBk6poyjxQEv550cJCNYVCM0M4N36o/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3swI5stRP4tEHJzBXhYgywZ14c1n8E83lob2Lr1nRGOGWeBGLD-JztQbcOMYP3-xIb6dU6dDB3GA9M1A3RWR9FPnw-q15xwN9FWlFQX2anR3D8JLG8ig6eFhorBl_e0DtrcGfbfNeGE/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7bPROSVmLKiimgWGmkCrt2oH8uCQTjfEzQjN8hCf92h8PwVP-Hzrx5lJBEOggaH_dIuaXS3io10Fo4JMEwQugvt9XmNdTvN7DKrNCgDJIP0dHWRFT9FSIZJQKaRWul32CngL0NGq8SE/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz6SxGoqjoM4Y0UHYsEDyT3Y2E8I5KJYGJ7QpBhio2TdW38zobdvAxFSf6Z0f_0sdQvncKAack6sD_-NQroWAilo4yUxNgA9zMr1GsoubGxI_IHWF5hyphenhyphenkmEfrlSQOwuvIfCa6YoNDrgDs/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGAh8PgUyOt-w_C9iTQ3dBY4m86B3UWIyx1jlfmj1FR1FyfA3BTQwLGHg8GdM2vrKGpfmouITaVck5jfAob4iRn1LNj6wh_yZz1JbXa72AGniChaRIC0p6fcobeUMCJ4SZiecWIIVKYI/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ_5-LL0abdJ0Fs0QtEkmpjlyN9TSAMfwbEKTPK401L4dZnZN0lmjr8L-chv_Iav74tUU5G2PjYQ5c65FKYhdFek-rzz70-KeUwMNtspfQpXeSmhFj60Pp0I2bJn0djvomMaYi7LHWVqc/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDNshzNr6j4rZlzECFv-eFhYrAZIyuX1rkXN1SIT5bmvRWDpG8uuuVTJ2yWkTSxrTmzvV50IcE6Pp1qFS1wPdE9lS8NubYQC3IVDVcIPG7s7D7Jud7LsJvZp2Ll9pO3WUQVMyI6d_sxA/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64VzU_sOFCYfyHAKf4BujicUELOJ0Ttgwq_Nm-NoDZ6TPNBnlYo3tX5bhMY_UxegiXNtw0QsvlYqXuJfRno9GUBJP_1j6gaRACQod5I1fzcGE-6GrGYkDlheZfbgld0xBfjz4iAqciJ4/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMd592vV8mD2UfUTK1etXDXwvq5Rvydqd0Snq6M3s2QF0KtnUGgc2Pf4wzRN9SIOJ1G0aWl0K58l2VzGMbsXhVT2HvqTlqor0Lcd0loYgQ8xPdgWaD8OG91KL1ZhClPOJJ-Wm-Z01kM6Tj/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 :)
No comments:
Post a Comment