How To Add Social Media Icons To Blogger

Posted by Albin Thomas

How To Add Social Media Icons To Blogger
In this tutorial we give you help about how to Add Social Media Icons to Blogger in Header at the top right corner of the page for attract user to follow your blog on the various social networks sites. There are many ways to add social media icons to blogger but we provide you easiest way to add it on your blog. This icon included various social networking sites like Facebook, Twitter, Google+, blog feed etc. and you can also customize as you wish.

How To Add Social Media Icons

Please follow below steps for add social medial icons to blogger:

Step 1

Log in into your blogger Dashboard, Go to Template and click on the Edit HTML as shown in below picture.
How To Add Social Media Icons To Blogger

Step 2

Search below code with help of CTRL + F

Step 3

Add below code just above it:
/* 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 0list-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 4

Now search below line
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 5

Copy and paste below code:
<div class='social-media-icons' id='social-icons'><ul>
<div class='social-media-icons' id='social-icons'><ul>
<li class='media_icon'><a href='http://facebook.com/experttricks'><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='http://twitter.com/#!/expertalby'><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://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://www.expertalby.com/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>
<a href="http://www.expertalby.com" rel="dofollow" target="_blank" title="blogger tutorial"><img src="https://bitly.com/haakblog" alt="blogger tutorial" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.expertalby.com/2014/07/how-to-add-social-media-icons-to-blogger.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.expertalby.com" target="_blank">Expertalby</a>blogger
Tips: Change Facebook page URL to your Facebook page URL, Change Twitter username with your twitter account, change google plus id with your google plus id and also change feed url.

Step 6

Click on Save Template button.
If you have any question or update than you can contact with us any time at our E-mail support


Feel free to drop your feedbacks;
Its our pleasure to hear it from you...

Recommended for you>>>

Don't Forget To Join Our Community