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 |
LIVE DEMO
Must Read - Google Plus Pop Up Box Widget For Blogger
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.
Read This - Related Posts Widget For 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 == "item"'>
<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='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' 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 :-
- Comment Widgets For Blogger
- Tabbed Social Media Sharing Widget
- Tabbed Content Box Widget
- Navigation Menu Bar Widget
- Image Accordion Widget
