Cara Membuat Sub Laman di Blog

Pembuatan sub laman/sub menu selain agar membuat tampilan blog menjadi lebih atraktif dari segi design juga mempermudah pembaca untuk melakukan navigasi saat memilih jenis artikel yang mereka inginkan. 

Design sub laman/sub menu memberikan nilai plus pada blog bila blogger menerapkannya di situsnya masing-masing. Walaupun memang dari pihak google tidak menyediakan template dengan design tersebut di varian standar + gratis di blogger, para blogger bisa mengakalinya dengan menambahkan beberapa script untuk membuatnya.

Simak langkah-langkah membuat sub laman/sub menu di blog secara detail pada penjelasan dibawah ini :

1.  Login di akun blogger Anda.

2.  Pada menu laman, setting tab menu dengan memilih "tab atas".

3.  Berikutnya pada menu Template, klik Edit HTML => Edit Template
     cari kode ]]></skin> agar lebih mudah gunakan Ctrl + F dan letakkan/
     copy kode CSS dibawah ini, tepat diatasnya.

.tabs-inner .widget li ul {

  z-index: 100; position: absolute;
  left: -999em; height: auto; margin: 0; padding: 0;
  border: 1px solid #999999;
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
  -moz-border-radius: 0px; -webkit-border-radius: 0px;
  -goog-ms-border-radius: 0px; border-radius: 0px;
}

.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
  left: auto;
}

.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
  color: #ffffff; background: rgb(51, 102, 153);
}

.tabs-inner .widget li ul a {
  display: block; padding-left: 1.25em; padding-right: 1.25em;
  margin-left: 0px; margin-right: 0px; border: none;
  color: #000000; background: rgb(243, 244, 246);
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
  width: 220px;
}

Perhatian :
kode : border: 1px solid #999999 untuk mengatur setelan garis.
kode : color: #ffffff; background: rgb(51, 102, 153) untuk mengatur warna teks
           & backgroud saat disorot.
kode : color: #000000; background: rgb(243, 244, 246) untuk mengatur warna 
           default teks & background.
kode : width: 220px untuk mengatur lebar sub menu

4.  Proses selanjutnya cari kode <li><a expr:href='data:link.href'><data:link.title/>
     </a></li> dan perhatikan kode <b:/loop> beberapa baris dibawahnya, kemudian 
     letakkan/copy kode CSS berikut ini tepat dibawah kode </b:loop>.

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

  <ul>

    <li><a href='URL'>Sub Menu 1</a></li>

    <li><a href='URL'>Sub Menu 2</a></li>

    <li><a href='URL'>Sub Menu 3</a></li>

  </ul>

</li>

5.  Apabila sudah selesai klik "Simpan Template". Selamat mencoba...

Belum berminat? tak apa, bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!