Sebagai blogger pemula, saya sendiri penasaran bagaimana membuat tab menu yang luwes pada blog saya. Keinginan saya untuk mendaftarkan adsense yang bisa dijadikan bisnis sampingan dan mudah, memberikan dorongan untuk mencari cara bagaimana membuat tab menu yang bisa dibilang layak pada tampilan blog.
Sebagai awal saya membuat tab menu di blog saya yaitu dengan menggunakan label yang saya tempelkan di bagian bawah header blog, akan tetapi hasilnya belum memuaskan. Saya mencari kembali bagimana bisa memiliki blog dengan tampilan menu yang menarik dan saya mendapatkan caranya dengan mudah cukup dengan mengganti template blog (tutorialnya tunggu ya) dengan template SEO gratis yang tersedia di internet. Sangat dinamis, user friendly dan enak dipandang tampilan yang saya dapatkan dengan template gratisan yang tinggal download dan saya upload, hanya saja saya kecewa saat ingin didaftarkan pada google adsense ternyata template tersebut tidak mendukung untuk iklan adsense, dan lagi-lagi pengajuan adsense saya ditolak untuk yang ke sekian kalinya.
Muter muter saya mencari bagaimana mendapatkan kembali menu yang menarik dan mudah pada blog di internet. Terakhir saya menemukan cara menarik yaitu dengan menggunakan Gadget side bar html pada menu layout blog. Untuk Anda yang baru berkenalan dengan dunia blog sekalipun bisa langsung mempraktikan cara ini. Berikut langkah yang bisa Anda lakukan:
Pertama, pastikan kamu sudah login ke blogger milik kamu.
Kedua, Pilihlah menu layout seperti tampilan warna orange berikut
Ketiga, saat muncul tampilan seperti berikut, klik add a Gadget
Keempat, setelah add a gadget di klik maka akan muncul tampilan seperti ini dan klik pada HTML/ Javascript
Keenam, Kamu tidak perlu bingung dengan HTML/Javascript untuk menu dan dropdown menu kamu, cukup kalian bisa "Copy" dan "pastekan kode di bawah ini pada kolom "content" pada taham kelima.
<style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>
<!-- Mulai Area Menu -->
<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="home" href="/">Home</a></li>
<li><a href="https://itsmyshare.blogspot.co.id/p/about.html">About</a></li>
<li><a href="https://itsmyshare.blogspot.co.id/p/blog-page.html">Daftar Isi</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Kampus</a> <ul class="menus">
<li><a href="https://itsmyshare.blogspot.co.id/search/label/Universitas" title="Menus">Universitas</a></li>
<li><a href="#">Jalur Masuk</a></li>
<li><a href="#">Beasiswa</a></li>
</ul>
</li>
<li><a class="sub" href="#">PPG</a> <ul class="menus">
<li><a href="https://itsmyshare.blogspot.co.id/search/label/SM-3T%20%2F%20PPG" title="Menus">PPG SM-3T</a></li>
<li><a href="#">PPG Bersubsidi</a></li>
</ul>
</li>
<li><a class="sub" href="#">Bimbingan Konseling</a> <ul class="menus">
<li><a href="https://itsmyshare.blogspot.co.id/search/label/Materi%20BK" title="Menus">Materi BK</a></li>
<li><a href="#">Software BK</a></li>
<li><a href="https://itsmyshare.blogspot.co.id/search/label/PP%20Keguruan">PP Keguruan</a></li>
<li><a href="https://itsmyshare.blogspot.co.id/search/label/Inspirasi">Inspirasi</a></li>
<li><a href="https://itsmyshare.blogspot.co.id/search/label/Tips">Tips</a></li>
</ul>
</li>
<li><a class="sub" href="#">Teknologi</a> <ul class="menus">
<li><a href="#" title="Menus">Komputer</a></li>
<li><a href="#">Internet</a></li>
</ul>
</li>
<li><a class="sub" href="#">Lowongan</a> <ul class="menus">
<li><a href="https://itsmyshare.blogspot.co.id/search/label/CPNS" title="Menus">CPNS</a></li>
<li><a href="#">BUMN</a></li>
<li><a href="#">PT Swasta</a></li>
<li><a href="#">Sekolah</a></li>
</ul>
</li>
<li><a class="sub" href="#">Bisnis</a> <ul class="menus">
<li><a href="#" title="Menus">Internet</a></li>
<li><a href="#">Batik</a></li>
<!-- Area Dropdown Selesai--> </ul>
</li></ul></nav>
<!-- Area Menu Selesai-->
Jangan Lupa Klik Save
Selamat Tab Menu dan Drop Down Menu Anda telah jadi. Hanya saja kalian perlu mengedit beberapa isi menu dan drop down menu yang kalian inginkan. Kenapa perlu diganti? karena dropdown menu di atas sama persis dengan dropdown menu dengan yang ada di blog ini.
Caranya cukup kalian sebelum tahap ke enam selesai dan klik save, kalian ubahlah terlebih dahulu beberapa hal di atas. Seperti contoh berikut:
<li><a href="http
s://itsmyshare.blogspot.co.id/search/label/Universitas" title="Menus">Universitas</a></li>
<li><a href="#">Jalur Masuk</a></li>
<li><a href="#">Beasiswa</a></li>
</ul>
</li>
Catatan: Ganti tulisan Tebal seperti kampus selaku Menu, Universitas, Jalur Masuk, dan Beasiswa yang disebut dropdown menu. Ganti dengan Keinginan menu dan dropdown menu Anda. Demikian juga untuk menu dan dropdown menu yang lain bisa kalian sesuaikan dengan keinginan menu kalian.
Jika sudah selesai, sesuaikan side bar HTML kalian dan posisikan di atas postingan kalian atau tepatnya di bawah header atau boleh di atas header blog. Kalian bisa coba-coba untuk hal ini.
Untuk memindahkan side bar HTML yang sudah dibuat agar bisa tampil di atas postingan, kalian bisa memindahnya dengan cara klik side bar tersebut dan tahan kemudian drag ke bagian yang kalian inginkan. Contohnya yaitu sebagai berikut:
Misal saya ingin memindahkan sidebar Contributor ke atas page list (anda cari side bar HTML/Javasript yang sudah dibuat). Maka saya akan klik dan drag side bar tersebut, kemudian saya arahkan ke atas page list dan melepaskannya saat sudah di posisi tersebut.
Terakhir adalah jangan lupa cek kembali tampilan menu yang sudah Anda buat, dan ubahlah hingga sesuai dengan harapan Anda. Berikut contoh menu dan drop down menu dari kode script di atas.
Semoga panduan ini cukup membantumu.
Terimakasih http://www.blogbacatulis.com berkatmu saya bisa membuat menunya. Maaf saya copy HTML/Javascriptnya.
Comments