Social Media Icons With CSS For Blogger

5/30/2013 , 0 Comments

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks.  so lets go to the tutorial.


Install It Into Blogger


1. From your Blogger dashboard, go to Template and click on the Edit HTML button:
2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin>, then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag and add this code just above it:

  /* Social icons for Blogger
----------------------------------------------- */
#social-icons {
margin-bottom:10px;
height:50px;
width:100%;
display:block;
clear:both;
}
.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;
}




3. Now search for this line

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

4. And just above it, add 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/AVvXsEjEmQkYOM5QpAEecAJMRHQzCZdYZU0wXojPLg2q9sSwV8-Bx35u1gBI-aE3Ao8AYxbMkJp9wXt92XBulE8Fpf-KjrCCCFFNjRr4OO-516Xqa5K3K6FS_LjCADM5lk5J_xmwd_NZh5wBe7M/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/AVvXsEi-17VI4bMe79WoZblKP5V-vor08BliIhD60GZKwTRQL_LUcga1qjexUA0aJ3B7kIEspc0iEX_8-QaXDoKODnrrOUMHZoTSvla3fiRFUjK_8RSCPKn2buZ_fVWHYaXC4hKX-jKeoH_xrVg/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/AVvXsEgWI-nuoNgSYlHlt2p9jTsxtS0TZIgGmM6_ULQGYWrOOb2YKpSlYAtBCHvz1UES0QqTOjmduMcja6d5W2LHahTGmqy5E-2ko69BLk4RGoqesZQuDMZmLNi9Hb_SkbAA7rXfF1WhGfkTBKw/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/AVvXsEi718yWD1x4YA7xUbKOwNoPzE59c4x6bpnc0i6Jc7NBF_555n5wn33Lt7ZOTCuf-r1PzlckyHJwEqa3LLn31VyE_6JWcH8gWIDVPSHbrOB70oun89-Sbx3jgafm8FN4Pg2WFwYcn1N0U9w/s1600/RSS.png'/></a></li>
</ul></div>
And Done

Mack See

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 comments:

Subscribe to: Post Comments (Atom)