Adding Social Media Icons to Blogger Header
Step 1. From your Blogger dashboard, go toTemplate and click on the Edit HTML button:
Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin>(screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it:
]]></b:skin> ကိုေတြ႔ရင္ သူ႔ရဲ႕အေပၚကေန ေအာက္ကကုဒ္ကို ထည့္ေပးပါ
/* 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. အေပၚက ကုဒ္ေလး႐ွာပါ ေတြ႔ရင္သူ႔ရဲ႕အေပၚက ေအာက္ကကုဒ္ကို ထည့္ေပးပါ
<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/AVvXsEiodAPKifJ-BFcOfNexLBUNvxH2KKCU3WdUAPCNxaV6e0r__D3J-Bp0TBNCnkT57rby-i_exy9Bq0u6VjTMcUfBBnvSt-1e4H7bBa6pVAT3l6dWI6gWG7p13ni-t-d5WTZnHQiunYxAQiY/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/AVvXsEjlkBwbPTLHCATn7lKTEb320RjcJg5ztmJG9tOt85aSY2efVzJ8DufNjKe9fdV0cHEZx6tq1ZbAM2Od4Nw0W1YCUcCV8kSd8SmhiufdYoK8fYHVq0jSGfAseCVNGBow7sDtjeKb-U1-sHs/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/AVvXsEgAsEPuilQZK3G1EO7XaLYhu8sFYtmKq9-DrXjwPlq1Q3KxN43k5wUEK-ubfvQ-4AfPUYEWOIS1IBYP_zzYvn7mxXtU4PUNIzZ9CepJKclSE0nS_DhW94nRW3PAKDHETxcEYs2NrT_8PUw/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/AVvXsEgexGRcUtSxLCN0b2vWwU5Nqw2TbRZRA_Lz-ETk-_hfR3eT5HhpJQ7hJyraccD9xch3RaIQgG1Y9H9ZUubatzOFsLmytdjbIXB-eKLMOmGJj6X-gmdYGjAX6zyTRHam4CreTh78v-V-rwI/s1600/RSS.png'/></a></li>
</ul></div>
Customization
အနီျပထားတဲ့ ေနရာေတြမွာ အစားထိုးသြားပါ
သို႔မဟုတ္ 
