Powered by Blogger.

Ads Top

Facebook

Popular Posts

Cat-1

Cat-2

Cat-3

Cat-4

» » » » » » Responsive Social Sharing Widget

Responsive Social Sharing Widget -Techdio





Social sharing buttons helps to get good amount of  backlinks to your site.  Here is a very responsive Social is sharing button.It works well on any platform.  It can be used anywhere on your site, especially under every post, so that others can share your article.



How to add this Social Sharing Widget Under every post In Blogger.

Step 1: Login to your blogger dashboard.
Step 2: Go to Template and clcik 'Edit HTML'.
Step 3: Now search for <data:post.body/> using Ctrl + F.There will be more than one <data:post.body/> for some blogger template.So don't get confused.Just try placing this code under each one of the <data:post.body/> tag.
Step 4: Below <data:post.body/> paste the below code.
<div class='techdio'> 
<center>
 <ul class='social' id='cssanimation'>  <center>Share this with your friends</center>
 <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>    
<li class='techdio'>     <a expr:href='&quot;http://techdio.com/faves?add=&quot;+data:post.url?http://www.techdio.com ' rel='nofollow' target='_blank'><strong>TechDiO</strong></a>     </li>
 </ul>
     
</center></div>  

 <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>&#8203; 
<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(http://3.bp.blogspot.com/-Cmya0AHCVgM/U9s0uavKRaI/AAAAAAAACJw/cPjmeRtEzx4/s1600/facebook-icon.png); }  
ul.social li.twitter
  background-image:url(http://2.bp.blogspot.com/-Z-R5D3-QLH8/U9s0vx2LnII/AAAAAAAACJ0/0Qd79zilPkU/s1600/twitter-icon.png); }  
ul.social li.googleplus
  background-image:url(http://1.bp.blogspot.com/-iSa8vRGWP_c/U9s0nA5rBII/AAAAAAAACJU/G1LVga_4I8M/s1600/googleplus-icon.png); }  
ul li.pinterest
  background-image: url(http://3.bp.blogspot.com/-YXpbz1C9jKI/U9s0pdokV0I/AAAAAAAACJc/J0CQ_RguXFU/s1600/pinterest-icon.png); }  
ul.social li.stumbleupon
  background-image:url(http://3.bp.blogspot.com/-cOfbpePr-w8/U9s0rynSRgI/AAAAAAAACJk/wQWz_LvKc5o/s1600/stumbleupon-icon.png); }  
ul.social li.delicious { 
  background-image:url(http://1.bp.blogspot.com/-JcjDrqlWGP8/U9s3WkmCqDI/AAAAAAAACKY/75IeCmvrz18/s1600/delicious-icon.png); }  
ul.social li.linkedin
  background-image:url(http://1.bp.blogspot.com/-NMnApprfB7w/U9s0oh4m54I/AAAAAAAACJY/Nou9mVVwQF4/s1600/linkedin-icon.png); }  
ul.social li.reddit
  background-image:url(http://2.bp.blogspot.com/-63_1Tht330s/U9s0zJiJM_I/AAAAAAAACJ4/SEcT1kPwLo8/s1600/reddit-icon.png); }  
ul.social li.technorati
  background-image:url(http://3.bp.blogspot.com/-kzog0u1TLD8/U9s0tjSAeqI/AAAAAAAACJs/xFqlPmz22XU/s1600/technorati-icon.png); }  
ul.social li.techdio
  background-image:url(http://3.bp.blogspot.com/-fpRvzQM4p5E/U9s1DSJuKpI/AAAAAAAACKE/DS6PvM22OZ0/s1600/techdio-icon.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: &#39;Englebert&#39;, 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;  }  &#8203; 
</style> 

Step 5: Save your template.
«
Next
Newer Post
»
Previous
Older Post

No comments

Leave a Reply

Cat-5

Cat-6