Friday, 15 July 2011

Add Social Sharing and Bookmarking Widget with Cool Hover Effect


Here I give you the Social Sharing and Bookmarking Widget with Cool Hover Effect using. This widget is used by me and you see that widget below every post present in my Blog. Because the sharing of content on Social Media play the very big role for Traffic Generation for your Blog/Website. And In this post I explained How to Add Social Sharing and Bookmarking Widget with Cool Hover Effect . Excited to add this to your existing  theme?

Step 1:
First navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. 
Step 2:
1.Click on Expand Template widgets checkbox.
2.And Search for ]]></b:skin> tag and put below code above it!
Step 3:
/*****************************************
     Beautiful Social Bookmarking Widget CSS by http://www.bloggertank.com/
******************************************/
 ul.bloggertank-social { list-style:none; margin:0;padding:20px 35px 15px;display:inline-block; }  
 ul.bloggertank-social li { display:inline; float:left; background-repeat:no-repeat; }
 ul.bloggertank-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }  
 ul.bloggertank-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.bloggertank-social li.bloggertank-facebook { background-image:url("http://4.bp.blogspot.com/-JmB5s7xJ9Oc/Th_9BC1bfOI/AAAAAAAAAKg/HR_2ZnzLL14/s1600/bloggertank-facebook.png"); }  
 ul.bloggertank-social li.bloggertank-twitter { background-image:url("http://3.bp.blogspot.com/-f-rQ4-KJjoA/Th_9QP4dE5I/AAAAAAAAAK4/P4NgjpPSMU4/s1600/bloggertank-twitter.png"); }   
 ul.bloggertank-social li.bloggertank-googlebuzz { background-image:url("http://4.bp.blogspot.com/-uz_I6nUWx18/Th_9Dm3ip4I/AAAAAAAAAKk/8Ao9WOkyeN4/s1600/bloggertank-googlebuzz.png"); }  
 ul.bloggertank-social li.bloggertank-stumbleupon { background-image:url("http://1.bp.blogspot.com/-JA0A_iZwraY/Th_9MEFhMuI/AAAAAAAAAKw/AlwcOkRdvXU/s1600/bloggertank-stumbleupon.png"); }  
 ul.bloggertank-social li.bloggertank-digg { background-image:url("http://2.bp.blogspot.com/-wN0LdVWKRUc/Th_9AND2mlI/AAAAAAAAAKc/jOANEBNBcTM/s1600/bloggertank-digg.png"); }  
 ul.bloggertank-social li.bloggertank-delicious { background-image:url("http://2.bp.blogspot.com/-fJfU_ueNg5o/Th_8-n9I6fI/AAAAAAAAAKY/vH1Kvp9Sz6s/s1600/bloggertank-delicious.png"); }  
 ul.bloggertank-social li.bloggertank-linkedin { background-image:url("http://2.bp.blogspot.com/-DIBPf01BT1s/Th_9Ez-u1cI/AAAAAAAAAKo/wSkTdWeXfGY/s1600/bloggertank-linkedin.png"); }  
 ul.bloggertank-social li.bloggertank-reddit { background-image:url("http://2.bp.blogspot.com/-vuiMdYA8WUE/Th_9Jgl74MI/AAAAAAAAAKs/i5R2aS-B0KY/s1600/bloggertank-reddit.png"); }  
 ul.bloggertank-social li.bloggertank-technorati { background-image:url("http://2.bp.blogspot.com/-tnSPYyTERFM/Th_9N4HIkQI/AAAAAAAAAK0/QVe4n1Zsr3U/s1600/bloggertank-technorati.png"); }  
 #bloggertank-cssanime:hover li { opacity:0.2; }  
 #bloggertank-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }  
 #bloggertank-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }  
 #bloggertank-cssanime li:hover { opacity:1; }  
 #bloggertank-cssanime li:hover a strong { opacity:1; top:-10px; } 

Step 4:
1.Search for <div class='post-footer'> tag
2. And Put Below Code immediately after it!
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <ul class='bloggertank-social' id='bloggertank-cssanime'>
  <li class='bloggertank-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='bloggertank-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='bloggertank-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='bloggertank-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='bloggertank-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='bloggertank-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='bloggertank-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='bloggertank-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>
<br/>

Step 5:
Now Save your Template.
Please share your opinions about the customizations which you want to have on the template as well as comment on the customizations that I post. See you soon in another interesting article!

Post a Comment

 

Random Posts

Man Behind This Blog

Well I'm a technocrack teenager and I love to blog down at my blog,BloggerTank. I'm a big Google Fan and I love to posting for my blog so that some people can benefit from little tweaks which may enhance their productivity skills with blogging

http://techviki.com

This my new tech blog follow @ http://techviki.com