Home » Widget » How to add social media buttons widget (hover effect) to Blogger

Friday 28 June 2013

How to add social media buttons widget (hover effect) to Blogger

By Muhammad Aseel at June 28, 2013 Labels: Blogger, Blogger Tricks, Buttons, CSS, hover effect, HTML, Social Media, Tutorials, Unique, Widget

Start with the name of Allah who is most merciful, Social media buttons make your blog more attractive and gorgeous. Social media buttons help in increase your social followers and when social followers increases then automatically blogger visitor increase. Most blogs have high visitors and the reason is, they catch visitors from social sites.

Live Demo!!

Add social media buttons with hover effect to Blogger

Go to Blogger.com.
Login to your blog.
Then go to template >> customized >> advanced >> add CSS and paste the following below code to CSS area.

.hovereffect:hover
{
width: 250px;
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease;
}

Then click apply to blog.

Now go to layout >> add a gadget >> HTML/Javascript and paste the following below code in HTML area.

<a href="facebook.com"><img class="hovereffect"src="http://t2.gstatic.com/images?q=tbn:ANd9GcRH873-Q1et_jYIXszW82jAIz5hJPGTDeNYwFCO2zV4KfdagLUx" width="150px" height="150px"
onmouseover="this.src='http://www.fwccworld.org/css/images/facebook.jpg'"
onmouseout="this.src='http://t2.gstatic.com/images?q=tbn:ANd9GcRH873-Q1et_jYIXszW82jAIz5hJPGTDeNYwFCO2zV4KfdagLUx'" /></a>
<a href="plus.google.com"><img class="hovereffect"src="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg" width="150px" height="150px"
onmouseover="this.src='http://www.pearse-trust.ie/Portals/43760/images/Follow%20Pearse%20Trust%20on%20Google%20Plus.jpg'"
onmouseout="this.src='http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg'" /></a> <br/></a>
<a href="pinterest.com" target="_blank"><img class="hovereffect"src="http://www.shoutlet.com/blog/wp-content/uploads/2013/03/pinterest_badge_red.png" width="150px" height="150px"
onmouseover="this.src='http://mommyedwards.com/wp-content/uploads/2013/01/follow-me-on-pinterest-v01.jpg'"
onmouseout="this.src='http://www.shoutlet.com/blog/wp-content/uploads/2013/03/pinterest_badge_red.png'" /></a>
<a href="twitter.com"><img class="hovereffect"src="http://t1.gstatic.com/images?q=tbn:ANd9GcTME0j5vvmTav1_EAhLtE84zVUbm7Q6St6YMI50Q_wXfns2C46H" width="150px" height="150px"
onmouseover="this.src='http://www.twittericon.com/wp-content/uploads/2010/08/glossy-cute-blue1.png'"
onmouseout="this.src='http://t1.gstatic.com/images?q=tbn:ANd9GcTME0j5vvmTav1_EAhLtE84zVUbm7Q6St6YMI50Q_wXfns2C46H'" /></a>

Customization

Change Facebook.com with your Facebook page url.
Change Twitter.com with your twitter url.
Change plus.Google.com with your Plus Google url.
Change Pinterest.com with your Pinterest url.

Click to save and social media buttons with hover effect has been applied to your blog

Is the social media buttons with hover effect bug to your site or blog? Like this:

Don't worry I have also solution for this problem just copy all the images and save these pictures to your PC and then upload it to your blog and then replace all the images link with your uploaded pictures link. Hope social media buttons with hover effect will work properly.