TECH FOR U

Menu
  • Home
  • Blogging
  • Top & Best
  • Latest News
  • Apps
  • Tech Knowledge
  • Review
  • More
    • Terms of Service
    • Privacy Policy
    • About Us

Home » How to add social media buttons to Blogger header

Blogging

How to add social media buttons to Blogger header

Admin September 3, 2020
Join Us on Telegram

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.

How to add social media buttons to Blogger header

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.

Prev Article
Next Article

Related Articles

How to Easily Verify Your Blog on Google Webmaster Tools
How to Easily Verify Your Blog on Google Webmaster Tools …

How to Easily Verify Your Blog on Google Webmaster Tools

8 Best Google AdSense Alternatives For Your Blog in 2019
Best Google AdSense Alternatives For Your Blog in 2019: There …

8 Best Google AdSense Alternatives For Your Blog in 2019

About The Author

Admin

Leave a Reply

Cancel reply

Shared Hosting for just $2.88/mo

Free WordPress Hindi Video Tutorials

Popular Posts

  • How To Create Drop Down Menu in Blogger (Step by step Tutorial) 2020 How To Create Drop Down M... How To Create Drop Down Menu In Blogger (Step b... 537 views
  • How To Add Contact Form on Contact Us Page in Blogger How To Add Contact Form o...  Add Contact Form on Contact Us Page... 425 views
  • How to add automatic Image Slider on Blogger How to Easily Add Image s... How to Easily Add Image slider in Blogger 2020: Add ima... 301 views
  • How to Easily Add Attractive Tables in Blogger How to Easily Add Attract... How to Easily Add Attractive Tables in Blogger 2020... 249 views
  • Rojkamao .Com Shorten Url... Rojkamao .Com Shorten Url Website Review:... 171 views
  • Terms of Service
  • Privacy Policy
  • About Us
  • Contact Us

Categories

  • Apps (5)
  • Blogging (29)
  • Latest News (22)
  • Review (4)
  • Tech Knowledge (6)
  • Top & Best (27)

TECH FOR U

Copyright © 2021 TECH FOR U
Theme by TECHFORU