Add Beautiful Social Bookmarking Widget (CSS/jQuery) for Blogger / Blogspot
Wednesday, 8 August 2012 - 
blogger widgets
No comments
blogger widgets
No comments
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/AVvXsEhSbSueB0KckDy4IHCMZvwG8f8CcmC1D_50xD-yYRlBEj8YlxGMc7dp-GBXwaf5BJ1siztNl2pd0xjW4rW8KfDIvwQPcp7uV8Bf7di6fcj5KLc3y0WOCWBmIMGdiwgOfRUQ-4KzUlJuYxnE/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/AVvXsEgvkHztNcz7kvOQseWdXAriE_oaEgmonjKUTBF-6XomBG7KquDAfGamSIWaNt3eXbVYPJo9CXXhoMBto9Qm-1oJCAYSMSOM_2NZy8D3amz-IJXv4_3TYBhVhNNOcWZRZRVwPTtf6tYx7oDC/s1600/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD79TSyc2mpbGXQpeKjr7Ksl1z7wOeovbhbVPss0VDqb-YhSxXZ8__Q-0r-X24gHw-D69vZaxJlIXwds1jMMFpovtE2uV7YFFrkEKfoF0AguQBZa7T1vdjk56Jgfzeiys1i2OSS65AiIp1/s1600/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguDaBAuTZrbZ7pjmqg4YiwL0Y4iu5N52J9DC8UCQggQxqK6Wh4pLGB-AXyJs4i2O14AbboUpHztYQ5n2RPlkL8StoPl8ROl9zMIdzFl1FWjA18ADUDM3ZPffUx67KFl2oZlIjBw3QMMOXU/s1600/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNvXmLdhSVw084ZPAL_l_7w6O7YQZbFC5Pez-5PEahRqxxpoUZoQ5NMYsdObbFhmleMOZOIwtYEfZ5cCgFYfPaoA4UUMUI_7_g85iiyU7dz059co9hefbUKIwbHSAHmdJpOQVnvfgwDOy8/s1600/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkij9mNFCgTFoGMxYyRPDWuVQNHugpMkpqSPnyeetX13anRM7hAS6NCFnkt_5_MJlL9zbg_IEqX7hwUnOyvCss3tt3JzAl0YBFKDvr7Ews8LfuzTPiNW3wG_Jl9XbGxsa3JkL0cIe210mX/s1600/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMNYyl5a7orI3HnUgSrYLb3sq9qEITMwVLNs1TvaCu54g-S-l8I78PBX2tDmWGiSF_17sFjb2Cl2WHtVBz0iQD4-ubPOGS4iPPO5z8jnwZ7sdbpavcq-iZvuENiZ8OQs9BFK7nAo_oiCAK/s1600/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGXrtnfDIUi-er9kVKvC7Fr5t2Fg_LydgRHDUobxOL7ntCOhQfXzmZSNP1KxA9c_MlYBDKaV5oeKjB2xvc6LgtuErweRqYdl8H3JCbIsg3fM3S9Uyz1r_eZvBj4dG2qyRIwqbCVRoaOCh/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/AVvXsEhSbSueB0KckDy4IHCMZvwG8f8CcmC1D_50xD-yYRlBEj8YlxGMc7dp-GBXwaf5BJ1siztNl2pd0xjW4rW8KfDIvwQPcp7uV8Bf7di6fcj5KLc3y0WOCWBmIMGdiwgOfRUQ-4KzUlJuYxnE/s1600/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiHTv7w4RQ31bJB2es6hnymsl4NZ_GqyEPd8FA8TqeFT7PZ8YzMXeruory1bOrJMGYUhM79MiaFhYx_uon-PxlqSUfRwbTdgcKblHphMHAVO3ynb8btJ8vRMjmRd6d2fLtocI1SxZkm7i/s1600/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvkHztNcz7kvOQseWdXAriE_oaEgmonjKUTBF-6XomBG7KquDAfGamSIWaNt3eXbVYPJo9CXXhoMBto9Qm-1oJCAYSMSOM_2NZy8D3amz-IJXv4_3TYBhVhNNOcWZRZRVwPTtf6tYx7oDC/s1600/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD79TSyc2mpbGXQpeKjr7Ksl1z7wOeovbhbVPss0VDqb-YhSxXZ8__Q-0r-X24gHw-D69vZaxJlIXwds1jMMFpovtE2uV7YFFrkEKfoF0AguQBZa7T1vdjk56Jgfzeiys1i2OSS65AiIp1/s1600/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguDaBAuTZrbZ7pjmqg4YiwL0Y4iu5N52J9DC8UCQggQxqK6Wh4pLGB-AXyJs4i2O14AbboUpHztYQ5n2RPlkL8StoPl8ROl9zMIdzFl1FWjA18ADUDM3ZPffUx67KFl2oZlIjBw3QMMOXU/s1600/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNvXmLdhSVw084ZPAL_l_7w6O7YQZbFC5Pez-5PEahRqxxpoUZoQ5NMYsdObbFhmleMOZOIwtYEfZ5cCgFYfPaoA4UUMUI_7_g85iiyU7dz059co9hefbUKIwbHSAHmdJpOQVnvfgwDOy8/s1600/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkij9mNFCgTFoGMxYyRPDWuVQNHugpMkpqSPnyeetX13anRM7hAS6NCFnkt_5_MJlL9zbg_IEqX7hwUnOyvCss3tt3JzAl0YBFKDvr7Ews8LfuzTPiNW3wG_Jl9XbGxsa3JkL0cIe210mX/s1600/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMNYyl5a7orI3HnUgSrYLb3sq9qEITMwVLNs1TvaCu54g-S-l8I78PBX2tDmWGiSF_17sFjb2Cl2WHtVBz0iQD4-ubPOGS4iPPO5z8jnwZ7sdbpavcq-iZvuENiZ8OQs9BFK7nAo_oiCAK/s1600/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGXrtnfDIUi-er9kVKvC7Fr5t2Fg_LydgRHDUobxOL7ntCOhQfXzmZSNP1KxA9c_MlYBDKaV5oeKjB2xvc6LgtuErweRqYdl8H3JCbIsg3fM3S9Uyz1r_eZvBj4dG2qyRIwqbCVRoaOCh/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!
0 comments:
Post a Comment