Cara Membuat Menu Dropdown

Cara Mudah Membuat Menu Dropdown Blog

Haallo sobat kita ketemu lagi pada pembahasan kali saya akan berbagi dan memberiken Tips&Trik Tentang Cara Membuat Artikel Menu Dropdown Pada Blog Sobat,..

Menu Dropdown yang akan saya bagiken pada sobat bentuk Script yang akan tampil seperti pada gambar di samping,. OKy saya tidak akan panjang lebar menjelasken ini itu dan sebagainya,.. langsung kita ke TKP,..


Dan Sebelum Membuat Menu Dropdown Di Blog Copy Dulu Kode Script Di bawah ini:

Arahkan Kursor Sobat Dan Tekan =>> CTLR+C
<center> <div class="bd-chronicl-social"> <ul> <li><a class="twitter" href="#">Cara Membuat Menu Dropdown</a></li> <li><a class="youtube" href="#">Trik Membuat Cewe Cinta Mati</a></li> <li><a class="rss" href="#">Download Facebook Messenger</a></li> <li><a class="facebook" href="#">Kata-kata Mutiara Cinta Sejati</a></li> <li><a class="google" href="#">Tiga Cara Mengambil Screenshot</a></li> </ul> </div> <style type='text/css'> /*<![CDATA[*/ .bd-chronicl-social { width: 300px; margin: -10px; } .bd-chronicl-social ul { margin: 0; padding: 0; } .bd-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; } .bd-chronicl-social ul li a { color: #fff; display:block; } .bd-chronicl-social ul li a:hover { color: #c9c9c9; background-color: #333; } .bd-chronicl-social ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7to6dbuGtbiQGeeCItn3M-PB6jkn6rwjKtLc1l3cpw0csvN7MrPvbvEHQAcT_bZrVfmUYtngTh9TPoN6kSQHpbWBdgGubwD8y2PJEz6BZpHfKNmGCbRlPk6nMHMu6IymjNMbiphyvM/s800/bullet-point-image-8.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 10.5px 35px; } .bd-chronicl-social ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7to6dbuGtbiQGeeCItn3M-PB6jkn6rwjKtLc1l3cpw0csvN7MrPvbvEHQAcT_bZrVfmUYtngTh9TPoN6kSQHpbWBdgGubwD8y2PJEz6BZpHfKNmGCbRlPk6nMHMu6IymjNMbiphyvM/s800/bullet-point-image-8.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 10.5px 35px;} .bd-chronicl-social ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7to6dbuGtbiQGeeCItn3M-PB6jkn6rwjKtLc1l3cpw0csvN7MrPvbvEHQAcT_bZrVfmUYtngTh9TPoN6kSQHpbWBdgGubwD8y2PJEz6BZpHfKNmGCbRlPk6nMHMu6IymjNMbiphyvM/s800/bullet-point-image-8.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 10.5px 35px; } .bd-chronicl-social ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7to6dbuGtbiQGeeCItn3M-PB6jkn6rwjKtLc1l3cpw0csvN7MrPvbvEHQAcT_bZrVfmUYtngTh9TPoN6kSQHpbWBdgGubwD8y2PJEz6BZpHfKNmGCbRlPk6nMHMu6IymjNMbiphyvM/s800/bullet-point-image-8.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 10.5px 35px; } .bd-chronicl-social ul li .pinterest { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7to6dbuGtbiQGeeCItn3M-PB6jkn6rwjKtLc1l3cpw0csvN7MrPvbvEHQAcT_bZrVfmUYtngTh9TPoN6kSQHpbWBdgGubwD8y2PJEz6BZpHfKNmGCbRlPk6nMHMu6IymjNMbiphyvM/s800/bullet-point-image-8.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 10.5px 35px; } .bd-chronicl-social ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsI7to6dbuGtbiQGeeCItn3M-PB6jkn6rwjKtLc1l3cpw0csvN7MrPvbvEHQAcT_bZrVfmUYtngTh9TPoN6kSQHpbWBdgGubwD8y2PJEz6BZpHfKNmGCbRlPk6nMHMu6IymjNMbiphyvM/s800/bullet-point-image-8.png") no-repeat scroll 10px center #C6312B; background-size: 20px; padding: 10.5px 35px; } /*]]>*/ </style>

Pertama=>> Sobat masuk dulu ke Blog sobat ke Sini
Kalau sudah sobat pergi dan klik pada tulisan Tata Letak untuk lebih jelasnya bisa sobat lihat Pada gambar di bawah ini :

Kedua=>> Sobat Klik Tambahkan Gadget dan selanjutnya ikuti petunjuk dan bisa sobat lihat pada petunjuk gambar di bawah ini, setelah muncul jendela seperti gambar di bawah ini kemudian sobat cari Tulisan "HTML/Java Script: dan klik tambahkan:

Ketiga=>> Setelah sobat klik tambahkan, kemudian akan muncul tampilan seperti gambar di bawah ini, Setelah Tampil Kemidian Pastekan Script Yang tadi sobat Copy dan Pastekan Sesuai Petunjuk Pada Gambar Dibawah ini:

KeEmpat=>> Dan Yang Terakhir setelah sobat pastekan Kode Script tadi,.. 

    <li><a class="twitter" href="#">Cara Membuat Menu Dropdown</a></li>

    <li><a class="youtube" href="#">Trik Membuat Cewe Cinta Mati</a></li>

    <li><a class="rss" href="#">Download Facebook Messenger</a></li>

    <li><a class="facebook" href="#">Kata-kata Mutiara Cinta Sejati</a></li>

    <li><a class="google" href="#">Tiga Cara Mengambil Screenshot</a></li>

Kemudian Ganti Kode Yang Berwarna HIJAU Dengan Alamat Link Yang Sobat Suka,..

Dan Yang Berwarna BIRU Ganti Juga Dengan Judul Sesuai Alamat Link Yang Sobat Inginkan Lalu Simpan/Save,..

Dan yang terakhir sobat klik simpan Lagi seperti pentunjuk pada gambar di bawah ini:

Kemudian Sobat Cek Blog Sobat untuk melihat apakah Menu Dropdown yang sobat buat tadi sudah jadi apa belum dan kalau belum sobat cek kembali sesuai pettunjuk Artikel yang saya beriken dari awal sampai akhir,..

Dan sekian trima kasih atas kunjungan agan-agan ke blog saya yang kurang sempurna ini, bila ada kaka-kata dalam penjabaran Artikel tenteng Cara Membuat Menu Dropdown Blog ini saya mohon maaf atas kesalahan dan kekurangnya, maaf beribu maaf yang sebesar-besarnya,...akhir kata saya ucapken trima kasi Wassalamm,.. wr,.. wb,....

Dan semoga Artikel "Cara Membuat Menu Dropdwon" ini, bermanfaat bagi agan-agan senuanya,..

===========================================>> Salam by-karim