Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Memasang Submenu Navigasi di Template Bawaan Blogspot

Pastinya kamu sudah tahu bahwa template bawaan Blogspot pada keadaan awal sangat minim fasilitas. Seperti belum terpasangnya menu navigasi di atas atau di bawah header Blog. Namun pada template bawaan Blogspot ini kamu bisa memasang menu navigasi tersebut dengan mudah sekali. Sederhananya kamu hanya perlu menambahkan Widget Laman di atas atau di bawah header Blog.

Mungkin ketika kamu jalan-jalan ke Blog kawan Blogger lain, kamu pernah melihat submenu pada menu navigasi di sana. Yaitu ketika kamu menyentuh salah satu menu pada menu navigasi, muncul menu-menu lain di bawahnya (drop down menu) yang merupakan bagian dari menu yang kamu sentuh. Nah jika kamu mau, kamu juga bisa menerapkan submenu ini pada Blog kamu yang menggunakan template bawaan Blogspot.

Submenu Navigasi di Template Bawaan Blogspot

Submenu pada menu navigasi ini merupakan anak atau bagian dari menu utama. Sub menu ini diterapkan pada Blog tidak lain untuk memenuhi kebutuhan pada Blog tersebut. Contohnya pada menu navigasi dalam sebuah Blog terdapat menu "Blogging" yang di dalamnya tentu berisi konten seputar Blogging. Kemudian konten Blogging ini memungkinkan untuk dibagi lagi menjadi beberapa bagian dengan dikelompokkan kembali menjadi kelompok Widget, Template, dan SEO. Maka pembuatan submenu "Widget", "Template", "SEO" pada menu "Blogging" dapat menjadi pilihan yang baik untuk mempercantik atau menambah kemudahan bagi pengunjung dalam menjelajahi Blog.

Jika sebelum kamu membuat Blog, kamu memiliki perkiraan bahwa Blog kamu perlu submenu di dalamnya, maka sebaiknya kamu memilih Template yang bukan bawaan Blogspot yang sudah disediakan submenu di dalamnya. Jika kamu memilih template yang tidak menyediakan submenu, maka kamu harus berkreasi sendiri pada template yang kamu gunakan. Termasuk jika memilih template bawaan Blogspot, kamu bisa mengikuti langkah-langkah berikut untuk menerapkan submenu pada menu navigasi di Blog kamu.

Memasang Submenu Navigasi di Template Bawaan Blogspot

Memasang Menu Navigasi

  • Sebelum menerapkan submenu, pertama yang harus kamu lakukan adalah memasang menu navigasi. Hal ini bisa dilakukan dengan mudah. Namun jika kamu belum tahu caranya, silakan klik disini untuk melihat panduan dalam memasang menu navigasi di template bawaan Blogspot.

Menerapkan Submenu Navigasi

  • Setelah menu navigasi terpasang, barulah kamu bisa menerapkan submenu pada menu navigasi yang baru kamu buat.
  • Login ke akun Blogger kamu masing-masing.
  • Pada Blog yang kamu hendaki, masuk ke bagian Template.
  • Kemudian klik Edit HTML.
  • Dengan menggunakan tombol ctrl+F, carilah kode ]]></b:skin>.
  • Selanjutnya masukan kode berikut di atas kode ]]></b:skin>.

.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: 250px;
}
  1. Kamu bisa menentukan tebal border dan warna border submenu pada kode berwarna merah.
  2. Kemudian warna teks dalam submenu pada kode berwarna biru.
  3. Tentukan juga lebar submenu pada kode berwarna jingga.
  4. Selebihnya dengan script di atas subemenu akan matching dengan menu navigasi.
  5. Selain itu kamu juga bisa berkreasi pada script di atas untuk mengubah tampilan submenu menjadi sesuai selera.
  6. Untuk mencari kode warna, silakan klik disini.
  • Selanjutnya dengan tombol ctrl+F carilah kode <li><a expr:href='data:link.href'><data:link.title/></a></li>.
  • Perhatikan kode-kode di bawahnya, terdapat kode <b:/loop>.
  • Letakan script berikut tepat di bawah kode <b:/loop>.

 <li><a href='#'>Menu1</a>
  <ul>
    <li><a href='http://b-tutorial.blogspot.com/'>Sub Menu 1</a></li>
    <li><a href='http://b-tutorial.blogspot.com/'>Sub Menu 2</a></li>
    <li><a href='http://b-tutorial.blogspot.com/'>Sub Menu 3</a></li>
  </ul>
</li>
  1. Ubahlah kode berwarna merah dengan URL tujuan menu.
  2. Ubah juga kode berwarna biru dengan nama/judul menu.
  3. Jika ingin menambah Menu+Submenu, copy semua kode di atas yaitu dari <li><a href='#'>Menu1</a> sampai </li>, kemudian paste di bawahnya dan edit.
  4. Jika ingin menambah submenu pada salah satu menu, kamu hanya perlu memperbanyak kode ini "<li><a href='http://b-tutorial.blogspot.com/'>Sub Menu 1</a></li>" dan edit.
  • Jika telah selesai, maka klik Simpan Template dan lihat hasilnya kurang lebih akan seperti ini.
Memasang Submenu Navigasi di Template Bawaan Blogspot

Selesai. Semoga pembahasan kali ini bermanfaat. Khususnya bagi kamu yang memilih template bawaan Blogspot, semoga dengan diterapkannya menu dan submenu navigasi, maka menambah fasilitas untuk pengunjung dalam menjelajahi Blog kamu.

Artikel terkait : Memasang Submenu Navigasi di Template Bawaan Blogspot

Artikel B-Tutorial Lainnya :

2 komentar:

  1. Alhamdulillah, akhirnya nemu juga yang pas banget.
    Makasih banyak ya, gan info nya. :)
    Sangat membantu.

    ReplyDelete

Copyright © 2014-2016 B-Tutorial - All Right Reserved