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(http://4.bp.blogspot.com/-xle7tRvibpc/UIecojbG6kI/AAAAAAAACw0/lvzIR05C3tI/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/Risalahatiku' rel='nofollow' target='_blank' title='Facebook'>Facebook</a>
<a class='soicon twitterx' href='https://twitter.com/Dedic_Ahmad' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='soicon googlex' href='https://plus.google.com/u/0/108513714148154406937' rel='nofollow' target='_blank' title='Google+'>Google+</a>
<a class='soicon rssx' href='http://feeds.feedburner.com/Risalahati' 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
Posted by: Risalahati Dedic Ahmad Updated at: 23:53
Membuat Menu Sosial Button/Icon Di Pojok Header RISALAHATI , By Risalahati, Published: 2013-02-25T23:53:00+07:00, Title: Membuat Menu Sosial Button/Icon Di Pojok Header, Rating5 of 8765432 reviews

No comments:

Post a Comment