Cara Membuat Social List di atas Footer

Halo Sobat Emalution, Sudah lama saya tidak Post , Tetapi saya kembali lagi dengan Posting yang insya'allah dapat membantu sobat Blogger.

Yap, Mungkin sudah banyak yang tau dengan Tutorial ini dan sudah bertebar luas di Google.com

tetapi saya akan mengulangi atau mempermudah atau yang lainnya lah.

Langsung saja ke cara-caranya.

1.Login Ke Blogger.com

2.Buka template

3.Edit Html

Lalu Sobat Letakkan CSS dibawah tepat di atas ]]></b:skin> atau </style> 

NB:untuk mempermudah pencarian gunakan CTRL+F

/* CSS Social Bar */
#social-bar {width:100%;max-width:990px;margin:0 auto;padding:0;background:transparent;border-top:2px solid #222;}
.social-facebook,.social-twitter,.social-googleplus,.social-blogger{float:left;margin:0;padding:8px 0;display:inline;width:10%;text-align:center;color:#eee!important;opacity:0.9;transition:all 0.3s ease-out;}
.social-facebook{background-color:#151515;width:25%}
.social-twitter{background-color:#151515;width:25%}
.social-blogger{background-color:#151515;width:25%}
.social-googleplus{background-color:#151515;width:25%}
.social-facebook:hover{background-color:#015f8f;opacity:1;}
.social-twitter:hover{background-color:#1a87ba;opacity:1;}
.social-googleplus:hover{background-color:#9f433a;opacity:1;}
.social-blogger:hover{background-color:#b77410;opacity:1;}
.blogger-24,.facebook-24,.twitter-24,.googleplus-24{background:url(http://1.bp.blogspot.com/-wNUSXsRj4d4/U0ljiOOrQdI/AAAAAAAACX0/R73l-2i2vsA/s1600/csstuts.png) no-repeat;width:20px;height:20px;display:inline-block;vertical-align:text-top;margin-top:-3px;text-align:center}
.blogger-24{background-position:0 0}
.facebook-24{background-position:0 -100px}
.twitter-24{background-position:0 -150px}
.googleplus-24{background-position:0 -200px}

Lalu Dilanjutkan Memasukkan Kode Pemanggil , Letakkan Kode Dibawah tepat di atas <footer> Atau yang mendekati dengan <footer> , Karena Setiap Template Mempunyai Struktur Kode yang Berbeda.

<div id='social-bar'>
<a class='social-blogger mar10t' href='Your Social Link' target='_blank' title='Follow on Blogger'><i class='blogger-24'/><span class='phapus'><br/>Blogger</span></a>
<a class='social-googleplus mar10t' href='Your Social Link' target='_blank' title='Follow on G+'><i class='googleplus-24'/><span class='phapus'><br/>Google+</span></a>
<a class='social-facebook mar10t' href='Your Social Link' target='_blank' title='Follow on Facebook'><i class='facebook-24'/><span class='phapus'><br/>Facebook</span></a>
<a class='social-twitter mar10t' href='Your Social Link' target='_blank' title='Follow on Twitter'><i class='twitter-24'/><span class='phapus'><br/>Twitter</span></a>
<div style='clear: both;'/>
</div>

Lalu Ganti Tulisan Your Social Link Dengan link kalian masing-masing.

Begitu saja tutorial nya , mudah-mudahan dapat membantu sobat , terima kasih.