Sebelum Di Hover
Sesudah Di Hover
Hai sobat blogger ,pada thread kali ini saya akan memberitahukan Cara Membuat Navbar Keren Dengan CSS
,Langkah-langkahnya adalah sebagai berikut:
1.Login Ke Account Blogger Anda
2.Buka Rancangan,Pilih Edit HTML,
3.Cari Kode ]]></b:skin>,lalu letakkan kode di bawah ini diatasnya
#NBTbar{width:330px; height:30px; margin-bottom:-8px; ; font-family:Supermercado One; color:orange; background:rgba(0,0,0,0.5); background:rgba(0,0,0,0.5); background:rgba(0,0,0,0.5); padding:2px; z-index:999; bottom:1px; left:1px; right:1px; position:fixed; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:1px 0 0 lime,-1px 0 0 lime,0 1px 0 lime,0 -1px 0 lime,1px 1px 2px lime,1px 0 0 lime,-1px 0 0 lime,0 1px 0 lime,0 -1px 0 lime,1px 1px 2px lime; -webkit-box-shadow:1px 0 0 lime,-1px 0 0 lime,0 1px 0 lime,0 -1px 0 lime,1px 1px 2px #000,1px 0 0 lime,-1px 0 0 red,0 1px 0 red,0 -1px 0 lime,1px 1px 2px #000}Ganti kode yang berwarna merah dengan kode warna yg kamu inginkan,Siimpan Template
#NBTbar .left{float:left; text-align:center; font-size:13px; font-style:normal; font-weight:bold; color:red; padding:2px 10px}
#NBTbarr .right{float:right; padding:2px 10px; color:red; text-align:center; font-size:0px; font-style:normal; font-family:'Supermercado One',Arial,Verdana; font-weight:bold; background:-moz-linear-gradient(top,red,#000); background:-webkit-gradient(linear,left top,left bottom,from(BLACK),to(#000))}
#NBTbar:hover{width:1000px; height:80px; margin-bottom:-15px; margin-left:12px}
4.Buka Kembali Rancangan dan Pilih Add Gadget,pilih HTML/JAVASCRIPT
5.Pastekan kdoe di bawah ini di add gadget tsb...
<div id='NBTbar' style='position:fixed;'>
<span class='left'><img align='top' alt='?' height='20' onclick='caesarpopdiv("caesarmpreview");' src='http://i1115.photobucket.com/albums/k554/nuel02/ICON.png' width='20'/>
<a href='http://www.Heric-ajha.org/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixnFd92LyvKK2dg62pP6oVaBe8SB8LnG1Krh-jCHJiCKfdUeb5kiQu0bRjOfXuW6W-vV8g4acGVVNy-VNb6yhHAS_D-yJZkYpaHxq20SjIVX3Biem1jgwyrKagmVvx0yD21jZQKqpeznz/s1600/icon-home.png' title='Home'/></a>
<a href='http://www.Heric-ajha.org/'><div class='fb-like' data-font='arial' data-href='http://www.Heric-ajha.org/' data-layout='button_count' data-send='true' data-show-faces='true' data-width='1'/></div></a>
</span></div>
- Keterangan : Ganti Kode Yg Berwarna MERAH,dengan URL FAVICON anda,Dan ganti kode yg berwarna biru dengan URL BLOG anda
Selesai,Sekian tutorial dari saya....jangan lupa sering mampira ya.... jangan lupa join, dan komentar...
Backlink Please..!!
| URL |
| Code For Forum |
| HTML Code |
0 Orang Ganteng "Cara Membuat Navbar Keren Dengan CSS", Baca atau Masukkan Komentar
Posting Komentar
* Taati lah Aturan Komentar :
1). Dilarang Berkomentar Yang Tidak Berhubungan Dengan Postingan Diatas. Apabila Tidak Berhubungan Saya Admin Heric-ajha, Akan Menghapusnya.
2). Disini Tempat Blogger, "Heric-Ajha" Jadi Dilarang Menggunakan Kata-Kata Seperti : "Gan, Pertamaxx, Pertamina" Ini Bukan Template Jualan/Forum, Ini Adalah Tempat Blogger.
3). Apabila Anda Mau COPY-PASTE, Tolong Sertakan Sumbernya. Dan Jangan Lupa Komentar Di bawah,..!
4). Jangan Lupa Join,berkomentar, dan Submit Link.
.::Terimakasih Atas AndaYang Telah Taat Dengan Aturan::.