Header Ads

Breaking News
recent

Membuat Menu Endah Pireusepeun


Membuat Menu Endah Pireusepeun
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

menu-endah-pireusepeun
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.

Tidak ada komentar:

Diberdayakan oleh Blogger.