Attractive Social Sharing Widget For Blogger
In this post im gonna explain how to add slide hover social sharing buttons for your blog. This is just widget. you can add it to your blog easily. I just using Css3 with HTML. Check below demo link. You can get social media post with similar widgets.
Demo
1. Log in to blogger Design > Page Element.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code.
After paste above code
*Replace bloggertrix with your facebook username
*Replace bloggertrix with your twitter Username
*Replace UserId with Googleplus
*Replace bloggertrix with feedburner username
4. Now save your HTML/Javascript'.
You are done...
Demo
1. Log in to blogger Design > Page Element.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code.
<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0gbnswSflrLarg97g4iNL9nQBS0l-YeOr7ylUGKvYlw4NDoUYaIRYvijzPRmG39t-Jby1_Xa9AovPG6PMOvsgoXoOVUgjq1uezSUw42tpNDLewlecDYE_rPrURh3soiGEMs-sgBTCcoM/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/bloggertrix">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/bloggertrix">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/UserId">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon rss" href="http://www.feedburner.com/bloggertrix">Subscribe via RSS</a>Subscribe via RSS </li>
</ul>
After paste above code
*Replace bloggertrix with your facebook username
*Replace bloggertrix with your twitter Username
*Replace UserId with Googleplus
*Replace bloggertrix with feedburner username
4. Now save your HTML/Javascript'.
You are done...
0 Response to "Attractive Social Sharing Widget For Blogger"
Posting Komentar