Expand On Hover Flat Social Media Icons For Blogger

When I started Techsperia, I posted about expand on hover social icons. I'm proud to say that these are better than those! These social media icons are developed by me and contains neat icons of RSS, Facebook, Twitter and Google+. As usual, all this became possible because of the magical power of CSS!

Talk is cheap, show me the code!

<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/AVvXsEh8WEmIFebFnZShh3nwNx2tZblBBlh9dLFnwznmLi5BPlRNVyBoqzSmH3MD_K7njBiDu8_R_DArXvqHlH1GnUDA5sGKmQjJ19ggrBeNiipZwXssXJ1ZgViVzR9RCGySIGYBXFFjB5VljpA/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/AVvXsEiY6iU2ahogLUt2649M7LEqxqQdkMvXYJEz0PQAkKGKczFDX-9uhGWZ1GV_1lkiPLlJWQ7_2T6eLvmSWrV698aDuTSg7Hcz-OKwcxN6_za5dmLBeZ8WIWSF1fklNWQV8ornvMAjuS_WIzQ/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/AVvXsEgXwm3fn7qX48qIOoEW-2sbUya4X4vXM_tgkbGRf0FiB_qx1XwCFJGkF8Ynp0Kev2ic5IC8NiLS0ifyK4XqsRcrB4fiscjkhh18NSUy97WgmD9Uva7ZftLHD5OAuhUbHH4ZVk9FTIPskBk/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/AVvXsEgSS-FeBnGhyphenhyphen20m4w0X_GjMCcjgs15kuwFZb-JSA7sVK21YImZki9G32keLZcubGbQI1Kn-QGxbpZad7vrcSxBb38oMwxgK3FBjcjiMr1vozld9L_0WuHI4l_rGYQspE9tQpzLFDoQI_bw/s16/gplus.png") no-repeat center center; }
</style>
<div id="social-hover">            
<ul>    
<li class="ts-rss"><a href="http://feeds.feedburner.com/xxxxx" 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/xxxx" 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/xxxx" 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/107015367605965056336/about" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Google+</div></a></li>                  
</ul>            
</div>

Make sure that you replace all the links highlighted in blue with your own social media links!

Also, the code may look a bit lengthy to you but don't worry! You simply have to copy and paste! And as I mentioned before, the code is entirely powered by CSS. Hence, these icons won't slow your page down!

Let's assume you are new to Blogger and don't know where to add this code. You can spilt your blog's header in 2 parts and place these icons besides your blog's title/logo (like I have done on Techsperia!). Else, you can always add an HTML/Javascript gadget to your blog and paste the code there!

These icons are nothing but HTML and CSS so they'll literally work on every platform be it Blogger or Wordpress or even your own custom website!

If you want any other help, feel free to leave a comment below!

https://t.co/LuGhnHPZdk?amp=1

https://protipsblog.blogspot.com/