Add Beautiful Social Bookmarking Widget Css/JQUERY For Blogger

Hie Friends ! Well i've done many posts on my blog About Social bookmarking Widgets and Some Cool widgets of Blogger.But this post is a quite different one.Here i'm posting This Tutorial As per the Request by a Friend.
So here is the simple trick to Add a cool and Awesome Social Bookmarking Widget to your Blogger blog ! So Before Going to the Tutorial Just Have a look at the Below Screenshot

Live Demo 

With CSS3

• Facebook
• Twitter
• GoogleBuzz
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati

With Jquery

• Facebook
• Twitter
• GoogleBuzz
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati

So Now Follow the Below Steps:


1) How to add this widget using CSS3 :.


First Login to your Blogger then Navigate to Dashboard.
Now Check the box "Expand Widget Templates".


Search for </head>  Tag and add below Code just before the  </head> Tag 



<style type="text/css"> /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; 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);} ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WwTfsLICuBFZijD5-rQI2KMnJ8TdUOcnbC1EYmfOrvkC-Viq8ptuA4PhlF_D3OcYGzRwIjOIYOlqhjgK3euM3_xPHRFsdacD9i_ZTpCycz33xUQHAr6Nn3BXbhMOGpkwoDiYYjMnx6Hd/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTdjvB1vJt_2qOvOaj_enmbAmrxrC9NC5umrwn9PSgUsc6p7QE18cLa8_nszPp0QDYaCBsOmN8qcR5Vho5UGyogeOeg5F1V5UrlR8kN1JWlOlOvX3S0ZaZEROFL8-HMEXUrm4HV6tErXLK/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMb5BUlyn21zLD98_aKPl0ph6vBs5iM77fm3UU3i7erqt_aFE1cqE-PY3Sz-RuX2i7LPFoKd070CiasRgz9Pj_mhrZoRD8cIpD3kdvUyg5oR3aTjOELHH4fHwx2-AzCka4EeKD3JDNJks9/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiu22zcC9gUmdWGtJOu68uaz4F6bhL6DHM7iQ9w25495nOO7repg-yWBSgsSlRBOAJcGU6GDTyVoJm7-o_RXTiUONjMEorNNsmAaUvHcm63JwkG6dx3Xhnj89mmhaOk_o4vTz3MKGHfmzO/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJcTpH1XaAkLtq7TXHxtikCZ5WTGP3znevevv9IzbnDUFjv6czupzkG-AEGjG2I_GLmZ_6pujDdLhePekqJ4e5zqFsMSzag9Bi8P8yJaB0-AC6Ri7D8DnS4mpNUxEJbBC4XcTkBoBDEGN/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLEt0_TC80QC2ci0oldipsGMLTDBn5uhhcsU1jYnnXS-xv5XeOSGyhDfL6SEKPvJjY3uAUKF5RrMa4r6tXt2V_okAa2_COLzviaUtAGCz5wr89h_KxMPTQ7Y-p42sSkNSZ1UzkzAQBvI2/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8aECisDQ90WJCp9l7Ath4W-uA4q5rPUqSz3dz8AvUswSEBcFKrkywkL5JAimeZspFY8XCDDcVu2Tiww_lsmh1Vk17WcOeyU2jeNkNhw2pFGKqznj_d118sjcn8OfRzn2dPENc9tyc4sT/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNqXUo5BoQl5KlRRju4qR_rAvIp2cDf5fpl0W-0eHiL4eNn0Xt5ydu2CJFwFT5c22fs1lZTUE3iblQ9kIJkfsHpchOf2dWRLnFjvHlItAnRVP_e6zc5i0uRnSBBZ7qCcUGD4o1qdpSBSr8/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwugtS0jYxJ75arHxxvjh6oYSXxw-RNhj3euE1-HxvIlaAZ48AC7ug8w2pHlEzXs4O3aYT-XFCMRC7a1a8FYCNEbaPq3u79f1S9hDXf9i9jlwWkaaknW8QGifsJg4SAvM8LbiTMkfPKCi0/s1600/way2blogging-technorati.png"); } #way2blogging-cssanime:hover li { opacity:0.2; } #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #way2blogging-cssanime li:hover { opacity:1; } #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ </style>

Now Search for  <data:post.body/> tag And Add below Code just After it.
<b:if cond='data:blog.pageType == "item"'><br /> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-facebook'><br /> <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' title='Share this on Facebook'><strong>Facebook</strong></a><br /> </li> <li class='way2blogging-twitter'><br /> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a><br /> </li> <li class='way2blogging-googlebuzz'><br /> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a><br /> </li> <li class='way2blogging-stumbleupon'><br /> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a><br /> </li> <li class='way2blogging-digg'><br /> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a><br /> </li> <li class='way2blogging-delicious'><br /> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a><br /> </li> <li class='way2blogging-linkedin'><br /> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a><br /> </li> <li class='way2blogging-reddit'><br /> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a><br /> </li> <li class='way2blogging-technorati'><br /> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a><br /> </li> </ul> </b:if>

Now Just Save your Template and you're Done.

2) Using Jquery add the Widget :.


Go to Edit html and Check the Expand widget templates option


Now Add Below Code just before </head> tag

<style type="text/css"> /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; 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);} ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WwTfsLICuBFZijD5-rQI2KMnJ8TdUOcnbC1EYmfOrvkC-Viq8ptuA4PhlF_D3OcYGzRwIjOIYOlqhjgK3euM3_xPHRFsdacD9i_ZTpCycz33xUQHAr6Nn3BXbhMOGpkwoDiYYjMnx6Hd/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTdjvB1vJt_2qOvOaj_enmbAmrxrC9NC5umrwn9PSgUsc6p7QE18cLa8_nszPp0QDYaCBsOmN8qcR5Vho5UGyogeOeg5F1V5UrlR8kN1JWlOlOvX3S0ZaZEROFL8-HMEXUrm4HV6tErXLK/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMb5BUlyn21zLD98_aKPl0ph6vBs5iM77fm3UU3i7erqt_aFE1cqE-PY3Sz-RuX2i7LPFoKd070CiasRgz9Pj_mhrZoRD8cIpD3kdvUyg5oR3aTjOELHH4fHwx2-AzCka4EeKD3JDNJks9/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiu22zcC9gUmdWGtJOu68uaz4F6bhL6DHM7iQ9w25495nOO7repg-yWBSgsSlRBOAJcGU6GDTyVoJm7-o_RXTiUONjMEorNNsmAaUvHcm63JwkG6dx3Xhnj89mmhaOk_o4vTz3MKGHfmzO/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJcTpH1XaAkLtq7TXHxtikCZ5WTGP3znevevv9IzbnDUFjv6czupzkG-AEGjG2I_GLmZ_6pujDdLhePekqJ4e5zqFsMSzag9Bi8P8yJaB0-AC6Ri7D8DnS4mpNUxEJbBC4XcTkBoBDEGN/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLEt0_TC80QC2ci0oldipsGMLTDBn5uhhcsU1jYnnXS-xv5XeOSGyhDfL6SEKPvJjY3uAUKF5RrMa4r6tXt2V_okAa2_COLzviaUtAGCz5wr89h_KxMPTQ7Y-p42sSkNSZ1UzkzAQBvI2/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8aECisDQ90WJCp9l7Ath4W-uA4q5rPUqSz3dz8AvUswSEBcFKrkywkL5JAimeZspFY8XCDDcVu2Tiww_lsmh1Vk17WcOeyU2jeNkNhw2pFGKqznj_d118sjcn8OfRzn2dPENc9tyc4sT/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNqXUo5BoQl5KlRRju4qR_rAvIp2cDf5fpl0W-0eHiL4eNn0Xt5ydu2CJFwFT5c22fs1lZTUE3iblQ9kIJkfsHpchOf2dWRLnFjvHlItAnRVP_e6zc5i0uRnSBBZ7qCcUGD4o1qdpSBSr8/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwugtS0jYxJ75arHxxvjh6oYSXxw-RNhj3euE1-HxvIlaAZ48AC7ug8w2pHlEzXs4O3aYT-XFCMRC7a1a8FYCNEbaPq3u79f1S9hDXf9i9jlwWkaaknW8QGifsJg4SAvM8LbiTMkfPKCi0/s1600/way2blogging-technorati.png"); } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ </style><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><br /> <script type="text/javascript"> // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org $(document).ready(function () { $("#way2blogging-jqueryanime li").each(function () { $("a strong", this).css("opacity", "0"); }); $("#way2blogging-jqueryanime li").hover(function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2); $("a strong", this).stop().animate({ opacity: 1, top: "-10px" }, 300); }, function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1); $("a strong", this).stop().animate({ opacity: 0, top: "-1px" }, 300); }); }); // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org </script>




Search for tag <data:post.body/> And Add the Below Code just after it.


<b:if cond='data:blog.pageType == "item"'><br /> <ul class='way2blogging-social' id='way2blogging-jqueryanime'> <li class='way2blogging-facebook'><br /> <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' title='Share this on Facebook'><strong>Facebook</strong></a><br /> </li> <li class='way2blogging-twitter'><br /> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a><br /> </li> <li class='way2blogging-googlebuzz'><br /> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a><br /> </li> <li class='way2blogging-stumbleupon'><br /> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a><br /> </li> <li class='way2blogging-digg'><br /> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a><br /> </li> <li class='way2blogging-delicious'><br /> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a><br /> </li> <li class='way2blogging-linkedin'><br /> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a><br /> </li> <li class='way2blogging-reddit'><br /> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a><br /> </li> <li class='way2blogging-technorati'><br /> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a><br /> </li> </ul> </b:if><br />

Now Save the Template and You're Done

You Might Also Like