Navigasi Menu Cantik

CANTIK? Eh, jangan seneng dulu! Cantik itu kan relatif. Hehehe... Saya mau bagi tips lagi neh... Sebenernya sama aja kayak navigasi menu, tapi yang ini dengan background, sehingga mempercantik tampilannya. Nah, contohnya seperti gambar diatas (klik gambar untuk lebih jelas). Nah, kalau tertarik, ikuti langkah berikut.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup template anda.

3. Cari kode:

]]></b:skin>

4. Lalu masukkan kode berikut diatasnya:


a. Untuk yang hijau:

/* Navigasi menu hijau */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxC0nPPY0QPc2R1bQ18nCP5blp-f5NCw0DR_6Ov_Q4KHejP380bM7ex74RrHyDsoCDuFnULYtmCMDJnANMWD39LGWZvDp9lMTyuqz1mGD798BIeHOHbwsHuT0JYyXJ7ggDNE9J8JdReGE/s320/Navbg.jpg);
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVZig_AKOU2CcGBtFIxB8FR6sQwq-ZtW_rEet8n8VNswUZMzeLeA0ymKa9EqNoG1EZ9Fe3eFFowUoNDbfxBtGVzVqHnq3Bub6PsJk9NH_Lz3D74RDaeajNIUDx06BFejhjrrtiOt9PQc/s320/Navhoverbg.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

b. Untuk yang biru:

/* Navigasi menu biru */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dNVq5qWxSbldPcQ2q9Wk9a8tfb6Tl70f8RCb3vdC1e5CPrZP3Z8tdGYnDs2zZY6NV_xwt9HKuyTKlQ8aH1BmVenzasixElzko9P4bseXWWa9gKq1nNK6OOzO6ZVRlLCCaFaCpCvwlsM/s320/Navbgblue.jpg);
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYQ1s9uvRDMUMkr7t4-WCwaXGqKn6AGB8-_n1qRORYU8Ilsl9SavFOGrP6yiDxA1jlTEmU026Hj5DNc6VShyphenhyphenY8lPnwLIjZZustuuZQuOhi-RQsEUCcZPeH-TB6AN3eIMoAAp2mS-n15Q/s320/Navbgbluehover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

c. Untuk yang berwarna kuning:

/* Navigasi menu kuning */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXU2BkvoIgno1xbLD6KrKQWNCNYM1SHEtkSDESM7V72fs8Cuqf5prDGPtR5OufYoWyRium5mqVJOsLqpHPIoOekmeYdu3GS7tvWIq8ltnbLL_wIMJj8mmEKceL-F6Gk8zdywaQb8t-g0/s320/Navbgyellow.jpg);
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxA6qHkohNaSBUwCA3Nv_DAiCCGthqTV1HfbjiVnkI3P3cMsS3PjHZlUyvM08N5BP3WarkB4R68FkjWWJbJSg1kaA-0Ck4ILq-DOu0ozHcpTvosBy-zhD8xngxk_xaMnA_AgHSVctkNGc/s320/Navbgyellowhover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

d. Untuk yang hitam:

/* navigasi menu hitam */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnTG-bv4v0Ih-LYBTDK_FYEqci2JI0-kjw7ZRzeqB9xqvJfMT9u98TfVj5Dc9dqhIdG_4vRWAA-Vj9WYBX2reoAQxwT_PR1bHj8Q_jiNoIeJbLky0rVMoGkPxJsK485sE2gTa1bEVaaI/s320/Navbgblack.jpg);
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXfgNbVwcWk6BTe8Mm17tddq-wGDHIooyTfZ_vWN44EkqHFLqjijdTdpN-x487WYhdZHB2OywHZW4nZZcJqccc7hbP18CQwvcXLWlzaO83bxtSOMuavLo3NxOOlbRN4fdn06qg4LYF48/s320/Navbgblackhover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

5. Cari kode yang mirip:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>

6. Masukkan kode berikut dibawahnya (untuk semua jenis).

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

Ket: tanda pagar (#) adalah link. Ganti dengan URL yang diinginkan. Sedangkan yang berwarna biru adalah teks pada menu. Ganti juga dengan yang diinginkan.

7. Klik Simpan Template.

8. Coba lihat blog anda.

Selamat mencoba dan semoga berhasil.

Read More......

Navigasi Dropdown Menu

Saya pernah membahas cara membuat navigasi menu yang pernah saya buat DISINI. Tetapi, navigasi menu tersebut hanya mampu menampung sedikit link. Nah, jika kita akan menampung banyak link, gimana? Kita bisa membuat navigasi dropdown menu. Ketika sebuah menu disorot, menu lainnya akan muncul. Seperti gambar ini.

Nah, untuk contohnya, anda bisa melihatnya di http://forumparablogger.blogspot.com (sorry, bukan promosi). Oh, ya. Menu ini menggunakan javascript. Jadi, ini bisa membuat blog anda sedikit lebih lambat. Nah, jika sudah kebelet ingin memiliki navigasi dropdown ini, ikuti 10 langkah berikut dan yang kebelet pipis silahkan ke belakang dulu.

Kita mulai tutorialnya.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Ketikkan kode berikut diatasnya.

/* Navigasi Dropdown Menu */
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:100%;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu,  #navdropdownmenu li:hover a:hover ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
left:auto;
}
.ngumpet{
display:none;
}
.muncul{
display:block;
}

5. Cari kode berikut.

</head>

6. Ketikkan kode berikut diatasnya.

<script>
var auahgelap = &#39;&#39;;
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == &#39;ngumpet&#39;) {
if (auahgelap != &#39;&#39;) {
var terlalu = document.getElementById(auahgelap);
terlalu.className = &#39;ngumpet&#39;;
}
menu.className = &#39;muncul&#39;;
auahgelap = id;
} else {
menu.className = &#39;ngumpet&#39;;
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != &#39;ngumpet&#39;) {
if (auahgelap == &#39;&#39;) {
var terlalu = document.getElementById(auahgelap);
terlalu.className = &#39;muncul&#39;;
}
menu.className = &#39;ngumpet&#39;;
auahgelap = id;
} else {
menu.className = &#39;muncul&#39;;
}
}
</script>

7. Cari kode yang mirip kode berikut.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>

8. Dibawahnya, ketikkan kode berikut.

<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>

<li><a href="#">Home</a></li>

<li onmouseout='petakumpet(&quot;submenu1&quot;)' onmouseover='umpetpetak(&quot;submenu1&quot;)'><a href='#'>Menu 1</a>

<div class='ngumpet' id='submenu1'>

<ul>

<li><a href='#'>Separuh Jiwaku Pergi</a></li>

<li><a href='#'>Sang Mantan</a></li>

<li><a href='#'>Begadang</a></li>

<li><a href='#'>Buka Hatimu</a></li>

<li><a href='#'>Baik-baik Sayang</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu2&quot;)' onmouseover='umpetpetak(&quot;submenu2&quot;)'><a href='#'>Menu 2</a>

<div class='ngumpet' id='submenu2'>

<ul>

<li><a href='#'>Wali</a></li>

<li><a href='#'>Nidji</a></li>

<li><a href='#'>Letto</a></li>

<li><a href='#'>ST 12</a></li>

<li><a href='#'>Hijau Daun</a></li>

<li><a href='#'>Warteg Boyz</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu3&quot;)' onmouseover='umpetpetak(&quot;submenu3&quot;)'><a href='#'>Menu 3</a>

<div class='ngumpet' id='submenu3'>

<ul>

<li><a href='#'>Kang Rohman</a></li>

<li><a href='#'>O-OM</a></li>

<li><a href='#'>Mas Doyok</a></li>

<li><a href='#'>Anangku</a></li>

<li><a href='#'>Cebong Ipiet</a></li>

<li><a href='#'>Beben</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu4&quot;)' onmouseover='umpetpetak(&quot;submenu4&quot;)'><a href='#'>Menu 4</a>

<div class='ngumpet' id='submenu4'>

<ul>

<li><a href='#'>Amerika</a></li>

<li><a href='#'>Indonesia</a></li>

<li><a href='#'>Australia</a></li>

<li><a href='#'>Inggris</a></li>

<li><a href='#'>Italia</a></li>

<li><a href='#'>Prancis</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu5&quot;)' onmouseover='umpetpetak(&quot;submenu5&quot;)'><a href='#'>Menu 5</a>

<div class='ngumpet' id='submenu5'>

<ul>

<li><a href='#'>Wayne Rooney</a></li>

<li><a href='#'>Didier Drogba</a></li>

<li><a href='#'>Christiano Ronaldo</a></li>

<li><a href='#'>Del Piero</a></li>

</ul>

</div>

</li>

<li onmouseout='petakumpet(&quot;submenu6&quot;)' onmouseover='umpetpetak(&quot;submenu6&quot;)'><a href='#'>Menu 6</a>

<div class='ngumpet' id='submenu6'>

<ul>

<li><a href='#'>Afgan</a></li>

<li><a href='#'>Vidi Aldiano</a></li>

<li><a href='#'>Derby Romero</a></li>

<li><a href='#'>Agnes Monica</a></li>

<li><a href='#'>Sherina</a></li>

</ul>

</div>

</li>

</ul>
</div>

Ket:

• Kode Submenu1, Submenu 2, dst harus disesuaikan dengan menu yang akan tampil.
• Tanda # pada  kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
• Anda bisa menambah atau mengurangi menu diatas.

9. Lalu klik Simpan Template.

10. Lihat hasilnya.

Selamat mencoba! Apabila bingung, tanyakan dalam komentar.

Read More......

Cara Membuat Submenu pada Navigasi

Assalamualaikum, sob...

Setelah ngecek postingan saya di sini, saya menemukan komentar masuk. Seperti ini nih komentarnya.

"kalau untuk membuat navigasi menu horizontalnya menjadi 2 (dua) tingkat, bagaimana caranya mas?"

Mungkin maksud dari 2 tingkat itu mempunyai submenu kali, seperti punya Kang Rohman.

Lihat! Dibawah menu utama ada menu tambahan lagi untuk menampung menu-menu lainnya. Mungkin itu kali yah, maksudnya? (kalo salah tolong jelasin yang dimaksud ya...)

Untuk menampilkan menu seperti itu, gampang caranya.

1. Login dulu ke Blogger, lalu pilih menu Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Tepat diatasnya, ketikkan kode:

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81BEF7; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:#5858FA; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}
/* Sub Navigasi Menu */
#subnavmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu subnavigasi. Sesuaikan dengan lebar blog anda */
background:#5858FA; /* Warna latar belakang menu navigasi */
float:left;
}
#subnavmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#subnavmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#subnavmenu ul li {
float: left;
display:inline;
}
#subnavmenu li a, #subnavmenu li a:link, #subnavmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:5px 5px 5px 5px;
font-size:10px; /* Ukuran teks */
}
#subnavmenu li a:hover {
text-decoration:underline;
}

5. Lalu cari kode yang mirip/mendekati:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>

6. Lalu dibawahnya, ketikkan kode:

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Baik Baik Sayang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Rasa Ini</a></li>
</ul>
</div>
<div id="subnavmenu">
<ul id="subnavmenu">
<li><a href="#">Wali</a></li>
<li><a href="#">Hijau Daun</a></li>
<li><a href="#">ST 12</a></li>
<li><a href="#">Ungu</a></li>
<li><a href="#">Nidji</a></li>
<li><a href="#">Vierra</a></li>
<li><a href="#">The Dance Company</a></li>
</ul>
</div>

Jangan lupa, Ganti link diatas dengan link yang anda inginkan. Anda bisa menambah ataupun mengurangi jumlah link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya Klik Pratinjau.

8. Kalau sudah yakin, Klik Simpan Template.

Nah, sudah kejawab kan?

Semoga bermanfaat.

Read More......

Cara Membuat Navigasi Menu

Awas ada Rizki... Prikitiw... Assalamualaikum. Kembali lagi bersama saya, seperti binasa biasa, kita akan membahas tentang Modifikasi Template. Oh, iya. Untuk melihat semua posting yang dibuat oleh saya, klik aja DISINI. Ok, kita langsung saja beralih ke topik.

Navigasi adalah sebuah tool yang berguna untuk membantu pengunjung menjelajahi isi situs web. Nah, navigasi yang kali ini akan kita buat TIDAK menggunakan gambar. Hanya sekedar teknik CSS biasa sehingga tidak terlalu memberatkan loading blog. Contohnya seperti gambar dibawah.

Nah, tertarik nggak membuatnya? Kalau iya, lakukan langkah-langkah berikut.

1. Login dulu ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Silakan backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Tepat diatasnya, ketikkan kode:

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81F781; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover {
background:#088A08; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

5. Lalu cari kode yang mirip/mendekati:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
</b:section>
</div>

6. Lalu dibawahnya, ketikkan kode:

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Baik Baik Sayang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Rasa Ini</a></li>
</ul>
</div>

Ket: Ganti teks dan link diatas dengan teks dan link yang diinginkan. Anda bisa menambah ataupun mengurangi jumlah teks dan link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya pratinjau dulu. Klik Pratinjau

8. Kalau sudah yakin, simpan template anda. Klik Simpan Template.

Selamat mencoba. Semoga artikel ini bermanfaat.

Read More......