cara membuat menu navigasi untuk blogger.com

Posted in Label: | 20.30

Perhatikan menu yang ada di blog ini atau teman-teman bisa melihat gambar di bawah ini, seperti itulah menu yang akan icalcell share ke teman-teman blogger semua.

Cara Membuat Menu Pada Blog Dengan Cepat
Cara Membuat Menu Pada Blog Dengan Cepat

  1. Login ke blog , langsung menuju halaman EDIT HTML
  2. Klik expand widget template,
  3. Cari kode seperti di bawah ini
    ]]></b:skin>
  4. Untuk memudahkan tekan CTRL + F , lalu masukkan kode di atas.
  5. Letakkan kode di bawah ini tepat diatas kode pada langkah 3.
    /* Navigation Menu ------------------------------------------------------*/ #nav { background:#000; width: 728px; color: #D8D8D8; display: block; font-weight: normal; text-transform: titlecase; margin:0px auto; padding:0px; height:25px; } .topnav ul { float: left; list-style: none; margin: 0; padding:0; } .topnav li { list-style: none; margin: 0; padding: 0; } .topnav li a, .topnav li a:link, .topnav li a:visited { background:#000; color: #D8D8D8; display: block; font-weight: normal; text-transform: titlecase; margin: 0; padding: 5px 10px; border-right:2px solid #000; } .topnav li a:hover, .topnav li a:active { background:#1C1C1C; color:#D8D8D8; margin: 0; padding: 5px 10px; text-decoration: none; } .topnav li li a, .topnav li li a:link, .topnav li li a:visited { background: #000; width: 150px; color: #fff; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 5px 10px; border-right:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; } .topnav li li a:hover, .topnav li li a:active { background: #363636; color: #FFF; padding: 5px 10px; } .topnav li { float: left; padding: 0; } .topnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } .topnav li ul a { width: 140px; } .topnav li ul ul { margin: -32px 0 0 171px; } .topnav li:hover ul ul, .topnav li:hover ul ul ul, .topnav li.sfhover ul ul, .topnav li.sfhover ul ul ul { left: -999em; } .topnav li:hover ul, .topnav li li:hover ul, .topnav li li li:hover ul, .topnav li.sfhover ul, .topnav li li.sfhover ul, .topnav li li li.sfhover ul { left: auto; } .topnav li:hover, .topnav li.sfhover { position: static; }
  6. Selanjutnya penambahan elemen, menu biasanya akan disimpan di bawah header, sehingga cari kode header seperti di bawah ini.
    <div id='head'> <div id='header-wrapper'> <div class='headerright'> <b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML4' locked='false' title='' type='HTML'/> </b:section> </div> </div> <div style='clear: both;'/> </div>
  7. Setelah dapat , letakkan kode di bawah ini tepat di bawah kode pada langkah 6.
    <div id='nav'> <b:section class='topnav' id='topnav' showaddelement='yes'/> </div>
  8. Save pengaturan, lalu menuju ke halaman Page Element, maka teman-teman menemukan element baru di bawah header, tambahkan element HTML/JavaScript , lalu letakkan menu yang akan teman-teman tambahkan, contohnya seperti di bawah ini
    <ul> <li><a href='http://icalcell.blogspot.com/2009/11/download-center.html'>Download</a></li> <li><a href='http://icalcell.blogspot.com/2011/05/tutorial-blog.html'>Blogger</a></li> <li><a href='http://icalcell.blogspot.com/2010/05/parse-html.html'>Parse Html</a></li> <li><a href='http://icalcell.blogspot.com/2011/07/trik-internet-gratis-2011.html'>Free Internet</a></li> <li><a href='http://icalcell.blogspot.com/2010/05/kirim-sms-gratis.html'>Free SMS</a></li> <li><a href='http://icalcell.blogspot.com/2011/07/privacy-policy.html'>Privacy Policy</a></li> </ul>
    Ingat ikutkan ul, li, dan a.
Untuk warna dan ukuran panjang silahkan di edit bagian CSS atau langkah nomor 5 di atas. Selamat mencoba, jika menemui kesulitan, silahkan komentar dibawah, InsyaAllah akan dibantu.

0 Response to "cara membuat menu navigasi untuk blogger.com"