Apa kabar sobat?akhirnya bisa posting juga,Posting pada kali ini saya ambil dari Kang rohman,Saya terdampar di PULAU yang sangat besar loh ngacok hehe...,Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.
Makin Penasaran?oke deh langsung ke KANTOR POLISI:
Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.
Untuk template minima klasik :
/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
#juleha a:hover{
text-decoration:none;
padding:34px 5px 41px 5px;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<id="description"><$BlogDescription$>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>
</div>
Untuk template minima baru :
/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
#juleha a:hover{
text-decoration:none;
padding:34px 5px 41px 5px;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div> </div>
</div>
</b:if>
Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode yang saya berikan, silahkan simak :
juleha{
height:25px;
text-align: center;
}
#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}
#juleha a:hover{
text-decoration:none;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>
jadi kira-kira link yang tadi akan menjadi seperi ini :
<a href="http://boy-malik.blogspot.com" target="_blank">Blog-Boy</a>
Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.
Gimana Coy?ngerti gk?gk ngerti?comment yahh :)
Lokasi » Home »
Blogger Pemula
» Navigasi Dengan Css (2)
Navigasi Dengan Css (2)
kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.Link 1 kode untuk membuat link. href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini. Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial
adalah kode penutup buat kode si juleha.
Langganan:
Posting Komentar (Atom)
18 komentar:
Sepertinya blognya KR menjadi kiblat buat beberapa blogger yah? terima kasih tipsnya, lain waktu akan banwebs jalankan :)
Baru Nongol disini lagi nih hehe
baru nongol lagi nih hehe
Nice post,,
kembangkan terus.
jangan lupa mampir keblogQya???
Navigasi dengan css< mantep tutorialnya ..kembangkan terus tutorial blogmu sob
bagus infonya...
khusus buat ane yah :D
thx sob.
sipppp , , , brguna wad iank newbie niyh :D keep posting
copas ni yaa, aq ada pernah baca ni uttor. kwkwkwk . gpp, biar ilmunya berkembang . siip, nice info .
ZEO >>kalo posting ini enggak sob,nih artikel pake kata-kata sendiri tapi kalo kode nya iyah aku copas
wah abang zendry sok tau tuh ! hihihihhii :D jngn sok tau atuh mas.
ooo iah boymalik tadi katanya bngung foto blog, nih tutorinya :
Cara Foto Blog kita
dewi : heheheee . bukan sombong . aq ada pernah liat yang ada kata2 kantor polisi gitu .
boy, ada live demonya gak .
live demonya mana sob??
Mantap sob, saya mah belum nyampe kesini.
ntar mungkin belum sempet nyoba.
Tutorialnya bermanfaat boy, semakin banyak tutorial yang ditulis semakin banyak yang terindex digoogle... keep posting buddy......
BAGUS TUH, wah suka ngumpulin tema blog para blog master ya...
coba navigasi css itu saya mau baca dulu sehingga meningkatkan kualitas hasil supaya tamabh pengetahuan
makasih atas infonya
wah bisa liat demony gk?
Posting Komentar