http://trikkuampuh.blogspot.com/. Contoh laman HTML
SELAMAT DATANG DI BLOG KAMI "NIKI TRIK KULO"

Membuat Menu Sosial Button/Icon Di Pojok Header




Untuk Penjelasan seperti apa social network button kalian bisa lihat di gambar.
sebelumnya saya jelaskan tutorial ini hanya untuk dokumentasi pribadi karena sudah saya praktekkan dan berhasil,jadi mohon maaf jika ada yang kurang jelas bagi yang mau mencoba.karena saya menulis pokok pokoknya saja

1.Download dulu templatemu untuk jaga jaga
2.Edit html
3.Pastekan Kode ini di atas Kode ]]></b:skin>

#rightnav{float:right}
a.soicon{display:inline-block;float:left;margin-right:10px;height:24px;line-height:24px;padding-left:22px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgejblEBaqpgQCELXVkomcUYUGbYem6xXDaGYzBcaG1IfAPDHgvaL9Pz77QcVMNgkNhbS73TXullJlt0OcNvD4rGOGf13Yg6Zw0WWxNj2Xsacc4pVUhtJw0I0sndsD4Cy_4N835DxkhlBqH/s1600/socialicons.png);background-position:0 -6px;background-repeat:no-repeat;-webkit-transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out;-ms-transition:color .4s ease-in-out;transition:color .4s ease-in-out}
a.facebookx{background-position:0 -6px}
a.facebookx:hover{background-position:0 -150px}
a.twitterx{background-position:0 -79px}
a.twitterx:hover{background-position:0 -223px}
a.googlex{background-position:0 -43px}
a.googlex:hover{background-position:0 -187px}
a.rssx{background-position:0 -115px}
a.rssx:hover{background-position:0 -259px}
#leftnav{float:left}


4.Setelah Itu Pastekan Kode Berikut Di Bawah Kode </head>

<div id='rightnav'>
<a class='soicon facebookx' href='https://www.facebook.com/ihwan.arif' rel='nofollow' target='_blank' title='Facebook'>Facebook</a>
<a class='soicon twitterx' href='https://twitter.com/ihwanarif' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='soicon googlex' href='https://plus.google.com/u/0/' rel='nofollow' target='_blank' title='Google+'>Google+</a>
<a class='soicon rssx' href='http://feeds.feedburner.com/ihwanarif' rel='nofollow' target='_blank' title='RSS'>RSS</a>
</div>


5.Ganti Kode Link Warna Biru Dengan Kode Kamu Sendiri
6.Pratinjau Templatemu,jika sudah berhasil Simpan Template

Membuat Menu Sosial Button/Icon Di Pojok Header

Tidak ada komentar:

Posting Komentar

Flag Counter