Jujur saja,saya kadang tidak mengerti dengan istilah kode di blog, yang kadang juga saya harus menghafal beberapa istilah.heheh, maklum saja saya belajar dengan otodidak, sempat ada beberapa komentar yang meminta bantuan "bagaimana memasang bla..bla..bla..." yang bikin saya pusing,heheheh dan harus mecari arti itu di google search..wakaakkaka...parah ga tuh.
Tapi saya tidak merasa minder dengan para master yang begitu pinter meracik kode-kode di blog hingga menciptakan hal yang sangat bermanfaat di blog.Tapi,yang membuat saya minder adalah saya tidak ingin belajar dan tidak ingin tahu.
Disini saya bukan menulis tentang tutorial atau semacamnya, saya hanya ingin memberi tahu cara membuat menu ( apa yah namanya...) dari pada saya bingung menu ini saya berinama menurut versi saya adalah menu-endah-pireusepeun ..seperti tampak gambar di bawah
DEMO |
Terserah saya mo aneh kek..heheh (padahal gak tahu nama menu ini.)
kalau kata saya sih,menu ini cocoknya buat blog yang berisi konten berita atau semacamnya..tapi terserah juga sih,,heheh
Pertama salin kode CCS di bawah ini
a#home{display:block;width:27px;background-image:#fff;background-position:0 0;float:left;margin:0px 0px 0 0}
a#home:hover{background:#0000;} #panjz{height:30px;background:#fff;border:1px solid #aaa}
#panjz .container{width:100%;height:30px;margin:0 auto}
ul#topnav{float:left;width:850px;list-style:none;position:relative;font-size:1.1em;margin:0;padding:1px 0 0} ul#topnav li{float:left;border-right:1px solid #555;margin:0;padding:0}
ul#topnav li a{font-size:12px;font-weight:700;text-transform:none;color:#626262;display:block;text-decoration:none;padding:5px 13px}
ul#topnav li:hover{background:#aaa}
ul#topnav li span{float:left;margin-top:3px;position:absolute;left:0px;top:29px;display:none;width:930px;margin:0 auto;background:#aaa;color:#000;-moz-border-radius-bottomright:5px;-khtml-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-khtml-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;padding:7px 0 7px 20px} .active{background:#e9e9e9;display:block}
ul#topnav li:hover span{display:block;z-index:100}
ul#topnav li span a{display:inline}
ul#topnav li span a:hover{text-decoration:none;background:#e9e9e9;padding:5px 15px}
kmudiaan salin kode HTML atau kerangka objek di bawah ini, terserah anda mau di letakkan dimna.
<div id='wrap2'>
<div id='panjz'>
<div class='container'>
<ul id='topnav'>
<li class='active'><a href='/' id='home'>home</a></li>
<li><a href='/'>Wilayah</a>
<span>
<a href='#'>Bogor Barat </a>
<a href='#'>Bogor Timur</a>
<a href='#'>Bogor Tengah</a>
<a href='#'>Bogor Utara</a>
<a href='#'>Bogor Selatan</a>
</span>
</li>
<li><a href='/'>Wisata</a>
<span>
<a href='#'>Kebun raya</a>
<a href='#'>Taman Topi</a>
<a href='#'>Setu Gede</a>
<a href='#'>Puncak</a>
<a href='#'>Istana Bogor</a>
</span>
</li>
<li><a href='/'>Kuliner</a>
<span>
<a href='#'>menu1</a>
<a href='#'>menu2</a>
<a href='#'>menu3</a>
<a href='#'>menu4</a>
<a href='#'>menu5</a>
</span>
</li>
<li><a href='/'>Hiburan</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/teknologi'>Teknologi</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/warta-bumi'>Info kita</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/artikel'>Artikel</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='#' target='_blank'>Otomotif</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
<li><a href='/foto'>Foto</a></li>
<li><a href='/video'>Video</a>
<span>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
<a href='#'>menu</a>
</span>
</li>
</ul>
</div></div>
disini mungkin anda sudah tahu mana yang harus di edit jadi saya tidak perlu perlu panjang lebar menjelaskannya. sebelum di save,lihat pratinjau,jika dirasa sudah pas save template anda
jika ada yang kurang jelas ,bertanyalah... :D
semoga bermanfaat.
Yang kayak gini banyak dicari oleh pengguna Adsence mas Panjz...keren...
BalasHapusJadi iklan tidak tertutup menu...lanjut....
Review yang ini mas...
http://kompiana.blogspot.com/
Dasar dari Johny Wusss pertama...
Mau nunggu Maskolis kayaknya masih lama... paling dipost sendiri... dulu...
templatenya keren om.. mantap
Hapusemang nih om udah mirip maskolis.. :D
keren mas..
BalasHapushttp://dyns-cyber.blogspot.com/
emang kereen mas , terimaksih postingan nyaa
BalasHapussepertinya menu ini cocok dengan blog saya...aku mau coba dulu ya..trimakasih kawan, sudah berbagi ilmu :-)
BalasHapusPermisi mas panji,,
BalasHapusSaya mau nanya cara buat tulisan "NEW !" di pada post home page itu gmna?
Termakasih.
coba mas salin kode ini di bawah ]]>
Hapus.post{margin:8px 5px ;padding:0 10px;-webkit-box-shadow:1px 1px 5px #c3c3c3;-moz-box-shadow:1px 1px 5px #c3c3c3;-ms-box-shadow:1px 1px 5px #c3c3c3;-o-box-shadow:1px 1px 5px #c3c3c3;box-shadow:1px 1px 5px #c3c3c3;background:#f9f9f9 url(http://1.bp.blogspot.com/-goQCaMqeojc/UU9XY-BLXUI/AAAAAAAAEJM/jwppeO3Sz2M/s1600/ribpanjz.png)no-repeat top right -2px;border:1px solid #fff;}
ganti url gambar nya dengan yg punya mas
Makasih mas, berhasil
Hapuskeren jg ni, cuma sy bingung arti dr 'endah-pireusepeun' itu apa?? *smile
BalasHapusartinya indah d lihat mas.. eheheh :D
Hapuskereeennn bangeett nih , bsa d jadikan referensi bgi yg mau bkin tmplate mas
BalasHapusmasa? banyak yg ga suka perasaan mah mas
HapusMas aku pake template mu lho, jgan lupa dtg main or ngapelin aku yah...
BalasHapusCuma nanya : "Template yg kamu pake berat kali mas?"