- Go to Blogger Dashboard
- Now click on Layout tab
- There, you will see option to Add a Gadget, click on it
- Now a pop-up will appear
- Select the HTML/JavaScript gadget from the list
- And paste this HTML code in it.
Remember to replace the link of Facebook,Youtube,Google+,Twitter and feed with your own profile links, save it and see your blog, the gadget is looking so simple, Isn't it ? So we will style it will the CSS.
You may paste the CSS code in template, follow these easy steps.
- Go to Blogger Dashboard
- Click on Template tab
- Click on Edit HTML button, and proceed
- Using Google Chrome default search feature (Ctrl+F) find
- And paste this CSS code above the
.socialmedia-gadget
{
padding: 2em 0 1.5em 50px;
}
.socialmedia-gadget span a
{
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rWyQnX2CU292mptmdW-7WLQEnin8ikv3B01mmRDaJWYcGYBxvwmyGshOTOmEWTzgG5iTnT42VQmdAftc8fgCSViKJa4KjDF9HVnUt33MmhEBPUZEafEdN2KBZEN1KlXyDjV-rupXmPUI/s1600/socialbuttons.png") 0 0 no-repeat;
}
.socialmedia-gadget span {
float: left;
display: inline;
margin-right: 8px;
}
#iconTwitter
{
background-position: -33px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out;
-o-transition:background-position .4s ease-in-out;
-moz-transition:background-position .4s ease-in-out;
-ms-transition:background-position .4s ease-in-out;
}
#iconTwitter:hover {
background-position: -33px 0;
}
#iconFacebook {
background-position: -66px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out;
-o-transition:background-position .4s ease-in-out;
-moz-transition:background-position .4s ease-in-out;
-ms-transition:background-position .4s ease-in-out;
}
#iconFacebook:hover {
background-position: -66px 0;
}
#iconRSS {
background-position: 0 -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out;
-o-transition:background-position .4s ease-in-out;
-moz-transition:background-position .4s ease-in-out;
-ms-transition:background-position .4s ease-in-out;
}
#iconRSS:hover {
background-position: 0 0px;
}
#iconYouTube {
background-position: -99px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out;
-o-transition:background-position .4s ease-in-out;
-moz-transition:background-position .4s ease-in-out;
-ms-transition:background-position .4s ease-in-out;
}
#iconYouTube:hover{
background-position:-99px 0
}
#iconGooglePlus {
background-position: -132px -33px;
transition:background-position .4s ease-in-out;
-webkit-transition:background-position .4s ease-in-out;
-o-transition:background-position .4s ease-in-out;
-moz-transition:background-position .4s ease-in-out;
-ms-transition:background-position .4s ease-in-out;
}
#iconGooglePlus:hover {
background-position: -132px 0;
}
href=’data:post.addCommentUrl’
expr:onclick=’data:post.addCommentOnclick’>