How To Add Social Media Icons for Blogger


How To Add Social Media Icons for Blogger: In this tutorial we give you help about how to Add Social
Media Icons for 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.

Social Media Icons for Blogger

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 for Blogger

Step 2

Search below code with help of CTRL + F

]]></b:skin>

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/haakblog‘><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/#!/haakblog‘><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.haakblog.com/feeds/posts/default’><img border=’0′ src=’http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png’/></a></li>
</ul></div>
<div id=”htmlcaption1″ style=”display: none;”>
Code by <a href=”http://www.haakblog.com” target=”_blank”>Blogger tricks</a> | 
<a href=”http://haaknews.in/” target=”_blank”>News</a></div>

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.

Leave a Reply

Your email address will not be published. Required fields are marked *