Tips Cara Buat Menu Dropdownn di Blogger Tips Cara Buat Menu Dropdownn di Blogger - mizipediacom mizipediacom: Tips Cara Buat Menu Dropdownn di Blogger










KATEGORI

LIVE TV

Iklan Semua Halaman

Tips Cara Buat Menu Dropdownn di Blogger

Senin, 27 Februari 2017



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.
Lihat Juga