Cara membuat menu Drop Down Sekaligus Memasukkan Postingan Ke Dalam Kategori Menu

halo sobat, saya sempet-sempetin share nih walaupun lagi UAS.
Berhubung ada sobat blogger yang lagi bingung memasukkan postingan kedalam kategori menu, saya akan bagi Tips nih Cara membuat menu Drop Down Sekaligus Memasukkan Postingan Ke Dalam Kategori Menu. Disimak ya !

yang harus sobat lakukan pertama yaitu membuat Menu Drop Down terlebih dahulu, tapi jika sobat udah ada menu drop downnya tinggal lanjutin aja ke langkah selanjutnya.

Cara membuat Menu Drop Down :

akan saya bagikan cara yang sangat mudah untuk membuat menu drop down, sobat hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK :

(Untuk jaga-jaga silahkan unduh semua template sobat)

1. Login ke blog sobat->pilih Template->edit Html. lalu cari kode ]]></b:skin> (gunakan C+F untuk memudahkan pencarian.Setelah ketemu masukkan kode dibawah ini tepat diatas kode ]]></b:skin>.

#DropdownMenu {
    background:#ff6803;
border-radius:6px;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#FFFFFF;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;


} 
#Dropdownbox {
    width: 875px;
border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#strike { 
border-radius:6px;
    margin: 0;
    padding: 0;
}
#strike ul {
border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li {
border-radius:6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
    color:#FFFFFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
    background:#FFFFFF;
    color:#ff6803;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
      background:#ff6803;
    width: 150px;
    color:#FFFFFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
     background:#FFFFFF;
    color:#ff6803;
    padding: 7px 10px;
}
#strike li {
border-radius:6px;
    float: left;
    padding: 0;
}
#strike li ul {
border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#strike li ul a {
border-radius:6px;
    width: 140px;
}
#strike li ul ul {
border-radius:6px;
    margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
    left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
    left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
    position: static;
}

Untuk kode #ff6803 itu adalah warna orange yang menjadi warna background dari menu ini, silahkan diganti bila memang sobat ingin mengganti sesuai warna kesukaan sobat.

Untuk kode #FFFFFF itu adalah warna tulisan dari menu ini, silahkan diganti bila memang perlu. Untuk kode warna sobat bisa cari di Google.

jika sudah selesai klik simpan.

2. sekarang kita menuju TATALETAK->pilih tambah gadget->+html/javascript. lalu masukkan kode dibawah ini ke kolom yang telah disediakan.

<div id="DropdownMenu">
       <div id="Dropdownbox">
      <ul id="strike">
<li><a href="#">FansPage kami</a></li>
<li>
          <a href="#">Kategori</a>
          <ul>
<li>
              <a href="#">Tips n Trik</a>
              <ul>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
</ul>
</li>
<li><a href="#">Parkour</a></li>
<li><a href="#">Hacking</a></li>
<li><a href="#">Lain-Lain</a>
           </li>
</ul>
<li>
          <a href="#">Video</a>
          <ul>
<li>
              <a href="#">Hiburan (Lucu)</a>
              <ul>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
</ul>
</li>
<li><a href="#">Aksi (Beladiri)</a></li>
<li><a href="#">Video Parkour</a></li>
<li><a href="#">Submenu4</a></li>
</ul>
<li>
           <a href="#">Download</a>
          <ul>
<li>
              <a href="#">Utility</a>
              <ul>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
</ul>
</li>
<li><a href="#">Antivirus</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Lagu</a></li>
</ul>
<li>
           <a href="#">Materi TKJ</a>
           <ul>
<li>
              <a href="#">Perakitan</a>
              <ul>
<li><a href="">Jangan diisi</a></li>
<li><a href="">jangan diisi</a></li>
<li><a href="">jangan diisi</a></li>
</ul>
</li>
<li><a href="#">Perbaikan</a></li>
<li><a href="#">Perawatan</a></li>
<li><a href="#">Jaringan</a></li>
</ul>
<li>
          <a href="#">Contact Me</a>
          <ul>
<li>
              <a href="#">Facebook</a>
              <ul>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
<li><a href="">Jangan diisi</a></li>
</ul>
</li>
<li><a href="#">Google+</a></li>
</ul>
</li>
</ul>
</div>
</div>

Sobat bisa ganti kata (Menu Fanspagekami,kategori,video dsb) dengan kategori menu sobat, serta ganti kata (Submenu Tips n Trik,parkour,hacking,utility dsb) dengan submenu sesuai dengan label kategori menu sobat. (untuk tulisan 'Jangan diisi' itu biarin aja karna gak berfungsi)

untuk kode "#" slahkan ganti dengan alamat link sobat atau sesuai dengan link label sobat.

jika selesai klik simpan.

Bila Sobat melakukannya dengan benar, maka seharusnya tampilan menu akan seperti yang ada pada contoh. Namun bila berbeda, coba sobat perhatikan kembali langkah-langkah di atas.

Contoh Gambar :

Sekarang Memasukkan Postingan kedalam kategori menu yang sudah sobat buat tadi.

1. Buat label pada tiap postingan sesuai dengan tema postingan sobat.

contoh : saya punya label 'Utility', seluruh postingan yang berisi tentang Utility/software saya beri label Utility. hasilnya akan seperti pada gambar :

setelah itu sobat masuk tataletak->tambah gadget->pilih +label. atur settingan label lalu klik simpan. label akan muncul pada sidebar sobat. buka blog sobat lalu klik label 'Utility' yang ada pada sidebar blog sobat, sobat akan dibawa ke halaman yang berisi tentang Utility saja. copy URL yang ada pada bagian atas web browser sobat. lalu masukkan pada kategori menu yang ada dimenu drop down (untuk caranya sobat bisa lihat langkah-langkah diatas tadi).

Selesai ^_^ menu sobat yang udah dikategorikan menurut label sudah tampil, silahkan di Cek dengan membuka blog sobat lalu klik kategori menu 'Utility'(Contoh).

okeh Sekian dulu Artikel saya yang sangat panjang kali ini, semoga bermanfaat dan Sukses ^_^

Update :

Untuk yang masih bingung cara ngambil url labelnya lihat gambar dibawah ini deh :

Klik label Utility

Lalu sobat akan dibawa menuju ke halaman khusus label Utility, copy Url labelnya seperti pada gambar

lalu sobat masuk ke tataletak->edit tempat sobat naruh menu drop down lalu pastekan seperti pada gambar.

begitulah caranya, lakukan seperti cara berikut untuk label lainnya.

Tambahan : sidebar itu letaknya disamping kanan/kiri/bawah/atas postingan (itu menurut ane) dan biasanya sidebar digunakan utk naruh widget/iklan dll pada blog sobat ^_^

Kalau kurang jelas silahkan Comment ^_^

/[ 22 komentar Untuk Artikel Cara membuat menu Drop Down Sekaligus Memasukkan Postingan Ke Dalam Kategori Menu]\

Uno Gates mengatakan...: Thanks gan..
ilmu yang agan berikan baru aja aku praktikkan dan sukses
terimakasih banyak infonya gan
jaya terus

kunbalya
strenght-of-the-world.blogspot.com; 7/07/2013 9:41 PM
Alfian mengatakan...: oke makasih sob ^_^

siap menuju blog sobat :); 7/07/2013 10:14 PM
Muh Subli Ramadhan mengatakan...: Manta gan (h) baru ketemu ni trik yang saya cari; 7/18/2013 11:16 AM
Unknown mengatakan...: cara itu seperti yang abang terapin di blog abang sendiri ya ??; 7/20/2013 2:21 PM
Alfian mengatakan...: Sipp (y) makasih dah berkunjung ^_^ semoga berhasil :); 7/20/2013 6:43 PM
Alfian mengatakan...: iya sob :) kan berbagi ilmu itu harus gak boleh menyesatkan, minimal kita udah pernah praktekin ilmu itu :)
Thanks atas kunjungannya ^_^; 7/20/2013 6:45 PM
Anonim mengatakan...: Maaf bang, kok punya saya ga bisa ya..?

itu labelnya aneh di tempat saya, mohon bantuannya bang..; 7/27/2013 5:19 PM
Alfian mengatakan...: boleh minta alamat blognya ? biar saya liat dulu; 7/28/2013 1:23 PM
Zaki Sipahutar mengatakan...: thanks gan...
kmren gw download template.. tp gk tau cara ngubah dropdown nya..
skrg udah bisa :D thanks masbro..; 7/28/2013 8:53 PM
Alfian mengatakan...: oke sama" sob :) semoga sukses selalu ^_^; 7/28/2013 9:24 PM
Alpaka mengatakan...: Thanks ya..
Sangat bermanfaat dan terbukti bekerja tipsnya
Terus berkarya ya; 7/31/2013 3:46 AM
Alfian mengatakan...: iya sob :) thanks juga udah mampir dan berkomentar ^_^; 7/31/2013 8:21 AM
theauthor01 mengatakan...: Ada cara lain nggak?
Kalau ada share juga ya. :); 8/13/2013 1:03 PM
Alfian mengatakan...: iya sob kalo ada waktu dan kesempatan :); 8/14/2013 3:42 PM
Anonim mengatakan...: Hello, I think your website might be having browser compatibility issues.
When I look at your website in Safari, it looks fine but when opening in Internet
Explorer, it has some overlapping. I just wanted to give
you a quick heads up! Other then that, excellent blog!

Also visit my homepage extreme weight loss; 11/24/2015 3:30 AM
Anonim mengatakan...: This post offedrs cler idea designed for thhe new viewers of blogging, that really
how to do blogging.; 7/09/2017 1:13 PM
Anonim mengatakan...: Heya i am for the first time here. I came across this board and I find It
really useful & it helped me out much. I hope to give something back
and aid others like you aided me.; 7/19/2017 1:04 PM
Anonim mengatakan...: This is my first time visit at here and i am in fact happy to read all at one place.; 8/02/2017 12:52 AM
Anonim mengatakan...: I'm very happy to read this. This is the type of manual that needs
to be given and not the accidental misinformation that's at the other blogs.
Appreciate your sharing this best doc.; 10/08/2017 2:44 PM
Anonim mengatakan...: We're a gaggle of volunteers and starting a new scheme in our community.
Your web site provided us with useful info to work on. You've done an impressive job and our whole community will probably be
grateful to you.; 10/11/2017 8:11 PM
Anonim mengatakan...: Hey there, You have performed an incredible job. I will certainly digg it and in my view suggest to my friends.
I'm sure they will be benefited from this site.; 10/16/2017 2:58 PM
Anonim mengatakan...: Hi there every one, here every person is sharing
suchh knowledge, so it's pleasant to read this website, and
I used to pay a visit this blog everyday.; 1/01/2018 8:01 AM

Posting Komentar

Silahkan memberikan Kritik/Saran, Pujian dll melalui Kotak komentar.
#No Spam
#No Sara
#No Promosi

#Blog ini Dofollow
*Jika berniat mencari Backlink, carilah dengan Bijaksana dengan berkomentar yang sesuai dengan isi Artikel dan dengan menggunakan open-id/NameUrl. Jangan Spam didalam komentar*

Cara membuat menu Drop Down Sekaligus Memasukkan Postingan Ke Dalam Kategori Menu

Posting Komentar

Translate

Artikel Terpopuler

Site Info

Statistik