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 ;

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.

widget

• tutorial footer style ide blogspot v1
• widget social media blogspot
• widget social media
• cara membuat widget spoiler background style
• widget kategori floating
• cara membuat widget link di atas postingan blog
• cara membuat widget space iklan text
• cara membuat widget permalink with space iklan
• cara membuat halaman kontak di blog
• cara membuat subscribe with advertise
• cara membuat widget share image hover

menu

• cara membuat menu blogspot
• cara membuat widget menu slick blogspot
• widget mega menu blogspot
• widget menu
• widget jquery menu horizontal
• widget navigasi gradient style blogspot
• widget menu bar google style
• widget Floating Menu Social media valid html5
• widget flying navigasi jquery tooltip
• cara membuat widget jquery flying menu
• cara membuat jquery flying menu valid html5

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

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.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 2:14 PM