Hi guys.... welcome on my blog. In this tutorial I will tell you how to create a colorful 'follows us' widget with hover effect. You have to just copy the code and paste it in page wherever you want. If you are a blogger user then there will be two possible places where you can add this code.
1. Below post in post page
search <data:post.body/> code in template html editor and paste below code after 3rd <data:post.body/>.
2.In widget area
Add a html/javaScript gadget in layout and paste code over there.
But before start pasting codes paste font awesome cdn link in <head> section
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
paste above code just before </head>
Copy following code
html
.follow-us-container
{
margin-top: 50px;
margin-bottom: 50px;
}
.follow-us
{
font-size: 32px;
color: #777;
}
.follow-us:hover
{
color: #3b5998;
}
.social-icon
{
padding-top: 16px;
font-size: 60px;
text-align: center;
width: 92px;
height: 92px;
border: 3px solid #777;
border-radius: 50%;
color: #777;
margin: 5px;
}
a.social-icon:hover, a.social-icon:active, a.social-icon:focus
{
text-decoration: none;
font-size: 60px;
border-color: #434343;
border-radius: 30%;
background-color:#ffffff;
}
