Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Wednesday, July 31, 2013

cara membuat menu navigasi diblog

Menu navigasi pada halaman blog dapat dikatakan unsur element yang paling penting pada sebuah halaman blog. Dimana sebuah menu navigasi halaman blog merupakan pusat link dari berbagai artikel yang telah diposting pada tubuh blog itu sendiri. Pada postingan saya kali ini saya membuat suatu menu navigasi yang kren menurut saya tidak tau apa pendapat orang lain. Menu ini termasuk menu navigasi sederhana tapi unik, oke buat teman teman blogspot yang masih doyan mendesign halaman blognya silahkan simak penjelasan tutorial dibawah ini mana tau anda tertarik. Oke langsung saja menuju TKP.


Dibawah ini adalah gamber screen shoot dari menu navigasi tersebut, lihat gambar ;


cara membuat menu navigasi diblog


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#bdmenu-keren {
width:800px;
border-bottom: 5px solid #993300;
border-top: 1px solid #e14d09;
clear: both;
overflow: hidden;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
background-color: #990000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: 600;
}#bdmenu-keren ul {
float: left; height: 30px;
width: 100%;
}#bdmenu-keren li {
float: left;
list-style-type: none;
}#bdmenu-keren li a {
color: #CCCCCC;
display: block;
font-size: 14px;
padding: 5px 17px 5px 15px;
position: relative;
text-decoration: none;
background-color: #990000;
}#bdmenu-keren li a:hover {
color: #fff;
background-color: #D61601;
}#bdmenu-keren li li a {
background: none;
background-color: #990000;
border: 1px solid #0d408d;
border-top-width: 0;
color: #fff;
font-size: 14px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 130px;
border-color: #FF0000;
}#bdmenu-keren li li a:hover {
background: none;
background-color: #DD0000;
border-radius: 0 10px 0 10px;
color: #99FF66;
}#bdmenu-keren li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: fixed;
width: 160px;
z-index: 9999;
}#bdmenu-keren li:hover ul {
left: auto;
}


Install tag html


  • Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya.
  • Copy code dibawah ini lalu pastekan dibawah widget " HEADER "
    Pada halaman blog pasti mempunyai "Header" jadi anda pastekan kode dibawah ini dibawah semua kode HEADER blog anda.
  • Save halaman anda dan lihat hasilnya, semoga bermanfaat.

<div id="bdmenu-keren">
<li><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>Home</a></li>
<li><a href="link" title="judul link">Sub Menu 1</a>
<ul>
<li><a href="link" title="judul link"> Menu 1.1</a></li>
<li style="padding-left:20px"><a href="link" title="judul link"> Menu 1.2</a></li>
<li style="padding-left:40px"><a href="link" title="judul link"> Menu 1.3</a></li>
<li style="padding-left:60px"><a href="link" title="judul link"> Menu 1.4</a></li>
</ul>
</li>
<li><a href="link" title="judul link">Sub Menu 2</a>
<ul>
<li><a href="link" title="judul link"> Menu 2.1</a></li>
<li style="padding-left:20px"><a href="link" title="judul link"> Menu 2.2</a></li>
<li style="padding-left:40px"><a href="link" title="judul link"> Menu 2.3</a></li>
<li style="padding-left:60px"><a href="link" title="judul link"> Menu 2.4</a></li>
</ul>
</li>
<li><a href="link" title="judul link">Menu 1</a></li>
<li><a href="link" title="judul link">Menu 2</a></li>
<li><a href="link" title="judul link">Menu 3</a></li>
<li><a href="link" title="judul link">Menu 4</a></li>
<li><a href="link" title="judul link">Menu 5</a></li>
</div>

Keterangan Code
  • Tulisan kode warna MERAH ganti dengan link menu atau link label anda.
  • Tulisan warna BIRU ganti dengan nama menu navigasi anda.
  • Tulisan code warna HIJAU ganti dengan judul link anda, biasanya judul link ini sama dengan nama menu link. Hal ini agar menu navigasi anda lebih SEO Friendly.
  • Perhatikan kode warna MERAH pada CSS diatas [ width:800px; ] 800px adalah ukuran lebar menu tersebut, silahkan ganti sesuai dengan ukuran lebar halaman anda, agar sesuai dan indah dipandang mata.
  • Silahkan anda edit kode CSS dan HTMLnya untuk meningkatkan kreativitas anda, bila anda mengalami masalah silahkan konsultasi kepada saya.

Kesimpulan

Menu navigasi sangat diperlukan pada halaman blog sebagai aplikasi tempat berbagai link artikel maupun halaman pada sebuah halaman blog.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 2:14 PM

8 comments :

  1. Bagus Mas. Tapi kalau di blog saya nggak cocok kayaknya Mas. http://siapa-lo.blogspot.com

    ReplyDelete
    Replies
    1. oya okelah kalo begitu, salam kenal..
      thx atas kunjungannya..

      Delete
  2. thanks gan infonya...
    mantab deh..
    mampir di blog ane. http://belajar-triks.blogspot.com/

    ReplyDelete
    Replies
    1. sama sama sob..
      blognya dan artikelnya bagus sob..

      Delete
  3. mas, supaya menu navigasi melebar sampai ujung kiri dan kanan gimana ya?

    ReplyDelete
    Replies
    1. harus di rombak melalui CSS gan soalnya lebar menu selalu sama dengan lebat halaman gan, coba di setting lebar halamannya, tapi memang akan sangat berpengaruh pada semuanya gan, jadi perlu teliti dan paham CSS gan..

      Delete
    2. ini gan blog saya tipscaraalami.com. ane newbie, bingung edit yang mana.

      Delete
    3. lihat jawabannya di sini gan..
      untuk bertanya soal blogspot silahkan pergunakan kategori yang ada..

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog