How to add social media buttons to Blogger header: Social media icons are the best technology to get more and more subscribers, followers, etc. In this article, I’ll show you how to add social media icons to your blogger header as a tool. These icons appear in the top right corner of your Blogspot blogs. With this tool, your visitors can easily follow your site on various social media websites.
There are many ways to do this same thing like if you want to add this, you can simply add a new widget section to your blogger blog header or any other technology, but I’m not showing you anywhere how this was done with an unordered list that uses These social media icons like Twitter, Facebook, Google+, Feeds RSS, and are also influenced by the rotation pattern. Read More: How To add Social Media Icons in Blogger 2020
Add Social Media Icons To Your Blogger Header
Step 1: First of all go to your Blogger account, and then go to “Template” and simply click on the “EDIT HTML” section.
Step 2: Now here simply expand your CSS Style sheet or simply click CTRL + F and find the following code ” ]]></b:skin> “ and then copy the below code and paste just above this tag.
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
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;
}Step 3: Now this time, simply click CTRL + F and find out this piece of code.
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
Step 4: Just above it paste the code given below:
<div class='social-media-icons' id='social-icons'> <ul> <li class='media_icon'><a href='https://www.facebook.com/TECHFORUOFFICIAL/'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li> <li class='media_icon'><a href='https://twitter.com/TECHFORU007'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li> <li class='media_icon'><a href='https://www.youtube.com/channel/UCAP6lg-W29wbnABBvOYFxNQ'><img border='0' src='https://1.bp.blogspot.com/-4gUR8caRlsw/X1CI28agHkI/AAAAAAAADnY/xYRM5Ncu-hscVm5OK-CtaZhmVmHbTDU5QCLcBGAsYHQ/s36/youtube100.png'/></a></li> <li class='media_icon'><a href='http://techforu.in/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li> </ul></div>
Also Read: How To Add Email Subscription Widget For Blogger
Recommended Customization :
We always recommend that you customize your tools however you want to convert them according to your needs. You can easily change the usernames of your social networking sites in red above.
If you want to change the social icons with your own, then simply change the icon URL’s with your own, and if you want to add more icons in this widget, then add just this code line </ul></div> and then add more icons.
<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>
Step 5: Now you are finally done with your work, now save your template and watch your blog with cool social media icons and super rotating header sections.
Also Read: Free theme for blogger || Best Premium Blogger theme for Free 2020
For the latest tech news & blogging Tutorials, follow TECH FOR U on Twitter, Facebook, and subscribe to our YouTube channel.
