Horizontal Focus Social Sharing Widget For Blogger

Horizontal social sharing widget for Blogger Blog, When you hover an icon it makes transparent to other icons and does focus on current icon, Very beautiful and Awesome widget to add in the website.



Related Post - Popular Post Widget For Blogger

Horizontal Focus Social Sharing Widget For Blogger
Horizontal Focus Social Sharing Widget For Blogger

LIVE DEMO


It is a social media website that makes any website popular, So if you want to take benefit of social media sharing websites then you must add a social media sharing widget to your blogger blog so other people can also share it and your blog gets more popular. Here is the social media sharing widget for blogger that you can add to your blog with few qualities like, Whenever you move your cursor on any icon it highlights to only that icon and makes other icon transparent and less visible and when you move your cursor to another icon it again highlights on the current icon and makes transparent to others. It is made with CSS and loads faster. It has a tool tip effect also. It gives you the option to share your content on 7 most popular social media sharing website like Facebook, Twitter, Google Plus, Pinterest, Stumbleupon, Digg and Linkedin. Below is the step by step method to add it to blogger.

How to add social media sharing widget to blogger



Go to blogger dashboard.
Click on Template.
Hit ctrl+f.
Now search for this code ]]></b:skin>
Now paste the below code above this code ]]></b:skin>


*Social media Sharing Widget by www.avdhootblogger.com */
ul.absocial {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.absocial li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.absocial li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.absocial 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.absocial li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_v36AXvMPembK08w1PyVGeKI2Y-YSjjgB4BfFVzc00g7he5wKQkMY3vZwaocK9CZpIDcznZbyE4_5y2ayWv9C-NbKWjVqw1_ldkUDsrHGGaDcjAyksPQLaICN3XchCbsXtHcAEhLBGXpw/s1600/BS+facebook.png);
}
ul.absocial li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirRScoYpveF1vSohhr3R25b7OTdjtF3BACMoqrLoYTijhZCR5cB8NS-dyeGNRGxB2JaPyP1F2tzo2b6JB7qONOMnpo3YU0LBgUSLNSS375kJG25o03d_BIMt8OrwPzYpIZS8KzCa7SQljP/s1600/BS+twitter.png);
}
ul.absocial li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3QWS2yvqDyKteTSyMqIh3AH_slkrSU3Bvm6rBy-c4ZijIbm0ZfLNfhX_ikvz5oWT9A7Z5YW1C2bnK4kg7HXMzImX5I4tFvTcFyWOXdGPejmf5liHzKKiTxIc6p_8Efq2ci4g8xqg3HO6/s1600/BS+google-plus.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKGdOXNdcXOcgS4iK3SFNZald4deu4ic1sMD0erYV6XmNtHycJKHjGrVnM53y9RCvM6OETRn4i9PsRep8tMS9cuhyf6eIU8V-ISQBUIesIHnU1kQ-LJNwgMA5zdyGSKckIyqmG8AaCPw9q/s1600/BS+pinintrest.png);
}
ul.absocial li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-zpVhK-LkB_ECfyn6mU9QDl-X6G3eQWYPuHUgYIJoSgokf-e2Ar0wNtEdUYDd5LLDc2LmSbrwM59HxujF9Za3ka7uXDsvsLQr9EA8Z8W-nI-esPj1KVIXFCmHvjK3QITwTQyCFITYaM3z/s1600/BS+stumbleupon.png);
}
ul.absocial li.abdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYvMRuKLDe2SGPQeHNHAiFafzFHK5D2T0n8jZmPiKJkmitqWyTb4UPq8yuxKX_o1zcghSyJ-ReK2u8k63h6t4hchwYBJTZlM946DwnDPFQrLZj1xpUf5xvgLD9webFFboSH5UrGXyPwaCS/s1600/BS+digg.png);
}
ul.absocial li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8805og41L5cuP1MwIi22O5_NQ9DlNIVkbA1HrYdgOC0dq9fhMSzOgkV6PNR190lZffCsYUiKybO6aDguvw05G7Xav4xylT4tc7Xz6yx4kiZRWgRs-bsvOXRY1lHv4Z7kDiW8bh5JPkIiu/s1600/BS+linkedin.png);
}
#abanimation:hover li {
opacity:0.2;
}
#abanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#abanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#abanimation li:hover {
opacity:1;
}
#abanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Media Sharing Widget by www.avdhootblogger.com */


Next step is hit ctrl+g again and now search for this piece of code <data:post.body/>
Now paste the below code after this code <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>If you Like Post Share it with Your Friends.</b></div>
<ul class='absocial' id='abanimation'>
<li class='abfacebook'>
<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='abtwitter'>
<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='abgoogleplus'>
<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='abpinterest'>
<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='abstumbleupon'>
<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='abdig'>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<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>
</ul>
</b:if>


Now save the template and you are done. If you like this horizontal focus social media sharing widget for blogger then please share it and comment if you have any problem in adding it.

Related Post :-




Next Post Previous Post