Tips Cara Buat Menu Dropdownn di Blogger




Tips Cara Buat Menu Dropdownn di Blogger
Tips Cara Buat Menu Dropdown di Blogger



Pada artikel yang kesekian kalinya, saya akan memberikan trik dan panduan tentang Cara membuat menu dropdown di Blogger.

Nah kita pasti tau manfaat dari menu nvigasi ini sangat lah penting. Apa lagi jika anda ingin mendaftar kan blog anda ke google Adsense, pasti nya syarat di terima nya blog adalah salah satunya kelengkapannya harus memiliki tombol Navigasi. Tujuannya agar para pengunjung  tidak akan kebingungan untuk mencari judul Artikel Anda. Yuk langsung saja ikuti.!!!


Langkah-langkah membuat menu Dropdown di Blogger 

  • Pertama yang perlu Anda lakukan yaitu masuk ke dashboar blogspot Anda, lalu pilih Tata Letak dan klik "Tambahkan HTML". Lihat gambar berikut ini.

  • Selanjutnya akan muncul dan terbuka jendela baru, kemudian pilih "HTML", lihat gambar berikut ini.

  • Kemudian akan muncul sebuah kotak kosong, dan anda bisa mengisinya kode HTML Menu,, lihat gambar berikut.
  • Setelah itu,  silahkan Anda copy code yang sudah saya sediakan di bawah ini untuk di masuk kan ke dalam kotak yang kosong seperti contoh gambar di atas..kemudian lalu pastekan code HTML pada bagian kotak kosong , Untuk lebih jelasnya lihat gambar berikut ini.
  • Jika sudah anda pastekan..jangan lupa di save ya.
  • Selanjutnya anda letakan menu dropdown nya di bagian atas postingan..
Code script nya
<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="#">About</a></li> <li><a href="#">Daftar Isi</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Login Admin</a></li> <!-- Mulai Area Menu Dropdown --> <li><a class="sub" href="#">Menus</a> <ul class="menus"> <li><a href="#" title="Menus">Menus 1</a></li> <li><a href="#">Page</a></li> <li><a href="#">Menus2</a></li> <li><a href="#">Menus 3</a></li> <li><a href="#">Menus 4</a></li> <li><a href="#">Menus 5</a></li> </ul> </li> <!-- Area Dropdown Selesai--> </ul> </nav> <!-- Area Menu Selesai-->
Note: ganti tanda "#" dengan URL Blog Anda
ganti Menus 5 sesuai nama yang ingin anda buatkan.


Sampai disini dulu penjelsaanya
Jika ada yang kurang jelas dan salah
Mohon di maklumi karena saya masih belajar­čśü.
Semoga bermanfaat untuk para blogger. Thankss.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect