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 jawad @ www.smsdudez.blogspot.com */
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/AVvXsEjp_LqHjiYN-EgKxdLECgpgwNtWSXPtypGJArG1mBAiUtvmz4S5AF4SQAgdWWoxdmE8FS6QY16RIQmlJUg0a3dD_aFDwhFd1BqJgDT6fzhrKom-AJl4GNPtmcy5ZUowQ2xpJ6lhmJ56eMkk/s1600/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4v4Gr6Oy15zmjQHEjIvnT_Uo3l5dixt-S6NHpxa0yHuPHYeysKHB-sWzqKvz2CDDKsCgSTZtclUtnS_qZk4treli120iYdWja_EC6-7zdaMzB57amrM0EtJ9GOOkwYzDcsvk-qjAkUEJ/s1600/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYC8FZGXZ2FstRp3E1JjgjMjRPCuP7AOVcU2gWMy9fOlkBig29xKFKOaHRNKgXwff1VEXV_ciTHh2TQZEr2fUVXXl0CPyaFtH21IvhTbi13PeX-7dRbIhVRnYsr53dOfWYFv_X44EaOc5/s1600/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHosqspMY1Z1k5gLX7c3BGIfPO00dmcfCVqKmHxaQmNuQpvXJNRxvyl4jKqozkvmnqlwhXDPXYZtJwWZVH0gK5o3Muta9YqFyXRve2UIy1GUQPtGm6r78ZmwRVV8-vjLRXilH50nx8dYex/s1600/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawhfKAbVDJw3hc0iq2EZRK2QdSDSYD23pGIw-BL5uyElrHSKDBwb1q5UBwIvkH1kGSgbd78NpZqgIO0scijrVKi0B0ErA7Fm0sVKbn9gcVHqNlHwgG6ZEbHaPace2sx4qz-ktB9izLGIf/s1600/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgSKPtg1RDXJT5Vel0GXZz0XFttNIPli1CjAXAAILeZ16N_k-HG1fh-fuzUC-G0x0wdi6B7EvfET0gQeRQgNDdz0O9Rdw6mMevWsJ-rTNjhTWz3jUSv7US2SvsLtiqRVpkeV2nhs-PJqF/s1600/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0ROXcRdds8a-bx2XQv_xN1vo4UtInnLVn5eOWpf5F8pwmu0p8JB3UZadugZVbOueSxw2zQo_vhXV0klT-yca_G_1_UdHOUwJmVr_hi9WUFK5XS3nMUooLbMzYO9A6qglq0pjR4vcl9Yq/s1600/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvEuJp7k6SNWOtdUojXeN_ViiHY7vEV1Mjip3atrDxrXos5sZiTaJlzDJInFHAGkGCfMPc9POua46JP6bgIVNxFB5lNJJi4N3uRaIcqM7GRocPHSP4EyYA52bZWP1dKcW2QhNKNLXNK5T/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 jawad @ www.smsdudez.blogspot.com */
</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 Jawad @ www.smsdudez.blogspot.com */
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/AVvXsEjp_LqHjiYN-EgKxdLECgpgwNtWSXPtypGJArG1mBAiUtvmz4S5AF4SQAgdWWoxdmE8FS6QY16RIQmlJUg0a3dD_aFDwhFd1BqJgDT6fzhrKom-AJl4GNPtmcy5ZUowQ2xpJ6lhmJ56eMkk/s1600/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii4V9c9_yJInNuVArNxMhUcU8hQ2oF3rjo1kIoBdSanivojcitYu01SbI_C-8zmgyg27RWpVsBbSt3kLvf-Y26IsDfpkwoZOQ3f_bRPHVGceXjIlCC7C8COn5Z2YD76slweKsgcnXpsz0f/s1600/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4v4Gr6Oy15zmjQHEjIvnT_Uo3l5dixt-S6NHpxa0yHuPHYeysKHB-sWzqKvz2CDDKsCgSTZtclUtnS_qZk4treli120iYdWja_EC6-7zdaMzB57amrM0EtJ9GOOkwYzDcsvk-qjAkUEJ/s1600/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYC8FZGXZ2FstRp3E1JjgjMjRPCuP7AOVcU2gWMy9fOlkBig29xKFKOaHRNKgXwff1VEXV_ciTHh2TQZEr2fUVXXl0CPyaFtH21IvhTbi13PeX-7dRbIhVRnYsr53dOfWYFv_X44EaOc5/s1600/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHosqspMY1Z1k5gLX7c3BGIfPO00dmcfCVqKmHxaQmNuQpvXJNRxvyl4jKqozkvmnqlwhXDPXYZtJwWZVH0gK5o3Muta9YqFyXRve2UIy1GUQPtGm6r78ZmwRVV8-vjLRXilH50nx8dYex/s1600/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawhfKAbVDJw3hc0iq2EZRK2QdSDSYD23pGIw-BL5uyElrHSKDBwb1q5UBwIvkH1kGSgbd78NpZqgIO0scijrVKi0B0ErA7Fm0sVKbn9gcVHqNlHwgG6ZEbHaPace2sx4qz-ktB9izLGIf/s1600/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgSKPtg1RDXJT5Vel0GXZz0XFttNIPli1CjAXAAILeZ16N_k-HG1fh-fuzUC-G0x0wdi6B7EvfET0gQeRQgNDdz0O9Rdw6mMevWsJ-rTNjhTWz3jUSv7US2SvsLtiqRVpkeV2nhs-PJqF/s1600/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0ROXcRdds8a-bx2XQv_xN1vo4UtInnLVn5eOWpf5F8pwmu0p8JB3UZadugZVbOueSxw2zQo_vhXV0klT-yca_G_1_UdHOUwJmVr_hi9WUFK5XS3nMUooLbMzYO9A6qglq0pjR4vcl9Yq/s1600/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvEuJp7k6SNWOtdUojXeN_ViiHY7vEV1Mjip3atrDxrXos5sZiTaJlzDJInFHAGkGCfMPc9POua46JP6bgIVNxFB5lNJJi4N3uRaIcqM7GRocPHSP4EyYA52bZWP1dKcW2QhNKNLXNK5T/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
$(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 Jawad @ www.smsdudez.blogspot.com
</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!
You done.
Please Drop Your valuable Comments About This Post and Happy Blogging!