Now I am going to share some cool widget. Widget is
basically belonging to social networking. We have created a widget of social sharing
button after a long time. Now you can add cool social sharing button under your
every blog post with unique style will gain some more share click for you. These
social sharing buttons have cool effect with the help of CSS3 when you mouse
pointer in hovers these icons. The Social sharing code is made up of CSS so now you can customize code easily.Add Code To Blogger Template:
- Go to your Blogger account and open the template tabs right of your Blogger dashboard.
- Click on the edit HTML and open it. The new window appears with your template codes.
- Now press Ctrl + F the new light box will appears and put this ]]></b:skin> code in the box and just above this code ]]></b:skin> past the below code.
#PFL-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#PFL-share ul li {display: inline;background:none;margin:0;padding:0;}
#PFL-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iPAaAi-m7zbOCh6LfffwfeygRHEO1cDlWQpGe95uHCpF1PIBiGnvH_QbgqrfZhdthKhNSbO85wJPDlrvChcyUA2RD5t6VjlbcJldxeh-KnYG3VSmaqdjzZ3zEMDCITaJtzw5BD9admgl/s320/PFL-share-icons-sprite.png ') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#PFL-share ul li a.twitter {background-position: -0px -0px; }
#PFL-share ul li a.twitter:hover {background-position: -0px -33px; }
#PFL-share ul li a.facebook {background-position: -32px -0px; }
#PFL-share ul li a.facebook:hover {background-position: -32px -33px; }
#PFL-share ul li a.stumbleupon {background-position: -64px -0px; }
#PFL-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#PFL-share ul li a.digg {background-position: -192px -0px; }
#PFL-share ul li a.digg:hover {background-position: -192px -33px;}
#PFL-share ul li a.reddit {background-position: -160px -0px; }
#PFL-share ul li a.reddit:hover {background-position: -160px -33px;}
#PFL-share ul li a.google {background-position: -128px -0px; }
#PFL-share ul li a.google:hover {background-position: -128px -33px;}
#PFL-share ul li a.del-icio-us {background-position: -480px -0px; }
#PFL-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#PFL-share ul li a.mixx {background-position: -96px -0px; }
#PFL-share ul li a.mixx:hover {background-position: -96px -33px; }
#PFL-share ul li a.technorati {background-position: -416px -0px; }
#PFL-share ul li a.technorati:hover {background-position: -416px -33px;}
#PFL-share ul li a.linkin {background-position: -256px -0px; }
#PFL-share ul li a.linkin:hover {background-position: -256px -33px;}
#PFL-share ul li a.yahoobuzz {background-position: -448px -0px; }
#PFL-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#PFL-share ul li a.myspace {background-position: -512px -0px; }
#PFL-share ul li a.myspace:hover {background-position: -512px -33px;}
#PFL-share ul li a.more {background-position: -576px -0px; }
#PFL-share ul li a.more:hover {background-position: -576px -33px;}
|
Next Step:
- Go to your Blogger account and open the template tabs right of your Blogger dashboard.
- Click on the edit HTML and open it. The new window appears with your template codes.
- Now press Ctrl + F the new light box will appears and put the below code in to it to find the correct code.
<data:post.body/>
|
Put below code immediately after this above showing code and save your template.
<b:if cond='data:blog.pageType == "item"'>
<div id='PFL-share'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>
|
After this save your template and refresh your blog for
once. Now you are done visit your blog post and feel happy.
If you face any problem with code or you cant find some do let us know. Your problem will be solved in a jiffy.
About Post Author:
This post is fruit of pen-clipping of Mohammad Hamza Frough, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.
Read more about Mohammad Hamza Frough »
0 comments:
Post a Comment
Share your Feedback and suggestion with us. Any question or need some please contact us and get instant help. Do not post Spam or Back links comments. If spam or post backlinks comments on this blog, your comment will be deleted.