Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

How To Add Social Media Icons To Blogger

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='https://www.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/#!/Experttricks'><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://expertbloggertricks.blogspot.in/'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://expertbloggertricks.blogspot.in" 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://expertbloggertricks.blogspot.in/2014/07/how-to-get-free-automatic-backlinks-to.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://expertbloggertricks.blogspot.in/" target="_blank">Haakblog</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

No comments:

Don't Forget To Join Our Community
blogger tipstricksblogger templatesWidget
Tricks and Tips