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(http://2.bp.blogspot.com/-NOVtmV9lxuE/UCZNmejN9UI/AAAAAAAAFcQ/MU7WpM3s7So/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(http://3.bp.blogspot.com/-Fft27etqbw0/UCZNlU_33RI/AAAAAAAAFcI/EfJ2rskRq5M/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!

Posting Komentar Blogger Disqus

  1. Assalamualaikum...
    Matur nuwun mas infonya, sebagai bloggers yg masih baru ane merasa terbantu dengan info yang mas berikan..
    Sukses selalu buat blog nya mas..
    Mampir ke blog ane mas jika berkenan.. :)
    Wassalamualaikum...

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top