Find dating profiles, social networks profiles, social media accounts and hidden accounts for free
dcsdvc
Akhil·
Dating Sites Lookup
·

Facebook, twitter, Google plus social icons Blogger Gadget

 Icons are representations of websites. Bloggers use fav icons to represent their blog. So in the days of social networking everybody need to have social icons with links to Facebook, twitter and Google plus in their site. Social icons increases the chances of getting followers and making a great fan base. These icons act as links to your social networks and enhance your social presence. 

image of facebook, twitter, Google plus social icons
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

shipmethis hover icons
hover special

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

 02

Kindly Share AheadShip Me This