Tambahkan CSS3 Drop Down Menu Untuk Blogger

CSS3 Menu adalah cara terbaik untuk mengatur link penting di blog Anda agar terlihat rapi. CSS3 Menu juga membantu pembaca Anda untuk menavigasi melalui blog dengan mudah.
Tambahkan CSS3 Drop Down Menu Untuk Blogger Anda juga meningkatkan keindahan blog Anda bahwa mengapa Navigasi Menu memainkan peran penting dalam meningkatkan blog Anda SEO atau lalu lintas di blog.
Saya sedikit banyak telah berbagi Menu tetapi yang satu ini sedikit berbeda dari sebelumnya juga keuntungan terbesar dari menu ini adalah terbuat dari CSS3 murni dan hanya dua gambar kecil yang digunakan dalam menu ini sehingga menu ini tidak akan mempengaruhi pada blog Anda pada saat waktu pemuatan. Jadi mari kita lihat bagaimana untuk menambahkannya ke blogger blog? Sebelumnya silahkan demonya di bawah ini!

Live Demo ▼

---

Tambahkan CSS3 Drop Down Menu Untuk Blogger

---

Untuk cara Menambahkan atau Membuat CSS3 Drop Down Menu Untuk Blogger ini juga sangatlah mudah untuk caranya Anda bisa ikuti instruksi berikut ini:

1. Pergi ke Akun blogger Anda.

2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget.

3. Pilih elemen HTML/Java Script.

4. Lalu copy kode css berikut dan letakkan ke dalam elemen HTML/Java Script tadi.

<style> /*Start Css Menu*/
.menu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;
}

.menu ul {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3R5by_o1wfftFGexYHdgy-f8zm1RwP4wc0IVIF9TXanymlHqurQbLTWP33Oeaz5S8gm1W0OtkIg0nI_ViwhmLYWItN9TraOaZi_xTykwfggt6Gc5kxDwr4EN5M_YEbERauVwXXXdwDk/s1600/otowebsite.blogspot.com-menu-bg.gif) top left repeat-x;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
    padding: 0px 8px 0px 8px;
}

.menu li a {
    color: #666666;
    display: block;
    font-weight: bold;
    line-height: 43px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
}

.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

.menu li ul {
    background: #e0e0e0;
    border-left: 2px solid #a80329;
    border-right: 2px solid #a80329;
    border-bottom: 2px solid #a80329;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul {
    display: block;
}

.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.menu p {
    clear: left;
}

.menu #current {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJjjEZtRSYo309U6QCfVwlUtADxmtEtvBL6q-90jdHOgPC5q5MIJ8PZGa7ntiGFnrOuLGX1Bun6iWSTTUpt1MVoda4CbtCf11aWbumqXK_L0fCnOASgj07oG1BVVqsb8iB1Xbj1b6kFTI/s1600/otowebsite.blogspot.com-current-bg.gif) top left repeat-x;
    color: #ffffff;
}

/*End Css Menu from http://www.otowebsite.blogspot.com/*/
</style> 


<div class="menu">
 <ul>
  <li><a href="#" id="current">Home</a></li>
  <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">FAQ</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li><a href="http://www.otowebsite.blogspot.com/">Create This</a></li>
 </ul>
</div>​

5. Sebelum menyimpan sebaiknya Anda lakukan sedikit perubahab pada css di atas.

Sekarang ganti tanda # dengan link Anda sendiri.
Mengganti teks menu dengan teks menu Anda sendiri yang ingin ditampilkan pada menu.

---

Kustomisasi

---

Catatan - saya sangat menyarankan Anda untuk menggunakan OW HTML Editor untuk membuat perubahan.
Anda dapat melihat live preview dari menu Anda dengan menggunakan OW HTML Editor, Copy semua kode diatas dan paste ke editor..

---

Selanjutnya Bantuan?

---

Banyak pemula blogger mendapat masalah saat menambahkan link dan texts. Jika Anda mendapatkan masalah yang sama maka Anda cukup menghubungi saya melalu komentar Saya akan berusaha secepat mungkin menjawab pertanyaan Anda.

---

Drop Down Menu Lainnya . . .

---

Anda juga dapat melihat dan menggunakan Drop Down Menu lainnya yang berada pada artikel Oto Website!