Horizontal social sharing widget for Blogger Blog,When you hover an icon it makes transparent to other icons and makes focus on current icon,Very beautiful and Awesome widget to add in website.
 |
| Horizontal Focus Social Sharing Widget For Blogger |
LIVE DEMO
It is 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 popularity.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 other icon it again highlights on the current icon and makes transparent to others. It is made in CSS and loads faster.It has tool tip effect also.It gives you 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.indiatip.blogspot.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/AVvXsEiaOYOYWc4ha-JrBR9K4ipVNuS9FkYu3E5KNJYI-ZKTGebeJY3hzY4cFEFKVlGNbQv3JQ8IpG7J2tmcCBfo2TKkhPPgVJxuvi8-FlDAIoDN0I37uFw0OmV8lP6niQdwx-ZuSkMOpCsRzwda/s1600/BS+facebook.png);
}
ul.absocial li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJ5EuHzJenmutg5kZPY-kQaDeRT0XPKwYsuPvGNEphuKWehqNZUedOOdIUUENb5A_MjHBecgzOVp5lTBtg1v_GuBPLFzZz3qLD5zmokEQ67hVXi7edD3IIz7HOca34ruurjqnwpIGM-cf/s1600/BS+twitter.png);
}
ul.absocial li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6k_63xtVTgLpMaOvdeIHBY1oXf84Fr8OD0SFfCSgUMfmiCCKhrGUJECMF5Dzmogn6SlZrCNPC0fgLFEEQ4YH-W7tQHeeOJtv66gMhOCU_WxhU2bepuvfxwLS0QA_AmL4Kg5ZPyqRnXcSR/s1600/BS+google-plus.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlgvpl51ENU969bnvetF1T0ulNKRV2653d32pO8PsGf8fYlRZOHqKIB2pctg_H22j2ZF6d4o2I4NmsN0hnSk8ZCWf_hWZHQmz_odxA2zgyZFflpLXgorPNxo3qPZtemhg1HJhbkCqNN29i/s1600/BS+pinintrest.png);
}
ul.absocial li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEq0OvW2QYE1U-1Ca7wWLuMlk_Xfy8ZGKT7KCHK6rcp9p0Ibw-sjE75Q3hewRzn_DLlgtJHxMjg6u7n9dOZ361zZRlSGZqpHXuKoRKK0AlpC_Hgh9qgVS33vRvCfRsKtKLMbKeHwAzBu0/s1600/BS+stumbleupon.png);
}
ul.absocial li.abdig {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpn_moUhX0GHrYqE7zY4OLoKAENlH9hJMgGpn5oAnSsKWE624t-YS-6bamhD2KphFjNQYuJBweytXQEHonrl6CNOSlSlRs-Ap_Mg0Kfp8dL2nXvQMbrxNHni7XCBkX0xuORnZH82FyDti/s1600/BS+digg.png);
}
ul.absocial li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDA-ggFfo8dj7vSK2iGZ8aGTrNb5HZAOY_MFIpwUj2bFPGb-YZlE5GXgvVz9gfD188wqTfyMGYuprzxqUnKOJ-y0-yCjB3CCE4BwKHGiW6vUL9GeglY5xy949w4jwWL0nhUAhWbR2n97AW/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.indiatip.blogspot.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 probelam in adding it.
No comments:
Post a Comment