March 5, 2021

How to add Social Media Icons to Blogger Simple Steps

“How to add Social Media Icons to Blogger” is not difficult for blogger user. Social media icon is doing major roles in your blogger blog. User who visit your blogger blog they can share your blog through your social media icon and you can also give your own profile link or your business link in to your blog to grow followers on blogger. Blogger have that option to add social icon in your blogger post, sidebar, hader or what ever you want.

There are many to to add social icon in to your blogger. Here we share simple way to add social icon to blogger. So Here is the steps by steps process to add social media icon to your blogger bog.

How to add social media share buttons to blogger posts

You don’t have to need add social media share buttons for blogger posts yourself. Because you are searching this you just a beginner blogger. Don’t edit your blogger html code, it will be cruse.

So we recommend you to download a blogger template that already have. We have also listed some of blogger template that full fill all your needs.

Add Social media follow buttons for blogger

Adding social media follow button for blogger is something simple. Here we add blogger social media buttons widget.

Related: How to Delete a Blog on Blogger Permanently Easy Steps

Step 1: Go to your blogger desk-board and click “Layout” option.

Step 2: Click the “add a gadget” form the layout window. A popup will open and select “HTML/JavaScript” clicking the “+” icon.

Step 3: Copy below code and past in to the widget that you selected.

<style type=”text/css”>
.social-profile-icons{margin-top:20px 0 0;overflow:hidden}.social-profile-icons ul{display:inline-block;margin:0 auto!important;text-align:center}.social-profile-icons ul li{background:transparent!important;border:none!important;float:left;list-style-type:none!important;margin:0 4px 10px!important;padding:0!important}.social-profile-icons ul li a,.social-profile-icons ul li a:hover{background:url(“”) no-repeat scroll 0 0;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;display:block;height:38px;overflow:hidden;text-indent:-999px;transition:all 0.25s linear 0s;width:38px}.social-profile-icons ul a{background-color:#3b5998;background-position:-60px 3px}.social-profile-icons ul a{background-color:#00aced;background-position:-253px 3px}.social-profile-icons ul a{background-color:#dd4b39;background-position:-93px 3px}.social-profile-icons ul a{background-color:#007bb6;background-position:-125px 3px}.social-profile-icons ul a{background-color:#cb2027;background-position:-157px 3px}.social-profile-icons ul a{background-color:#F87E12;background-position:-189px 3px}.social-profile-icons ul li a:hover{opacity:.8}
<div class=”social-profile-icons”>
<li class=”social-facebook”><a rel=”nofollow” target=’_blank’ href=”facebook-link” title=”Facebook”>Facebook</a></li>
<li class=”social-twitter”><a rel=”nofollow” target=’_blank’ href=”twitter-link” title=”Twitter”>Twitter</a></li>
<li class=”social-gplus”><a rel=”nofollow” target=’_blank’ href=”google-plus-link” title=”Google+”>Google+</a></li>
<li class=”social-linkedin”><a rel=”nofollow” target=’_blank’ href=”linkedin-link” title=”LinkedIn”>Linkedin</a></li>
<li class=”social-pinterest”><a rel=”nofollow” target=’_blank’ href=”pinterest-link” title=”Pinterest”>Pinterest</a></li>
<li class=”social-rss”><a rel=”nofollow” target=’_blank’ href=”feedburner-link” title=”RSS”>RSS</a></li>

Step 4: Replace [example: “facebook-link”] with your social profile or page link and save.

Step 5: Now you are done. Its look like this

You can also follow this Video:

People also asked:

How to add social media icons to blogger sidebar?

Go to layout option and add a widget in to your blogger sidebar. Copy the above code and past in the widget. Replace with your won link and done!

How to add social media icons to blogger header?

Step 1: Go to “Theme” sections from the left-hand side menu.

Step 2: Click the customize button and click edit HTML

Step 3: Press Ctrl+F and “]]></b:skin>” copy this code and past it to find the code.

Steps 4: Copy below code and past in to above this “]]></b:skin>” tag

#social-icons {
z-index: 2;
position: relative;}
.social-media-icons {
.social-media-icons ul {
padding:5px 5px 0 0
.social-media-icons ul {
.social-media-icons li.media_icon {
padding-left:0 !important;
background:none !important;
.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 5: Again Press Ctrl+F and type ” <b:section class=’header’> ” or ” <b:section class=’header’ ”

Step 6: Copy below code and past in to above the “<b:section class=’header’> ” line.

<div class=’social-media-icons’ id=’social-icons’>
<ul><li class=’media_icon’><a href=’’><img border=’0′ src=’’/></a></li>
<li class=’media_icon’><a href=’’><img border=’0′ src=’’/></a></li>
<li class=’media_icon’><a href=’’><img border=’0′ src=’’/></a></li>
<li class=’media_icon’><a href=’’><img border=’0′ src=’’/></a></li>

Now you are done! You have successfully add social media icons to blogger.

Information Blog