Cara Buat DropDown Navigation Bar Untuk Blogger

by - November 15, 2016

cara buat navigation bar, dropdown menu bar

Ada tak yang guna fungsi pages untuk blog? Kalau yang guna blogger simple template, mereka takda sediakan dropdown navigation bar. Jadi kalau korang nak letak banyak kategori, pages/navigation bar korang akan jadi banyak dan nampak semak. Selain me-minimize-kan navigation bar, fungsi dropdown ni jugak menampakkan blog korang lebih kemas dan teratur! Meh saya share cara buat dropdown navigation bar untuk blogger. Sangat mudah sebab tak perlu usik main template. Kod ini saya dah banyak kali try and error. Terkial-kial jugak nak buat dropdown navigation bar sebab kebanyakan tutorial yang saya cuba semua tak jadi. Asalnya kod ini cuma single navigation bar (tak ingat tutorial dari website mana) tapi at last berjaya juga buat yang dropdown punya.

NOTA PENTING: Sebelum mula pastikan page gadget pada layout di remove terlebih dahulu. (kalau ada)

1. Dashboard > Layout > Add HTML/Javascript
2. Copy dan paste kod dibawah ke dalam kotak html

<style>
#primrose {
     width:100%;
     background:#EFF5FB;
     position:fixed;
     top:0px;
     left:0px;
     padding: 0px;
     z-index:9999; }
#daisy ul {
     float: none;
     display: inline-block;
     margin: 0;
     padding: 0px;
     list-style-type: none;
     font: normal 12px Karla;
     text-transform: uppercase;
     letter-spacing:1px; }
#daisy li {float: none;display: inline-block;}
#daisy li a, #daisy .dropbtn {
     display: inline-block;
     color: black;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none; }
#daisy li a:hover, #daisy .dropdown:hover .dropbtn {background-color: #EFF5FB; }
#daisy li.dropdown {display: inline-block;}
#daisy .dropdown-content {
     display: none;
     position: absolute;
     background-color: #EFF5FB;
     min-width: 160px; }
#daisy .dropdown-content a {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left; }
#daisy .dropdown-content a:hover {color: #000000;font-style:italic;font-weight:bold;border-bottom:0px solid #000;}
#daisy .dropdown:hover .dropdown-content {display: block;}
</style>
<div align="center">
<div id="primrose">
<ul id='daisy'>
<ul>
        <li><a class="active" href="YOUR BLOG PAGE URL">Home</a></li>
        <li><a href="YOUR BLOG PAGE URL">About</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Categories ˅ </a>
<div class="dropdown-content">
       <a href="YOUR BLOG PAGE URL">Travelogue</a>
       <a href="YOUR BLOG PAGE URL">Beauty</a>
       <a href="YOUR BLOG PAGE URL">Books</a>
</div></li>
      <li><a href="YOUR BLOG PAGE URL">Disclaimer</a></li>
</ul></div></div>

3. Klik save dan siap!

Untuk sesi penukaran, korang boleh copy dan paste kod tu dekat SINI dan tukar warna dan font mengikut citarasa korang. Aku sarankan korang tukar yang aku tanda dalam kod sahaja dan yang lain semua tak perlu usik. Dan untuk warna, kalau boleh guna satu warna sahaja untuk mengelakkan kecatatan hehehe!

biru : tukar saiz dan jenis font
merah : tukar warna navigation bar
hijau : tukar kepada link blog page korang

Bagi yang tak tahu :

1. Cara untuk copy page link dan paste dalam kod diatas
Dahsboard > Pages > Klik VIEW untuk page yang dah dibuat > Copy URL

2. Kalau nak terus categorize guna label pun boleh. (untuk blog yang ada label post sahaja)
Klik mana-mana label > Copy URL

NOTA KAKI: Dua cara ni berbeza. Boleh tengok contoh pada blog saya sendiri. Kalau klik PERSONAL, webpage yang keluar terus memaparkan semua post dibawah label PERSONAL. Tapi kalau klik TRAVELOGUE, saya letak pages sebab nak asingkan post which is you need to do it manually. Kira macam buat hyperlink ke entri-entri yang korang nak sahaja.

Kalau ada yang tak faham, jangan malu jangan segan silalah bertanya :)

Harap membantu!

You May Also Like

15 comments

  1. Ooo. Aa, trtny jugak cm mane nk buat :) thx ecaa :)

    ReplyDelete
  2. sebenrnya Unni tak fahm :( but Unni cuba dulu, nnti Unni tnya ya..

    ReplyDelete
  3. Nice tuto :)
    I wish you can write more posts like this since it could be a big help to those who want to design their own blog. and maybe you can add the tuto button on your navi?

    ReplyDelete
    Replies
    1. Great idea. I think I will compile few tutorials that I'm using for someone who want to revamp their own blog! :D

      Delete
  4. Thank you echa for this tutorial! :D
    serious Fatin nak try buat tapi asyik tak jadi :( Thank you, Echa! Ni yang semangat nak edit blog ni hehe :D

    ReplyDelete
    Replies
    1. try la buat. tp kalau tak jadi inform me tau :)

      Delete
  5. Wah! Thank you akak for the tutorial! Dah lama nak buat dropdown navi ni tapi asyik tak jadi je haha

    ReplyDelete
  6. tutorial yang bakal memanfaat ramai blogger...ini sesuai untuk template standard ya?

    ReplyDelete
  7. hakak bab coding2 ni fail.. kena tenung hari2 baru ok.. hahaha org2 muda terror bab2 ni.. salam perkenalan dari MamaJue

    ReplyDelete
  8. JALAN2

    https://belogsjm.blogspot.my/2016/11/backlink-1.html

    ReplyDelete
  9. Sejak main wordpress, dah lama tak main coding2 nie.. ehehe

    ReplyDelete
  10. thanks echa ! moi dah lama cari tuto ni. tapi tak reti buat haha, moi nak try la :D

    ReplyDelete