Blogger - Membuat Menu Bar Drop Drown

Wednesday, 26 September 2018

Blogger - Membuat Menu Bar Drop Drown

Kembali membahas desain blogger, kali ini membuat menu bar pada Blogger yang disesuaikan dengan keinginan tidak menggunakan menu bar standard yang dikeluarkan gadget Blogger. Menu bar yang dibahas adalah membuat membuat menu bar drop down dimana desain ini pun dapat diterapkan di desain website.

Pada beberapa bulan yang lalu telah dibahas cara membuat menu bar atau menu tab yang standard, yaitu gadget menu bar keluaran blogger, postingan pada tanggal 06 Maret 2018, dengan judul "How To Create Menu Tabs, yang dapat dibaca lagi di sini. Sekarang akan dibahas menu bar cutomize dengan membuat fungsi drop dwonn.

Membuat menu bar drop down, Anda harus membuat css agar menu bar drop dwon berfungsi. Dalam pembahasannya, dari mulai membuat kode css sampai cara memasangnya di template blogger atau tata letak blogger. Yang pertama cara kode css agar menu bar drop down bekerja dengan baik.

Untuk membuat kode css menu dropdown caranya sebagai berikut

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
    overflow: hidden;
    background-color: #32cd32;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    
}

.dropdown-content a:hover {
    background-color: #32cd32;
    color:red;
}

.dropdown:hover .dropdown-content {
    display: block;
    
}
</style>


<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">Profile</a>
  <div class="dropdown">
    <button class="dropbtn">Articles
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Aha Sarang Komputer</a>
      <a href="#">Aha Dua Permata</a>
      <a href="#">Bila</a>
    </div>
  </div> 
</div>

Pada variable layout label div Anda ubah sesuai apa yang Anda inginkan pada judulnya, seperti "home", "profile" dan lain - lain. Begitupun pada kode warna hexsadesimal, dapat diganti dengan warna lain atau pun dengan kode warna rgb. Kemudian kode tersebut simpan di ;

Buka Blogger

Klik "Tata Letak"

Klik edit bar "crosscol"

Kemudian akan terbuka halaman gadgets Blogger, pilih "html/javascript"

Copy paste kode tersebut di sini

selesai

Hasilnya akan seperti di bawah ini:

Preview

Kode tersebut juga dapat di simpat di template, dengan meng-copy kode di bawah <style> dan di atas </style> ke template di bawah skin style. Namun cara ini tidak praktis, jadi sebaiknya Anda yang masih pemula tidak menyimpan di template, karena jika ada kode di template yang tidak sengaja terhapus dengan tidak sengaja dan Anda tidak tahu mana yang terhapus, akan menjadi maslah pada tampilan bloggspot Anda. Jadi menyimpan di "Tata Letak" itu lebih praktis.

Untuk memasang menu bar drop down pada desain website, kode css, yaitu kode antara <style> dan di atas </style> di simpan di bawah </title> dan di atas </head>. Sedangkan kode layout di bawah <body>.

Demikian cara membuat membuat desain kostum atau customize menu bar dengan menggunakan menu bar drop down.

Semoga bermanfaat dan sukses.

Wednesday, 26 September 2018

Blogger - Membuat Menu Bar Drop Drown

Artikel Terkait:

No comments:

Entri Populer

Blog Archive