How To Add Together Social Media Icons To Blogger Header
adding a novel widget department to the weblog header but now, we'll produce it using an unordered listing that uses icons of Facebook, Twitter, Google+ as well as weblog feed, as well as every bit a bonus, the icons volition rotate when y'all hover over them.
You tin meet a demo inwards this test blog.
Step 2. To expand the style, click on the pocket-size arrow on the left of <b:skin>...</b:skin> (screenshot 1), as well as thence click anywhere within the code expanse to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) as well as add together this code merely higher upwards it:
Screenshot 1:
Step 3. Now search for this line
Step 4. And merely higher upwards it, add together this code:
Customization
- Change what's inwards cherry amongst your usernames as well as id: the start is your Facebook username, the instant is that of Twitter, inwards the 3rd y'all should alter the X past times the ID of your Google+ profile as well as inwards the quaternary y'all volition pose the refer of your blog.
- To alter the icons, merely supervene upon the urls inwards blueish amongst the ones of your images.
- You tin add together to a greater extent than icons if y'all want, y'all merely accept to add together earlier </ul></div> a draw of piece of employment similar this for each extra icon y'all want:
Step 5. Finally, Save the Template to apply the changes.
The lawsuit is done amongst CSS3, thence this lawsuit volition non live on inwards older browsers.
You tin meet a demo inwards this test blog.
Adding Social Media Icons to Blogger Header
Step 1. From your Blogger dashboard, become to Template as well as click on the Edit HTML button:Step 2. To expand the style, click on the pocket-size arrow on the left of <b:skin>...</b:skin> (screenshot 1), as well as thence click anywhere within the code expanse to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) as well as add together this code merely higher upwards 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 merely higher upwards 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/AVvXsEilviwe_LbOrYCmYFeU_oADhlGCtDsaFkSlo83_gJNNkWEmZKxQ5GxWj_N1xqRv2hHwgZVam9HXwXcKPjY9RMJMDTza77WtQzrI9LFJB0gPDz7M0xm936rba2Sldr-ps-QpLxYKc0ME9WA/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/AVvXsEhiutaqvKC5ZH5LbuphF3EoduIPNwcW4zHmwVQ7iNYG8DdlhWLRkKANis5y1Z67_wpS80PPEEzWWwaOEwqLJmD7FUU-aoxaJiIAd2g_h8ydhCasi8Uzw31Cp4R3dXJsFZXFoRq0S1RJOA8/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/AVvXsEiXBtXdA-zBWqPhMOCRLDWxGCZ0-bmiL_o-cNn9KYhVwWpjTV5C1tMIgzkhBgTrDCyHvf5fDrF81gA0YgwSfWEriybD3SAJmtbE4xQNmn9PPJ8XF3qtib-z0nFGwyxUhusZOsmC4edC0Rk/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/AVvXsEgqitDqJYedsw6UvMij5CnSlBlMbAM98ofMvOeAu4Ridzi1fho2IJCvtnN5BhIu52zstmLMVTc0f9Z2bX2wdQ_gUm3XfOGV-Py5Xh0b3ROxZzwrDzNRLq6oO6N7gB4NEJzUX4htTSASTBE/s1600/RSS.png'/></a></li>
</ul></div>
Customization
- Change what's inwards cherry amongst your usernames as well as id: the start is your Facebook username, the instant is that of Twitter, inwards the 3rd y'all should alter the X past times the ID of your Google+ profile as well as inwards the quaternary y'all volition pose the refer of your blog.
- To alter the icons, merely supervene upon the urls inwards blueish amongst the ones of your images.
- You tin add together to a greater extent than icons if y'all want, y'all merely accept to add together earlier </ul></div> a draw of piece of employment similar this for each extra icon y'all 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 lawsuit is done amongst CSS3, thence this lawsuit volition non live on inwards older browsers.
