How To Add Together Social Media Icons To Blogger Header

adding a novel widget department to the weblog header but now, we'll create it using an unordered listing that uses icons of Facebook, Twitter, Google+ in addition to weblog feed, in addition to every bit a bonus, the icons volition rotate when you lot hover over them.

You tin meet a demo inward this test blog.

Adding Social Media Icons to Blogger Header

Step 1. From your Blogger dashboard, become to Template in addition to click on the Edit HTML button:

Step 2. To expand the style, click on the small-scale arrow on the left of <b:skin>...</b:skin> (screenshot 1), in addition to then click anywhere within the code surface area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) in addition to add together this code only to a higher house it:

 /* Social icons for Blogger
----------------------------------------------- */

#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;
}

Screenshot 1:

Screenshot 2:

Step 3. Now search for this line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 4. And only to a higher house it, add together this code:

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmgL9yGMKLqlPfYmY8hn3Bh1_r7dR84T4La_LkISeS3vCPXFbGEvvm7S-YlXM1XDB5zHKgvit607ESoJtG7-Qxp5IQkWfAXqJ_g4N1zJZtGQ3bNBoHEo9gZYLAG2hY-z8NXMR2l8VCjY/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4MrQUiRA-ldigRQli2lQgSR6YNNhjsCYZezdtfKB5BkHt0uipW7WXrzDKkpyoQeDLsbqGOWUBN9CAWz_krUdWn47BKpj05jUXRNV9xVbV0Ow91-d16DQ7KtTVj2dnli_FrzwQ5UyVsRs/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1APyW0viKizx4pzwa4LyFEpUj7DNESrGxTW4i59tAP5IXlmLRdCHA15c-m8TnIuLrhuXkoXYGFNcLeGz7zqlcE2Rwc93t26V71lWV5odEeR8_Quyt86Tty-ZfE3mkHoeSVm0BzfWsZv0/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMy6fEVgNpuc5BBh8Lu1mx471J3RLKDRhWAuGl6Qthxn_oQLzj_h_MSRCrMMAeojhrPmOmED877ZXPsCYt8o1xDrfwMa7jtGJVxx1e3NX9r7eOHa0wZXL4-fULZT3ZqPtVrc_YuV5Oko/s1600/RSS.png'/></a></li>

</ul></div>

Customization

- Change what's inward ruddy amongst your usernames in addition to id: the showtime is your Facebook username, the minute is that of Twitter, inward the 3rd you lot should alter the X yesteryear the ID of your Google+ profile in addition to inward the 4th you lot volition lay the cite of your blog.
- To alter the icons, only supersede the urls inward blueish amongst the ones of your images.
- You tin add together to a greater extent than icons if you lot want, you lot only bring to add together earlier </ul></div> a describe of piece of occupation similar this for each extra icon you lot want:

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5. Finally, Save the Template to apply the changes.
The resultant is done amongst CSS3, hence this resultant volition non operate inward older browsers.

Share this post