![]() |
FB |
What if these icons have mouse hovering animation with CSS? The icons will go to left when the visitor hover their mouse pointer on it. The icons are really cool. So i prefer that you add to your site. Its really easy to add these icons to your template. Go to your blogger dashboard. Go to layout of the blogger. Add a gadget and click edit html. Copy all the below code and paste it to the box after editing the links. Save the template. And there you go.
<style> /* ship me this
———————————————– */#socialme{float:right}
#socialme ul,#socialme li{padding:0;margin:0;list-style:none}
#socialme li{margin-bottom:7px}
#socialme li:last-child{margin-bottom:0}
#socialme a{display:block;width:140px;height:38px;padding-left:50px}
#socialme a:hover{padding-left:55px}
#socialme span{line-height:38px;font-size:150%}
#socialme a.fb{background-image:url(https://3.bp.blogspot.com/-ZKzqkwp3_nU/UKN5AYUdG5I/AAAAAAAAGnw/bSN_Se7BrEU/s38/Facebook.png);background-repeat:no-repeat;background-position:0 0}
#socialme a.tw{background-image:url(https://2.bp.blogspot.com/-XIQ6HL3bH5Q/UKN5EjAa2JI/AAAAAAAAGoA/Q4AZLyp8dVc/s38/Twitter.png);background-repeat:no-repeat;background-position:0 0}
#socialme a.go{background-image:url(https://3.bp.blogspot.com/-BQnHIZLTGHU/UKN5DYXCIyI/AAAAAAAAGn4/bBdHiu2JKcM/s38/Google+.png);background-repeat:no-repeat;background-position:0 0}</style>
<div id=’socialme’>
<ul>
<li><a class=’fb’ title=”fb” href=’http://www.facebook.com/shipmethis’><span>Facebook</span></a></li>
<li><a class=’tw’ title=”twitter” href=’http://www.twitter.com/shipmethis‘><span>Twitter</span></a></li>
<li><a class=’go’ title=”Google Plus” href=’https://plus.google.com/u/0/103153395283089596233‘><span>Google+</span></a></li>
</ul>
<div align=’right’><span style=’font-style: italic; font-size: 8px; color: solid #ffffff;’><a href=’https://www.shipmethis.com’ rel=”dofollow” style=’text-decoration: none;’><font color=’#ffffff’ decoration=’none’>[Get this widget]</font></a></span></div>
</div>
You need to change -shipmethis- to the username of yours and 103153395283089596233 into your Google ID.
If you are not satisfied with that, then try this one
![fb g+ twitter shipmethis hover icons](data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=)
hover special
![fb g+ twitter shipmethis hover icons](https://www.shipmethis.com/wp-content/uploads/2021/07/1_socio.png)
Copy the following code and paste it to HTML gadget box
<style> /* ship me this
———————————————– */
.social-tooltip{width:44.5%;margin:58px auto;padding:0;float:right;position:relative}
.social-tooltip ul{list-style:none;color:#ddd;width:500px;margin:0 auto;padding:0}
.social-tooltip ul li{list-style:none;line-height:28px;display:inline-block}
.social-tooltip li a{color:#bbb;display:block;font-size:28px;position:relative;text-decoration:none;padding:10px 5px}
.social-tooltip li a:hover,.social-tooltip .selected{color:#444;text-decoration:none;}
.spice-popout{height:48px; width:48px; margin:2px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>
<div class=’social-tooltip’>
<ul>
<li><a class=’spice-popout’ href=’https://www.facebook.com/FactsHunt’ rel=’nofollow’ target=’_blank’ title=’Like Us’><img alt=’FB’ height=’48’ src=’http://2.bp.blogspot.com/-IUiV4Xojv-0/Up1DuHGgF5I/AAAAAAAAA8E/LarNtaEBedU/s1600/Facebook-Round.png’ width=’48’/></a></li>
<li><a class=’spice-popout’ href=’https://www.twitter.com/FactsHunt’ rel=’nofollow’ target=’_blank’ title=’Follow Us’><img alt=’TW’ height=’48’ src=’http://4.bp.blogspot.com/-_dEByFLLd58/Up1DuVzud1I/AAAAAAAAA8I/8JAPk5wSBJ0/s1600/Twitter-Round.png’ width=’48’/></a></li>
<li><a class=’spice-popout’ href=’http://feeds.feedburner.com/FactsHunt’ target=’_blank’ title=’RSS Feed’><img alt=’RSS’ height=’48’ src=’http://2.bp.blogspot.com/-RER4UOarRfU/Up1DuegzLkI/AAAAAAAAA8M/3pLnQ2yETC8/s1600/RSS-Round.png’ width=’48’/></a></li><div align=’right’><span style=’font-style: italic; font-size: 8px; color: solid #ffffff;’><a href=’https://www.shipmethis.com’ rel=”dofollow” style=’text-decoration: none;’><font color=’#ffffff’ decoration=’none’>[Get this widget]</font></a></span></div>
</div>
About the author
Author: adding sense Updated: 04/02/2013 1:22 PM
He is the author of many research articles in SEO and cloud computing technology.
Just copy the above HTML and CSS code and paste it in the HTML/java-script gadget in the layout section. Hope you will subscribe us…
SUBSCRIBE US FOR MORE ARTICLES
Akhil S Kumar 02-04-2014