Tuesday, December 11, 2012

Add Sexy Social Sharing Buttons To Blogger

Social networking now accounts for 22% of all time spent online in the US.Many persons are using social media to promote there business, one social share can drive flood of traffic to your blogs.Adding social media buttons to blogger is not a big deal but if you will add eye catching social sharing buttons then it increase chance to get more share on your post.In this post I will give you "Sexy Social Sharing Buttons" which is create with help of pure css3.


Adding Sharing Buttons To Blogger

  • Go To Blogger Dashboard
  • Click Edit HTML > Proceed > Click the Expand Widget Templates Box
  •  Search <data:post.body/>
  • Just below <data:post.body/>  paste the following code
<b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='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'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='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' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; 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); padding:3px; }  ul.social li.facebook { background-image:url(https://lh6.googleusercontent.com/-qXQfMpK5yyM/UBgnVp-zyWI/AAAAAAAAFb0/GRnVp4eqO1g/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://lh3.googleusercontent.com/-XoczCzeugFg/UBgnW9gfOMI/AAAAAAAAFcg/N9qWk37w_SA/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://lh3.googleusercontent.com/-XZA2IVaxutU/UBgnV81TTMI/AAAAAAAAFb8/5-SxVYGD3WU/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://lh6.googleusercontent.com/-Hfy8WKpzfKc/UBgnWW00Z8I/AAAAAAAAFcM/5ppIBhBfhUo/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://lh5.googleusercontent.com/-D89Zc49MpsM/UBgnWuUueaI/AAAAAAAAFcY/EhOMIXDHPTY/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://lh5.googleusercontent.com/-8YgPtME6n9U/UBgnVlFappI/AAAAAAAAFb4/TJRielU0dVU/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://lh6.googleusercontent.com/-4yZnL9kjU9w/UBgnWDrtReI/AAAAAAAAFcE/WbW8M0G1QTE/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://lh5.googleusercontent.com/-BVN-XnkL53g/UBgnWdIXDBI/AAAAAAAAFcQ/v4GRUCSsPLA/s50/reddit.png); }  ul.social li.technorati { background-image:url(http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if>

  • Now Click On Save Template Button And Enjoy This Awesome Widget.
If you have any problems tell me in the comments.

0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our Instant HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
4.Click Subscribe by Email to receive Replies