I came up with this tutorial to help nairotech readers add various stylish social icons above their blogger headers just like ours, pictured below. This stylish widget will enable you add social media icons to your blog's header, icons like: Google+, Facebook. Twitter, Pinterest Icons to further beautiful the outlook of your blog and also help you gain more social media subscribers to your blog. Why i find this widget interesting is because it rotates immediately a mouse is been hovered on it. Guys, you need to check it out yourself enough of the long talking.
SEE THE SCREENSHOT:
SEE THE SCREENSHOT:
Adding Social Media Icons to Blogger Header
Step One. Goto your Blogger dashboard, Select Template & just click on the Edit HTML button:N/B: Backup Your Template
Step Two: Using CTRL + F, find ]]></b:skin> tag (screenshot two) & add the below code just above ]]></b:skin> tag:
/* Social icons for Blogger
----------------------------------------------- */
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
----------------------------------------------- */
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Screenshot Two:
Step Three: Now, search for the below line.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Step 4. And add this code just above it:
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9syCv66EDPtAOyYjyKXawdffpdl9V_bkmArASUKwmugwp-LQimZDj7JBtRjYjaIaciC6u-BXbcb3-MVpYw6FgrdNPHcrhvIGkuJLSXuwm8oUNdQikj79Pt_Dk8R16-UzQeABRPQ2S5dE/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTsmUdEAyGAhruUi2YiZDsf3j6SmQtb00J2_LrDPFZPas12m2zlCMN3calLKwEevbotu8fl6gfziqNgoubJxsWKdHLx8WwixRSSvZtO5CglBMLoz_PGagQx9-pHMqPXhsCMyLiOQX6Xo/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEh3x8yWrr-wwuDGzgfYkW5ACXbllw52GUtJl4MI5MMIXlqXH1pZt7CHZAtFSNNGaCigp9JFMQzQ9KLAw65Vaez2d9ijUlD3ulazoJNDT30pl2unpeP3ureF372-ZTfcRhiEPzFDrqE0/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://yourblogname.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW7D_9-G7C_cxxWmOCYZk0tfl2we4fbtZacz1HtZ5j6rpItzKRPom46eB7pzfTem61nFyouMYmwVi4SNOzwViZCQGvdJfRfHh_X27xqKoNuFG0XsNpsyhLIt3cTMZao_iAQfmh5R0pVcU/s1600/RSS.png'/></a></li>
</ul></div>
<ul>
<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9syCv66EDPtAOyYjyKXawdffpdl9V_bkmArASUKwmugwp-LQimZDj7JBtRjYjaIaciC6u-BXbcb3-MVpYw6FgrdNPHcrhvIGkuJLSXuwm8oUNdQikj79Pt_Dk8R16-UzQeABRPQ2S5dE/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTsmUdEAyGAhruUi2YiZDsf3j6SmQtb00J2_LrDPFZPas12m2zlCMN3calLKwEevbotu8fl6gfziqNgoubJxsWKdHLx8WwixRSSvZtO5CglBMLoz_PGagQx9-pHMqPXhsCMyLiOQX6Xo/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEh3x8yWrr-wwuDGzgfYkW5ACXbllw52GUtJl4MI5MMIXlqXH1pZt7CHZAtFSNNGaCigp9JFMQzQ9KLAw65Vaez2d9ijUlD3ulazoJNDT30pl2unpeP3ureF372-ZTfcRhiEPzFDrqE0/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://yourblogname.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW7D_9-G7C_cxxWmOCYZk0tfl2we4fbtZacz1HtZ5j6rpItzKRPom46eB7pzfTem61nFyouMYmwVi4SNOzwViZCQGvdJfRfHh_X27xqKoNuFG0XsNpsyhLIt3cTMZao_iAQfmh5R0pVcU/s1600/RSS.png'/></a></li>
</ul></div>
Customization
- Change the red color with your usernames and id: the first is your Facebook username, the 2nd your Twitter, the 3rd you should change the XXXXX by your Google+ profile ID & while the fourth is the name of your blog.
- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:
<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>
Step 5. You can now Save your Template to apply changes watch your blog shine bright.
NOTE: This stylish effect will not function on Older browsers because is done with CSS3
ALSO READ: How To Add Page Peel Effect To Blogger
I have done my part by taking out time to post this lovely tutorial, so is now your turn to ask questions, make contributions and share this update to your friends using the below share icons. I'm so eager to hear from you and i promise to reply just immediately you contribute or drop your comment.
