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/AVvXsEiBT98xiYDZefCJvIJd86AhIg31XI_YHvfPAK6VZYiVJMjQNPahKnBOiHkMOZhOsTRXhIKThbemCui6wTLzfEB4ppQwAJRKZgR_rEYfIloRJfx7Nplj8ITWet7K5Dgse6xOCUDshYxRfGPG/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WiLnmRd_-VuwpUCe07DwPIfJGpCyrojgvaN97NR-4mOmPrY2TFfr9d-DUA2lWudERogNoRpcx8RoJByDV-PBqNY1jVSBe0569kZpwIgEm7aG6m-8ZX-eWFoGpmJIQgmTz7bYko6xi2iX/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNOAQ5I4_MKIkpxzFjuL_nJm9tGwF6ZBZMJBSHdmt-yRTtXsblofMKc8j8rJC4Me62S8Zp1X56FOPIWvn3cLRXMuuomBvaA3_Q8KGZ-xVNqTVkqC1mtCUriIsSI0yQB6lX6xpF0fj8vx5v/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgI_ngyUV6bOK9AJgGqho2O2KPzaPTfpwIHhtkWsEHZF2iWOsyGNWuDzuKuFwOWVfR7Kcc7JbgM4rcSDquAXnYH2PxOifc1L0Qp0UzFI50EvHdDL3g3yGIZR7TMDjmluCKAvqSow4o9Vz8/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMuIoiiWQJdJfSyHAuyZKgv_fOH_m4kts1bhABOrsMpnnzNdsW9MzY_jpK93vUcZX7Fg3BPL3_NG3dq5yDgh2YSz8IJL_3OzizC-aiNKmWQ6Y4aN0Fqi8B4bBfDoyrEPlg6vVzUbm2h97/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_pBL9skquUZDSeudWSayWDdAJpeo2FxWBxj40nlTOYAtGIWhzUUav8CKgP04wjGpNc78DPey7siBjXq2lkWnS5RbLB6FB-5MLuqu4IlEvM2-O9AWa0x3oF4y2tVGO_UCB0_eWUNbJEYzE/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQpExajKOKldRwZq03WfGpI_w728NqLGZmC-qG_82LQtlrD2pB7v99_Y5jri_agrZnKyrhHWcqqTnhTvsrxFjZeI93bWueFSrvobILTJVBJRknokg6AWRxdWzBgvKvS5AnaQujVcCbIMW/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYDeL2pr_0BN11yk_sOr1wjbaxCZ8e1fLRUv1LHKF1YsO7qLuDAybkbutiYka48edVsGKAzt4Ut7QyORX8Msl5EzYDrDJVOyiHZJnLwoYd3Fd4GTE2dYqnTkvxbqBa9Ce1WE3nGxNay0Y/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3LXszO25xUmxxGP3_HLggM3SBvDsp4Fj8q_VyQb78CtpQiyxJZcktBnib7dWz0-4scCkExRfQUO-Mpoo0qT-WeJq4TUX9lHD7vyaZKgGsvhGdNhyENLjjRZKScMYKtKsM-Ijr__o5iAD/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/AVvXsEiBT98xiYDZefCJvIJd86AhIg31XI_YHvfPAK6VZYiVJMjQNPahKnBOiHkMOZhOsTRXhIKThbemCui6wTLzfEB4ppQwAJRKZgR_rEYfIloRJfx7Nplj8ITWet7K5Dgse6xOCUDshYxRfGPG/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WiLnmRd_-VuwpUCe07DwPIfJGpCyrojgvaN97NR-4mOmPrY2TFfr9d-DUA2lWudERogNoRpcx8RoJByDV-PBqNY1jVSBe0569kZpwIgEm7aG6m-8ZX-eWFoGpmJIQgmTz7bYko6xi2iX/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNOAQ5I4_MKIkpxzFjuL_nJm9tGwF6ZBZMJBSHdmt-yRTtXsblofMKc8j8rJC4Me62S8Zp1X56FOPIWvn3cLRXMuuomBvaA3_Q8KGZ-xVNqTVkqC1mtCUriIsSI0yQB6lX6xpF0fj8vx5v/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgI_ngyUV6bOK9AJgGqho2O2KPzaPTfpwIHhtkWsEHZF2iWOsyGNWuDzuKuFwOWVfR7Kcc7JbgM4rcSDquAXnYH2PxOifc1L0Qp0UzFI50EvHdDL3g3yGIZR7TMDjmluCKAvqSow4o9Vz8/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMuIoiiWQJdJfSyHAuyZKgv_fOH_m4kts1bhABOrsMpnnzNdsW9MzY_jpK93vUcZX7Fg3BPL3_NG3dq5yDgh2YSz8IJL_3OzizC-aiNKmWQ6Y4aN0Fqi8B4bBfDoyrEPlg6vVzUbm2h97/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_pBL9skquUZDSeudWSayWDdAJpeo2FxWBxj40nlTOYAtGIWhzUUav8CKgP04wjGpNc78DPey7siBjXq2lkWnS5RbLB6FB-5MLuqu4IlEvM2-O9AWa0x3oF4y2tVGO_UCB0_eWUNbJEYzE/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQpExajKOKldRwZq03WfGpI_w728NqLGZmC-qG_82LQtlrD2pB7v99_Y5jri_agrZnKyrhHWcqqTnhTvsrxFjZeI93bWueFSrvobILTJVBJRknokg6AWRxdWzBgvKvS5AnaQujVcCbIMW/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYDeL2pr_0BN11yk_sOr1wjbaxCZ8e1fLRUv1LHKF1YsO7qLuDAybkbutiYka48edVsGKAzt4Ut7QyORX8Msl5EzYDrDJVOyiHZJnLwoYd3Fd4GTE2dYqnTkvxbqBa9Ce1WE3nGxNay0Y/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3LXszO25xUmxxGP3_HLggM3SBvDsp4Fj8q_VyQb78CtpQiyxJZcktBnib7dWz0-4scCkExRfQUO-Mpoo0qT-WeJq4TUX9lHD7vyaZKgGsvhGdNhyENLjjRZKScMYKtKsM-Ijr__o5iAD/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