Social Profile Blogger Gadget With Hover Effect

Add a beautiful Social Profile Blogger Gadget With Hover Effect. Include RSS Feed, Google Plus, Facebook and Twitter Button. Easy Customize and fast loading, adjust with all responsive blogger template.
You may also like Top ten seo friendly Blogger Template

Social Profile Blogger Gadget

Demo

• RSS Feeds
• Facebook
• Twitter
• Google+
  
  

 Social Profile Blogger Gadget

• Go to Blogger Layout.
• Add a Gadget.
• Select HTML/JavaScript.

Copy /paste Bellow Code save.

<style>
#social-hover {
float: right;
position: relative;
height: 40px;
}
#social-hover a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
}
#social-hover a:hover{
width: 115px;
}
#social-hover ul, #top-menu ul { margin: 0; }
#social-hover li,
#social-hover li a,
#social-hover li .ts-icon,
#social-hover li .ts-text {
display: block;
position: relative;
width: 40px;
height: 40px;
}
#social-hover li,
#social-hover li a,
#social-hover li .ts-text {
float: left;
width: auto;
overflow: hidden;
}
#social-hover li a {
width: 40px;
line-height: 40px;
color: #FFF;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
#social-hover li.ts-rss a { background-color: #F88F16; }
#social-hover li.ts-rss .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsG3Xz6aXSCAUZovqvePWilT_nvzi65thKH1sY7L8uXBd0C6NWP5kexR9OyF_yYooXasriB7QxwzmcF0aJlY3Ejlb6SJXCyyN7gTumspCzG7wtluX700FkoQuL6OGTbQQv_lUHt20CbU/s16/rss.png") no-repeat center center; }
#social-hover li .ts-icon { float: left; }
#social-hover li.ts-facebook a { background-color: #3B5998; }
#social-hover li.ts-facebook .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPV61W1Q8QB14nU_PKEgvGg0aY05NxS1NfcEW2ieH-BN5r23vfVj3tUqvkT3bxzJYiwUUikVxvZGPygweChn3jUiicK_bkXTrAksIRLLMb9fSSPMpymNAYPq3wsoEIa3e2kb2wj4msKpU/s16/facebook.png") no-repeat center center; }
#social-hover li.ts-twitter a { background-color: #3CF; }
#social-hover li.ts-twitter .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90Zt0agTOZ8H1hsOIsnanNYbHQZri1x8Gmj4r4JOF0kYKaMqcCXSkenZ07TWdpUobIy8dm6dAlvEUx3aw7v1sQNfD6-Xifymxrv5AwYyb6NGr_o_P5bbz-ajpMY_E865pVmAtkDqxRyI/s16/twitter.png") no-repeat center center; }
#social-hover li.ts-gplus a { background-color: #BD3518; }
#social-hover li.ts-gplus .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXsT_sNt27k3IGtljV8QGfdfNiUKTyyETzc4OoYFdZJTD5C5KxFGQhrd0yrZ7izwxb94uNF7d2Roq5oIg0I-0eYT2FJFAc-xBUYRO6CcAC2RSIcWWrw9VYIXtYwWM4QLDxLQiFA0BeBM/s16/gplus.png") no-repeat center center; }
</style>
<div id="social-hover">             
<ul>   
<li class="ts-rss"><a href="http://feeds.feedburner.com/Techwap" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">RSS Feeds</div></a></li>         
<li class="ts-facebook"><a href="https://www.facebook.com/tech2daynews" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Facebook</div></a></li>
<li class="ts-twitter"><a href="https://twitter.com/Techplus24" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Twitter</div></a></li>
<li class="ts-gplus"><a href="https://plus.google.com/+SaumenTikadar/about" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Google+</div></a></li>                 
</ul>             
</div>

 Replace all red mark your own id.