cara membuat menu di blogspot ~ Madrasah Tercinta

Saya adalah blogger pemula dengan pengetahuan yang bisa dibilang nol, hanya bermodal browsing di google dan mempraktikkan beberapa informasi yang saya dapat. Terkadang gagal dalam mempraktikkannya, dan terkadang pun berhasil. Saat gagal dalam praktik terkadang ada rasa malas untuk mengetahui hal baru ini, akan tetapi karena rasa penasaran, saya terus berusaha sampai ketemu apa yang apa yang saya cari.

Menu membuat tampilan blog kita menjadi lebih menarik, selain itu menu juga sebagai klasifikasi postingan atau tautan yang kita buat. banyak sekali cara untuk membuat menu, ada yang menggunakan setelan bawaan blog, ada juga yang membuat sendiri dengan edit html, dan menggunakan kode css. menu pun banyak macamnya tergantung dengan selera masing-masing, ada yang menggunakan dropdown menu yang menampilakan sub menu dan sub sub menu, ada juga yang hanya menggunakan menu standar tanpa adanya menu dropdown, ada pula yang menggunakan menu dropdown seperti yang ada di blog ini.

Dari beberapa yang saya baca, entah dari internet atau dari buku-buku. Menurut saya ada 3 membuat menu di blogspot. Cara-cara ini sangat cocok bagi pemula seperti saya:

1. Dengan tambah laman/page

menambahkan menu dengan cara ini bisa dikatakan cara yang paling mudah karena hanya menggunakan tamplete bawaan dari blogspot saja. akan tetapi ada kelemahannya, yaitu kita tidak bisa menggunakan dropdown menu, hanya bisa buat menu vertikal saja. walupun masih terbatas tapi ya masih menarik hehehehe.

a. Anda masuk pada blog anda

b. Pilih tata letak, kemudian tambah gadjet yang berada di atas postingan seperti di bawah ini

c. Ketika anda sudah melakukan langkah b maka akan muncul jendela seperti ini, pilihlah laman/page

d. Pilihlah tambahkan tautan eksternal

e. Isi lah halaman judul dengan menu yang anda inginkan, untuk alamat web isi dengan url blog. Saya memberi saran agar anda menggunakan url label saja karena semua tautan anda yang mempunyai label sama akan secara otomatis masuk pada menu tadi, kalau anda hanya menggunakan url blog maka anda masih akan memasukkan tautan anda secara manual. Untuk mendapatkan alamat url label anda bisa lihat di postingan blog anda, di sisi paling bawah ada label, klik kanan nama label dan Copy Link location dan pastekan di alamat web tadi, kemudian klik simpan. Selesai, anda bisa lihat blog anda

2. Menggunakan Javascript/HTML

Langkahnya hampir sama, pilih tata letak, kemudian tambah gedjet akan tetapi kali ini tambahkan HTML/Java Script dan pastekan kode di bawah ini pada konten, dan biarkan biarkan judulnya kosong. menambahkan menu dengan cara ini juga tidak bisa untuk dropdown, kalaupun bisa harus menambahkan lagi kode css. nurut saya malah agak ribet.

<ul>

</ul>

</div>

Keterangan, silahkan ganti yang berwarna merah.

url blog : url blog anda contoh “http://example.blogspot.com”

url label : url label blog anda yang cara mencarinya sudah ada di atas tadi

hal ini dimaksudkan agar postingan yang anda labelnya langsung secara otomatis ke menu.

Untuk menambah menu, silahkan copy saja

3. Dengan Edit HTML

cara ini bisa dibilang cara yang paling sempurna karena kita bisa membuat menu sesuka hati kita, mau menu vertikal atau dropdown bisa kita buat, tinggal menyesuaikan selera saja.
membuat dropdown menu di letakkan di atas script ini.
caranya
a. masuk blog
b. klik tema atau lay out
c. edit html dan cari kode berikut <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'> atau div class='main-outer'>. karena setiap blog mempunyai kode yang berbeda-beda, cari yang sesuai dengan blog mili anda. untuk memudahkan pencarian klik di tengah html dan Ctrl F masukkan salah satu kode dan letakkan di atasnya.

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li { height:30px; border-top:1px solid #fff; }

#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<li><a href='https://solusisimpatikaemis.blogspot.com/'>Beranda</a></li>

<li><a href='url anda '>Daftar isi</a></li>

</ul>

</li>

</ul>

</li>

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

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

<li><a href='#'>Privacy Police</a></li>

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

</ul>

</li>

</ul>

</div>

silahkan anda ganti url anda.

terima kasih telah berkunjung

Madrasah Tercinta

Wednesday, 22 November 2017