Add Social Media Icons With Hover Effect In Blogger ~ The Next Generation Blog

Home » blogger_tricks » Add Social Media Icons With Hover Effect In Blogger

Add Social Media Icons With Hover Effect In Blogger

Add Social Icons With Hover Effect In Blogger

Having Social Media Icons widgets in blogs are very effective to promote and share social media pages of the blog/website. Almost every site/blog uses these widgets to bring traffic to their social media pages. Now, I am going to tell you the code to create a cool and stylish Social Media Widget with Hover Effect. So, let me start the tutorial:
> Login to your blogger account.
> Now, go to Layout.
> Select Add A Gadget option.
> Now, add an HTML/JAVASCRIPT Element from the gadget list.
> Now, copy and paste the following code in the box:

<style>
.social {
background: none repeat scroll 0 0 #FFFFFF;
clear: both;
font-family: georgia;
list-style-type: none;
margin-top: 12px;
overflow: hidden;
padding: 0 0;
}
.social li {
float: left;
margin-right: 10px;
text-align: center;
width: 50px;
}
.social li.last {
margin-right: 0;
}
.social li a {
color: #666666;
font-size: 11px;
line-height: 34px;
opacity: 0.7;
padding-top: 42px;
}
.social li a:hover {
color: #000000;
opacity: 1;
text-decoration: none;
}
.social .social-feed {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7_3vGVagzIR-UiexCLbIIUeemuXVD4yrBV1HZFyWbntAqDUVYBJQq_pza1-9V9uAdsilwYl2V__PBffjZAPVKG6nt4zCYDq5fUyrIcrO835x0Ydgo7wVlYMXI0n7ISp8PELnqGqKK5E/s1600/Social-Icons.png") no-repeat scroll 0 0 transparent;
display: block;
}
.social .social-twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7_3vGVagzIR-UiexCLbIIUeemuXVD4yrBV1HZFyWbntAqDUVYBJQq_pza1-9V9uAdsilwYl2V__PBffjZAPVKG6nt4zCYDq5fUyrIcrO835x0Ydgo7wVlYMXI0n7ISp8PELnqGqKK5E/s1600/Social-Icons.png") no-repeat scroll 0 -79px transparent;
display: block;
}
.social .social-facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7_3vGVagzIR-UiexCLbIIUeemuXVD4yrBV1HZFyWbntAqDUVYBJQq_pza1-9V9uAdsilwYl2V__PBffjZAPVKG6nt4zCYDq5fUyrIcrO835x0Ydgo7wVlYMXI0n7ISp8PELnqGqKK5E/s1600/Social-Icons.png") no-repeat scroll 0 -158px transparent;
display: block;
}
.social .social-youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7_3vGVagzIR-UiexCLbIIUeemuXVD4yrBV1HZFyWbntAqDUVYBJQq_pza1-9V9uAdsilwYl2V__PBffjZAPVKG6nt4zCYDq5fUyrIcrO835x0Ydgo7wVlYMXI0n7ISp8PELnqGqKK5E/s1600/Social-Icons.png") no-repeat scroll 0 -237px transparent;
display: block;
}
.social .social-gplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7_3vGVagzIR-UiexCLbIIUeemuXVD4yrBV1HZFyWbntAqDUVYBJQq_pza1-9V9uAdsilwYl2V__PBffjZAPVKG6nt4zCYDq5fUyrIcrO835x0Ydgo7wVlYMXI0n7ISp8PELnqGqKK5E/s1600/Social-Icons.png") no-repeat scroll 0 -316px transparent;
display: block;
margin-right: 0;
}
</style>
<ul class="social">
<li><a title="RSS Feed" class="social-feed" href="YOUR FEEDBURNER URL">RSS feed</a></li>
<li><a title="Twitter" class="social-twitter" href="YOUR TWITTER URL">Twitter</a></li>
<li><a title="Facebook" class="social-facebook" href="YOUR FACEBOOK URL">Facebook</a></li>
<li><a title="Youtube" class="social-youtube" href="YOUR YOUTUBE URL">YouTube</a></li>
<li class="last"><a title="Google Plus" class="social-gplus" href="YOUR GOOGLE PLUS URL">Google </a></li>
</ul>

> Click SAVE and then click SAVE ARRANGEMENT after arranging your widget at your required place.
Keep visiting for more tricks and tips. Please subscribe to my latest updates using the subscription form below.

CLICK HERE TO SEE DEMO