Hello Everyone, posting after a long time due to exams. So today I am sharing a simple blogger widget which will allow visitors to share the blog post on social networks with their friends. This can be very useful plugin which can bring tons of visitors to your blog.Before turning towards the actual guide let us review design and features of this widget. The widget looks like the screenshot below :
Features:
1) All major sharing buttons such as Facebook,Twitter,Google Plus, Pinterest, StumbleUpon, Digg, LinkedIn etc.
2) You can add more buttons by editing the script.
3) Round Shape, which looks more attractive.
4) Hover effect : When the pointer of mouse is located on the button, it becomes dark and other whole page goes faint which brings more and more attraction.
5) Well designed and best looking.
You May Also Like: Round Sidebar Social Network Widget
Highlight Author Comments With Stylish Label
You May Also Like: Round Sidebar Social Network Widget
Highlight Author Comments With Stylish Label
How To Install - The Steps:
1) Log in to your blogger account.
2) Go to template and edit HTML.
3) Click on box to activate it and press CTRL+F and search following code:
NOTE: You may find more than one <data:post.body/> in the template, so if one does not work for you please try with another one and it will solve the problem.
2) Go to template and edit HTML.
3) Click on box to activate it and press CTRL+F and search following code:
]]></b:skin>4) Paste following code above ]]></b:skin>
/*..Css3 round shape Social Sharing Widgets by tricksdroid.com..*/ul.social_btrix {list-style:none;display:inline-block;margin:15px auto;}ul.social_btrix li {display:inline;float:left;background-repeat:no-repeat;}ul.social_btrix li a {display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none;}ul.social_btrix 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_btrix li.abfacebook {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1NRcppaAI2eiGuyd0e11L2T5rZFfoBoPZIH7Ly-wWm79HLisZnyRzirMVAfhJm15UgOG3ONyuBzIUuyz7w6EAEuykOaGoO8FUcO0wL2EQYzqDkZoYAbe_MWbZnTr-aKtG-0lb47OS4t9/s1600/btrix-facebook-icon.png);}ul.social_btrix li.abtwitter {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1aqFyF8bnHR829DRQ2vMwAFFSlMkr5p3TFWFJ01VIlTFaEM067VqJVmYzcA6VSmmopARliFYi4O8Jzx6s18NN_dzvmZP1EdvKtjJ4y3giImMp_RF5UgI0r9S9v-owic8l0jHQPgftyGY/s1600/btrix-twitter-icon.png);}ul.social_btrix li.abgoogleplus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8TSXAob308ikyviurtR7ug0Szy2qX0Lhf44_Lf7Qeaym_g4Bz0hNG7DfyOW_zHPtPXc3uvpFXWdvFqZIKFoHByWpQuVyfi0txyJGtovLNllCEZM9PSnFo36VJ9rjv8kUu4KI9cIFXq9P/s1600/btrix-google-icon.png);}ul li.abpinterest {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSmU6lMwv0iE6QRJbfhhGoUob8eI0f3zl5ru-_I8bScVReyk1St22njB9VNMJ6rG2Z5tu2exL6B2TS5VlJGKEwBoyVi09nsRGYPWYR5DsecESBdx4xIYaNPLb1LeAigprw_J3L0plWDnH/s1600/btrix-Pinterest-icon.png);}ul.social_btrix li.abstumbleupon {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswE4BLxRrd3c-EHVRJnxzRI5TP3zK-1SbYc2-rv-S6Hjy67671Ui2yf0dEfzEDsQczvjrmszT1mKfZnwML2QnDHJXFq46DeH8VMc1SDJ-fvRgZ_bSlABDnLxnswf0e5HAPBqksode0SNG/s1600/btrix-StumbleUpon-icon.png);}ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7JjOXmYlQoiOZ4ISPEk5LfmzM4dbSmG3Rg1B-S0ymUVW2tqvK3O9Nx_FmwmsBA8F5zCk-RqTjm0KIuA97s4fz06PGoa8x2IYzol45R-sCMMg83-qneXZzts0F3LKzzvSrIyWsBtRKzMCG/s1600/btrix-Digg-icon.png);}ul.social_btrix li.ablinkedin {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdbvB1xSruCNg1uvp9UcC5c3qDv2p85sY-MZuEbcCS-Aj0yyNQ1WGKjORZWhMW2EJq6nbDtvyWI9-SJKLdvl-gP1LImClYNIR415XMVspxJ_O58YjxPXPl8tR1BEbz6HNgm1N73HGo-qr7/s1600/btrix-Linkedin-icon.png);}#animation_btrix:hover li {opacity:0.2;}#animation_btrix li {-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms;}#animation_btrix li a strong {opacity:0;-webkit-transition-property:opacity, top;-webkit-transition-duration:300ms;-moz-transition-property:opacity, top;-moz-transition-duration:300ms;}#animation_btrix li:hover {opacity:1;}#animation_btrix li:hover a strong {opacity:1;top:-10px;}5) Now search the following tag
<data:post.body/>6) Paste following code above <data:post.body/>
<b:if cond='data:blog.pageType == "item"'><div style='font-size: 22px;'><b>Share this article with your friends.</b></div> <ul class='social_btrix' id='animation_btrix'> <li class='abfacebook'> <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='abtwitter'> <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='abgoogleplus'><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='abpinterest'><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='abstumbleupon'> <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='abdig'> <a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a> </li> <li class='ablinkedin'> <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> </ul></b:if>7) Save the template now and you are done :)
NOTE: You may find more than one <data:post.body/> in the template, so if one does not work for you please try with another one and it will solve the problem.
Final Words:
This was the perfect social share button plugin for blogger I have ever seen. Hope you also likes it and I know if you liked it you will definitely share it :p so that this post will also help others.You will notice increase in the visitors to your site from social networks due to this widget in some days. If any problem persists you can feel free to comment below.Happy Blogging, Good Day :) :)
Written by Unknown
Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)
its showing error in head section let see on tipstriks.net
ReplyDelete