Cara Membuat Tab Menu Di Blogger

ads

Dalam sebuah blog terkadang dibutuhkan tab menu , Menu di butuhkan biasanya untuk membedakan katagori postingan yang ada dalam blog dengan metode Input Directory, atau bisa juga untuk langsung masuk ke dalam sebuah website diluar blog, yang biasa disebut Output Directory.

Membuat menu di Blogspot memang sedikit ribet, tapi bukan berarti Anda tidak akan bisa memasangnya. Tutorial kali ini akan memberikan solusi bagi Anda yang ingin memasukkan tab menu di Blogspot, ikuti saja saja langkah-langkah sebagai berikut:

• Login dengan Blogger Anda

• Masuk ke dalam Dasbor

• Pilih Template, lalu klik Edit HTML

• klik sembarang tempat di dalam script, untuk mempermudah pencarian tekan CTRL+F hingga keluar kolom Search di kanan atas dalam script HTML

• Pada kolom Search, ketik atau copy-paste script ini: ]]></b:skin>

• Jika sudah ditemukan, copy-paste code script di bawah ini

/*Burastabs Ara*/
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:rgba(235, 235, 235, 0); border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#860e0e; background:#080808;}
#burasbar {width:auto; margin:0 auto;}

Letakkan tepat diatas script ]]></b:skin>

Tahap masukkan script pada template sudah selesai, tinggal tambahkan gadget, memberi nama, lalu masukkan link.
Langsung saja ke tahap berikutnya:

• Pilih Tata Letak di Dashboard
• Pilih Tambahkan Gadget yang berada di bawah Header, lalu pilih HTML/JavaScript dengan cara klik tanda +

NB: Jika Anda sudah memasang gadget yang lain di bawah header, maka harus dipindahkan dahulu gadget sebelumnya). Untuk warna, Anda bisa sesuaikan sendiri.

<div id='burasbar'>
<a class='burastabs' href='paste-kan url halaman di sini#'>Home</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Facebook</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Tutorial</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>About</a>
</div>

Semua tahap sudah selesai, untuk menyempurnakan tampilan pada setiap konten, pastikan terlebih dahulu saat menulis postingan, Anda telah menggunakan Insert Jump Break  agar nantinya saat menggunakan URL seach label postingan Anda tidak ditampilkan semua di beranda, melainkan hanya sebagian saja sesuai di mana Anda menyematkan Insert Jump Break. Namun apabila didalam temlplate Anda sudah dimasukkan target summary post, maka jump break tidak digunakan juga tidak apa-apa.
Semua kode yang sudah berikan bisa Anda ubah sesuai dengan URL yang Anda ingin masukkan, begitu juga dengan nama-nama dalam menunya. Untuk videonya, Anda bisa lihat seperti yang ada dibawah ini.

Share this

Related Posts