Search Box by All Blogger Tricks

Saturday, 7 September 2013

Add Beautiful Social Bookmarking Widget (CSS/jQuery)


Freelance Jobs
Add Beautiful Social Bookmarking Widget (CSS/jQuery) for Blogger / Blogspot
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.

How to Add this Widget with CSS3?

  1. Go to Blogger Dashboard > Design tab > Edit HTML tab
  2. Chack Expand Widget Templates checkbox
  3. 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("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/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("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }  
        ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }  
        ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }  
        ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }  
        ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }  
        ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }  
        ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/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>
  4. Search for <data:post.body/> tag
  5. And add below Code just After it !
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <ul class='way2blogging-social' id='way2blogging-cssanime'>
        <li class='way2blogging-facebook'>
        <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
        </li>
        <li class='way2blogging-twitter'>
        <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
        </li>
        <li class='way2blogging-googlebuzz'>
        <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
        </li>
        <li class='way2blogging-stumbleupon'>
        <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
        </li>
        <li class='way2blogging-delicious'>
        <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
        </li>
        <li class='way2blogging-linkedin'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
        </li>
        <li class='way2blogging-reddit'>
        <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
        </li>
        <li class='way2blogging-technorati'>
        <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
        </li>
        </ul>
        </b:if>
  6. Save your Template Now! Done!

How to Add this Widget with Jquery?

  1. Go to Blogger Dashboard > Design tab > Edit HTML tab
  2. Chack Expand Widget Templates checkbox
  3. 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("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/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("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }  
        ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }  
        ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }  
        ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }  
        ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }  
        ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }  
        ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/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>
  4. Search for <data:post.body/> tag
  5. And add below Code just After it !
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <ul class='way2blogging-social' id='way2blogging-jqueryanime'>
        <li class='way2blogging-facebook'>
        <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
        </li>
        <li class='way2blogging-twitter'>
        <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
        </li>
        <li class='way2blogging-googlebuzz'>
        <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a>
        </li>
        <li class='way2blogging-stumbleupon'>
        <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
        </li>
        <li class='way2blogging-delicious'>
        <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
        </li>
        <li class='way2blogging-linkedin'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
        </li>
        <li class='way2blogging-reddit'>
        <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
        </li>
        <li class='way2blogging-technorati'>
        <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
        </li>
        </ul>
        </b:if>
  6. Save your Template Now! Done!
You are 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.

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved