Friday , 24 May 2019

TUTORIAL: How to add a CSS3 Social Sharing Widget to Blogger

social shareSocial widgets are one of the key elements that make a blog, well.. a blog. If you just started your blog then they can help you get good traffic from the various social networks. Today we will show you how to add an awesome CSS3 social sharing widget on your Blogger based blog. It’s very attractive and contains many social buttons like Facebook, Twitter, Google+ etc. So let’s add it to your Blogger blog and we hope you will love it.

CSS3 Social Sharing Widget for Blogger

1. Go to Blogger > Template > Edit HTML > Proceed.
2. Check the box saying Expand Widget Templates.
3. Press Ctrl+f a box will appear just search for:

]]></b:skin>

4. After you find it just above it paste the following code:

/* Social Sharing Widget by TopBloggingIdeas.com */
ul.TBI-social {
list-style:none;
display:inline-block;
margin:15px auto;
}ul.TBI-social li {
display:inline;
float:left;
background-repeat:no-repeat;
}ul.TBI-social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}ul.TBI-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.TBI-social li.TBI-facebook {
background-image:url(https://lh6.googleusercontent.com/-qXQfMpK5yyM/UBgnVp-zyWI/AAAAAAAAFb0/GRnVp4eqO1g/s50/facebook.png);
}ul.TBI-social li.TBI-twitter {
background-image:url(https://lh3.googleusercontent.com/-XoczCzeugFg/UBgnW9gfOMI/AAAAAAAAFcg/N9qWk37w_SA/s50/twitter.png);
}ul.TBI-social li.TBI-googleplus {
background-image:url(https://lh3.googleusercontent.com/-XZA2IVaxutU/UBgnV81TTMI/AAAAAAAAFb8/5-SxVYGD3WU/s50/google%252B.png);
}ul li.TBI-pinterest {
background-image: url(https://lh6.googleusercontent.com/-Hfy8WKpzfKc/UBgnWW00Z8I/AAAAAAAAFcM/5ppIBhBfhUo/s50/pinterest.png);
}ul.TBI-social li.TBI-stumbleupon {
background-image:url(https://lh5.googleusercontent.com/-D89Zc49MpsM/UBgnWuUueaI/AAAAAAAAFcY/EhOMIXDHPTY/s50/stumbleupon.png);
}ul.TBI-social li.TBI-delicious {
background-image:url(https://lh5.googleusercontent.com/-8YgPtME6n9U/UBgnVlFappI/AAAAAAAAFb4/TJRielU0dVU/s50/delicious.png);
}

ul.TBI-social li.TBI-linkedin {
background-image:url(https://lh6.googleusercontent.com/-4yZnL9kjU9w/UBgnWDrtReI/AAAAAAAAFcE/WbW8M0G1QTE/s50/linkedin.png);
}

ul.TBI-social li.TBI-reddit {
background-image:url(https://lh5.googleusercontent.com/-BVN-XnkL53g/UBgnWdIXDBI/AAAAAAAAFcQ/v4GRUCSsPLA/s50/reddit.png);
}

ul.TBI-social li.TBI-technorati {
background-image:url(http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/TBI-technorati.png);
}

#TBI-cssanimation:hover li {
opacity:0.2;
}

#TBI-cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}

#TBI-cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}

#TBI-cssanimation li:hover {
opacity:1;
}

#TBI-cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Sharing Widget by TopBloggingIdeas.com */

5. Now again search for:

<data:post.body/>

6. Paste the following code just below that line of code wrote above:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div style=’font-size: 22px;’><b>Like the Post? Do share with your Friends.</b></div>
<ul class=’TBI-social’ id=’TBI-cssanimation’>
<li class=’TBI-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=’TBI-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=’TBI-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=’TBI-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=’TBI-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=’TBI-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=’TBI-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=’TBI-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=’TBI-technorati’>
<a expr:href=’&quot;http://technorati.com/faves?add=&quot; + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Technorati</strong></a>
</li>
</ul>
</b:if>

7. Now click on Save template and it is done.

Read the original and complete article at Top Blogging Ideas

 

Leave a Reply