Materi Pelatihan Lanjutan

    Sobat BLC Jepara, kali ini kita akan membahas mengenai penambahan menu dan sub menu yang bisa kita aplikasikan ke blog kita, dalam artian agar tampilan  blog kita menjadi lebih menarik.

    Nah sobat, kita akan membahas mengenai penambahan menu dan sub menu pada blog kita, sebagai contoh sobat bisa perhatikan gambar di bawah ini,

     Coba sobat perhatikan pada jajaran menu diatas, mulai tentang blc, galeri foto sampai dengan hubungi kami, menarik bukan menu - menu diatas, apalagi bila ada menu dropdown, yakni sub - sub menu yang ada atau menyertai menu utama blog kita. Sebagai contoh menu tentang blc, pada menu dropdown atau sub menunya ada visi dan misi serta peresmian blc. Nah sobat bisa aplikasikan ke blog sobat sendiri, tentunya dengan menu - menu kalian sendiri.

    

   Langsung saja yach....

Langkah pertama, sobat  buka rancangan,

Setelah itu klik saja edit html ya.....

kemudian beri centang ke expand template widget

  

 ketik control f dan tulis maxwidget, setelah ketemu tambahkan tulislah maxwidget:5

Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>­ tersebut.

 




#NavbarMenu { background: #333333; width: 400px; height: 13px; font-size: 13px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenucenter { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: center; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 13px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #333333; width: 170px; color: #FF0000; font-size: 13px; font-family: trebuchet ms,; font-weight: bold; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

Kemudian simpan.

Langkah kedua, sobat  buka rancangan kembali,

    Sobat silahkan pilih add gadget yang tersedia, seperti dibawah ini,

Kemudian pilih html atau javascript,

Kemudian copy pastekan kode dibawah ini,

<div class='menuhorisontal'>

<ul id='nav'>

<li><a href="alamat artikel blog " class="navigation">Menu Utama A</a>

<ul>

<li><a href='alamat artikel blog'>Sub Menu1</a> </li>

<li><a href='alamat artikel blog'>Sub Menu2</a></li></ul> </li>

<li><a href="alamat artikel blog" class="navigation">Menu Utama B</a>

<ul>

<li><a href='alamat artikel blog'>Sub Menu 1</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 2</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 3</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 4</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 5</a></li></ul> </li>

<li><a href="alamat artikel blog" class="navigation">Menu Utama C</a>

<ul>

<li><a href='alamat artikel blog'>Sub Menu 1</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 2</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 3</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 4</a> </li>

<li><a href='alamat artikel blog'>Sub Menu 5</a></li></ul> </li>

</ul></div>

 

Nah sobat tinggal simpan saja......

Coba dibuka blog sobat, menu - menu sudah ada khan...kalau belum, coba diulangi lagi langkah diatas. Dan untuk penambahan menu sobat tinggal copy - pastekan saja kode html diatas.

Langkah ketiga, untuk memposisikan menu sobat berada diatas, masuk ke menu rancangan kembali, dan gadget yang berisi menu kita tadi tinggal di drag atau kita tarik saja keatas.

      Oke sobat, sampai disini dulu yachh....nanti akan kita tambahkan materi - materi yang lain untuk mempercatik blog kita.....

Salam BLC....