Membuat menu dan sub-menu di blog

( Gambar di atas adalah contoh dari blog admin sebelum diberi menu dan sub-menu.)

Bagaimana Cara Membuat Menu dan Submenu di Blog

Masuk kehalaman edit tamplet sobat yang kemudian menu pilihan tamplet akan muncul. Setelahnya, klik edit HTML, dan akan muncul tampilan edit script.

cari kode <div class='main-outer'> atau <div id='main-wrapper'> ataupun <div id='main'> . Agar memudahkan pencarian gunakan Ctrl f untuk memudahkan pencarian, setelah sebelumnya klik sembarang pada wilayah kolom edit script.

Masukan kode script didalam text scroll  berikut ini  tepat diatas kode.

#menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #000000; background: -moz-linear-gradient(#444, #000000); background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); } #menu li { float: left; padding: 0 0 10px 0; position: relative; line-height: 0; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover /* IE6 */ { color: #fafafa; } #menu li:hover > ul { display: block; } /* Sub-menu */ #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5); -moz-border-radius: 5px; border-radius: 2px; } #menu ul ul { top: 0; left: 150px; } #menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */ { height: 10px; } *:first-child+html #menu ul a /* IE7 */ { height: 10px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul ul li:first-child a:after { left: -8px; top: 12px; width: 0; height: 0; border-left: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #04acec; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ </style> <ul id='menu'> <li><a href='/'>Home</a></li> <li><a href='http://nursashare.blogspot.com/' rel='nofollow' target='_blank'>Entertaiment</a> <ul id='sub-custom-nav'>> <li><a href='http://nursashare.blogspot.com/search/label/movies/' rel='dofollow' target='_blank'>Movies</a></li> <li><a href='http://nursashare.blogspot.com/search/label/Varieties/' rel='dofollow' target='_blank'>Varieties</a></li> <li><a href='http://nursashare.blogspot.com/search/label/Anime/' rel='dofollow' target='_blank'>Anime</a></li> </ul> </li> <li><a href='http://nursashare.blogspot.com/' rel='nofollow' target='_blank'>Software</a> <ul id='sub-custom-nav'>> <li><a href='http://nursashare.blogspot.com/search/label/applications/' rel='dofollow' target='_blank'>Applications</a></li> <li><a href='http://nursashare.blogspot.com/search/label/games/' rel='dofollow' target='_blank'>Games</a></li> </ul> </li> <li><a href='http://nursashare.blogspot.com/' rel='nofollow' target='_blank'>Tutorial</a> <ul id='sub-custom-nav'> <li><a href='http://nursashare.blogspot.com/search/label/blogging/' rel='dofollow' target='_blank'>Blogging</a></li> <li><a href='http://nursashare.blogspot.com/search/label/tips_n_trick/' rel='dofollow' target='_blank'>Tips n Trick</a></li> <ul> </ul> </ul> </li> <li><a href='http://nursa-share.blogspot.com/search/label/contact_us/' rel='nofollow' target='_blank'>Contact Us</a> </li> </ul> <br />

ket :

Dibawah script </style> saudara akan menemukan link label seperti berikut:

//nursashare.blogspot.com/search/label/movies/' rel='dofollow' target='_blank'>Movies

ganti tulisan seperti yang saya tandai, dan sesuaikan dengan kebutuhan labeling saudara

========================================================================

( Ingin tau gimana cara memberi warna pada background klik di sini)

Setelah selesai pengeditan, disarankan untuk melihatnya terlebih dahulu dalam tinjauan priview, hal ini dimaksudkan agar apabila terjadi kesalahan tamplet kita tetap aman. Apabila sobat melakukan pembuatan menu dan sub-menu sesuai dengan langkah yang admin berikan, insya ALLAH hasilnya akan seperti ini.

Artikel ini kuketik, sebagai catatan inspirasi perjalan blog-ku.  Selamat Mencoba..."-"