Halo sobat Alvin Warasi, sudah lama saya tidak post, tetapi saya kembali lagi dengan posting yang pujituhan akan membantu 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 saja :)
Untuk DEMO-nya bisa Anda lihat di footer blog ini, Cara Membuat Social List di atas footer sangat sederhana sekali.
Simak langkah-langkah di bawah ini :
1. Login akun
blogger Anda.
2. Klik
Template Edit HTML.
3. Kemudian tekan
CTRL+F cari kode
]]></b:skin> atau
</style>
4. Lalu letakkan kode
CSS di bawah ini tepat di atas kode
]]></b:skin> atau
</style>
/* 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}
5. Selanjutnya masukkan kode pemanggil, letakkan kode di bawah ini tepat di atas kode
<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>
6. lalu ganti tulisan
Your Social Link dengan link kalian masing-masing.
Selamat mencoba dan semoga berhasil,..
Blogger
Google+
Facebook
Twitter