Home » , » Membuat Menu Endah Pireusepeun

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.

13 komentar:

  1. Yang kayak gini banyak dicari oleh pengguna Adsence mas Panjz...keren...
    Jadi 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...

    BalasHapus
    Balasan
    1. templatenya keren om.. mantap
      emang nih om udah mirip maskolis.. :D

      Hapus
  2. keren mas..

    http://dyns-cyber.blogspot.com/

    BalasHapus
  3. emang kereen mas , terimaksih postingan nyaa

    BalasHapus
  4. sepertinya menu ini cocok dengan blog saya...aku mau coba dulu ya..trimakasih kawan, sudah berbagi ilmu :-)

    BalasHapus
  5. Permisi mas panji,,
    Saya mau nanya cara buat tulisan "NEW !" di pada post home page itu gmna?
    Termakasih.

    BalasHapus
    Balasan
    1. coba mas salin kode ini di bawah ]]>

      .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

      Hapus
  6. keren jg ni, cuma sy bingung arti dr 'endah-pireusepeun' itu apa?? *smile

    BalasHapus
  7. kereeennn bangeett nih , bsa d jadikan referensi bgi yg mau bkin tmplate mas

    BalasHapus
  8. Mas aku pake template mu lho, jgan lupa dtg main or ngapelin aku yah...

    Cuma nanya : "Template yg kamu pake berat kali mas?"

    BalasHapus

Terima Kasih Untuk Komentar Dan Waktu Luangnya Sudah Mengunjungi Blog Sederhana ini
Semoga Artikel ini Bermanfaat.

13 komentar:

  1. Yang kayak gini banyak dicari oleh pengguna Adsence mas Panjz...keren...
    Jadi 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...

    BalasHapus
    Balasan
    1. templatenya keren om.. mantap
      emang nih om udah mirip maskolis.. :D

      Hapus
  2. keren mas..

    http://dyns-cyber.blogspot.com/

    BalasHapus
  3. emang kereen mas , terimaksih postingan nyaa

    BalasHapus
  4. sepertinya menu ini cocok dengan blog saya...aku mau coba dulu ya..trimakasih kawan, sudah berbagi ilmu :-)

    BalasHapus
  5. Permisi mas panji,,
    Saya mau nanya cara buat tulisan "NEW !" di pada post home page itu gmna?
    Termakasih.

    BalasHapus
    Balasan
    1. coba mas salin kode ini di bawah ]]>

      .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

      Hapus
  6. keren jg ni, cuma sy bingung arti dr 'endah-pireusepeun' itu apa?? *smile

    BalasHapus
  7. kereeennn bangeett nih , bsa d jadikan referensi bgi yg mau bkin tmplate mas

    BalasHapus
  8. Mas aku pake template mu lho, jgan lupa dtg main or ngapelin aku yah...

    Cuma nanya : "Template yg kamu pake berat kali mas?"

    BalasHapus

Terima Kasih Untuk Komentar Dan Waktu Luangnya Sudah Mengunjungi Blog Sederhana ini
Semoga Artikel ini Bermanfaat.

Terakhir Diperbaharui