Hi Friends! Beautiful Social sharing bookmarking widget for your blogs with CSS3 and jQuery. this a great widget and nice looking with CSS3 and jQeury hover Effects.
Live Demo Here!
With CSS3With Jquery
How to Add this Widget with CSS3?
- Go to Blogger Dashboard > Design tab > Edit HTML tab
- Chack Expand Widget Templates checkbox
- 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/AVvXsEjluOq5PREpf-TZ8NpLJXMORuBBTFrvOIBKJyQ1sGzV0cCRqasRhzrbLb-bM5f_79ctlkIAUjvLmBw_vZRX5-sRTN-SHpJ5962ByHFYj52-IV95rThUAOe0Li-lTTDSkG08Cv7v1fN7IP0u/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWW5EKNZIF7Os7wjtB5HaAcQ_iAAh8I23mIF5kbOOagWB65NEoAmlwHXphFAGWPQmVnuzUAfsX6eudSGQM597ZKSv7ItaFFN4PBYpdRTJngQmTgEro3jsiaBNnx8IXFZjSMMniUrKwBL3P/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZwF3edy9QPavQX8KFMfYP-XdGS5OE7AAnVcJ2IpYIvgH1UNrnotCGz0a7X45N5rdYHM9VJya3bO5KrIMOvWdt3C-Tm2wTYY6sXYs0gLaA91KRDhd89Rfh_q44CJ4W-xVeSDLnQWZ3H2Z/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3LB5PpHsJ8sevlHtMYhASJ7uCfx2_S_90TiT1Mux4Av-A4_V2R0rAJaB6d5SlVAIC5fVlvWyjwKayWwyIMm0rIsob-n_cowPgrE8YJ5pYRGTZW-ERhcUQR4vgE5R4vi6boXE8tEEVsX70/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBpj7Ng6WE1DzSnVyKFalGAFwnuiTd-t90wW1aImUL3OiYmbI8EAu-rpIIiir8XwIfsJKzkXowBwSgDAuq0riiS9FZ-4X_cOrp1zU_01S3LPlkuZyy9AmotnjDMdljtQbHaMKxSNkTXGLW/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9nUA587yGbqDmhH3rKmMgbh7hrkA6Dvncy3YnmSAGZqD7q1LQEXO0h29gnNHFWMiBOXX6PgM35xylyuLkNfKBedqdtChB_7jhITNa1mdAPmRUDf2y_1pVnIz8GP_9jTxhn06pAWxadz6p/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4gpsO2nLao3oEV8Zmxh8n84jJmJLnl5REv3mW9wC-q3PG3UKmVVN_kWmFVS0SRHn_so4SGbSyx08c8I6EnP-c8OGvio0NVbnQzBBH-h2vGGwGIU1Z1Y7CJyJcECueVKD4iir9lMqoz3D8/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrpmLuBeoOHogPtM7VID0m8TyvEdm80eR36Tuwp74ASkPofY5XMOVSiCARCRTiatBFYbbjgIy8BPQVrpuXc-uUAqcFWhrAXMCZagn0krFudlc3D8kKWYcdkKrS3vnlLs4hzvJJlIw0ih5P/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLD9VaXHo8wyyOIppDoQOwcqrhMq2javVvZT72FL8XoM0sGNU2HsUo2E9Z61ol7fuLi0wiqK-vjdkgGD681qKNqvMN00aFllQrodHrxYsRvJJyNoMX4H8U73IY_FLOt_3SXXmGtwikxmV/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> - Search for
<data:post.body/>tag - And add below Code just After it !
<b:if cond='data:blog.pageType == "item"'> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-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' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <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> </li> <li class='way2blogging-stumbleupon'> <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> </li> <li class='way2blogging-digg'> <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> </li> <li class='way2blogging-delicious'> <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> </li> <li class='way2blogging-linkedin'> <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> </li> <li class='way2blogging-reddit'> <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> </li> <li class='way2blogging-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> - Save your Template Now! Done!
How to Add this Widget with Jquery?
- Go to Blogger Dashboard > Design tab > Edit HTML tab
- Chack Expand Widget Templates checkbox
- 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/AVvXsEjluOq5PREpf-TZ8NpLJXMORuBBTFrvOIBKJyQ1sGzV0cCRqasRhzrbLb-bM5f_79ctlkIAUjvLmBw_vZRX5-sRTN-SHpJ5962ByHFYj52-IV95rThUAOe0Li-lTTDSkG08Cv7v1fN7IP0u/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWW5EKNZIF7Os7wjtB5HaAcQ_iAAh8I23mIF5kbOOagWB65NEoAmlwHXphFAGWPQmVnuzUAfsX6eudSGQM597ZKSv7ItaFFN4PBYpdRTJngQmTgEro3jsiaBNnx8IXFZjSMMniUrKwBL3P/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZwF3edy9QPavQX8KFMfYP-XdGS5OE7AAnVcJ2IpYIvgH1UNrnotCGz0a7X45N5rdYHM9VJya3bO5KrIMOvWdt3C-Tm2wTYY6sXYs0gLaA91KRDhd89Rfh_q44CJ4W-xVeSDLnQWZ3H2Z/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3LB5PpHsJ8sevlHtMYhASJ7uCfx2_S_90TiT1Mux4Av-A4_V2R0rAJaB6d5SlVAIC5fVlvWyjwKayWwyIMm0rIsob-n_cowPgrE8YJ5pYRGTZW-ERhcUQR4vgE5R4vi6boXE8tEEVsX70/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBpj7Ng6WE1DzSnVyKFalGAFwnuiTd-t90wW1aImUL3OiYmbI8EAu-rpIIiir8XwIfsJKzkXowBwSgDAuq0riiS9FZ-4X_cOrp1zU_01S3LPlkuZyy9AmotnjDMdljtQbHaMKxSNkTXGLW/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9nUA587yGbqDmhH3rKmMgbh7hrkA6Dvncy3YnmSAGZqD7q1LQEXO0h29gnNHFWMiBOXX6PgM35xylyuLkNfKBedqdtChB_7jhITNa1mdAPmRUDf2y_1pVnIz8GP_9jTxhn06pAWxadz6p/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4gpsO2nLao3oEV8Zmxh8n84jJmJLnl5REv3mW9wC-q3PG3UKmVVN_kWmFVS0SRHn_so4SGbSyx08c8I6EnP-c8OGvio0NVbnQzBBH-h2vGGwGIU1Z1Y7CJyJcECueVKD4iir9lMqoz3D8/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrpmLuBeoOHogPtM7VID0m8TyvEdm80eR36Tuwp74ASkPofY5XMOVSiCARCRTiatBFYbbjgIy8BPQVrpuXc-uUAqcFWhrAXMCZagn0krFudlc3D8kKWYcdkKrS3vnlLs4hzvJJlIw0ih5P/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLD9VaXHo8wyyOIppDoQOwcqrhMq2javVvZT72FL8XoM0sGNU2HsUo2E9Z61ol7fuLi0wiqK-vjdkgGD681qKNqvMN00aFllQrodHrxYsRvJJyNoMX4H8U73IY_FLOt_3SXXmGtwikxmV/s1600/way2blogging-technorati.png"); } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org jQuery(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
<data:post.body/>tag - And add below Code just After it !
<b:if cond='data:blog.pageType == "item"'> <ul class='way2blogging-social' id='way2blogging-jqueryanime'> <li class='way2blogging-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' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <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> </li> <li class='way2blogging-stumbleupon'> <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> </li> <li class='way2blogging-digg'> <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> </li> <li class='way2blogging-delicious'> <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> </li> <li class='way2blogging-linkedin'> <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> </li> <li class='way2blogging-reddit'> <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> </li> <li class='way2blogging-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> - Save your Template Now! Done!
<<<<<****************************************************************>>>>>
We hope you have Enjoyed this
Widget & find it useful for you. If you have any Problem or Issue
with this Widget, Please do visit the Official page of this Widget here way2blogging.org and directly ask the developer of this Widget for the Solution by
Commenting there.
0 comments