Friday, 28 June 2013

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

hovereffect buttons
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.


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:
bug buttons


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.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

No comments:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.