Skip to main content

Cara Membuat Menu Dropdown Di Blog

Cara Membuat Menu Bar Dropdown Horizontal Di Blog Dengan Mudah dan Keren SEO Friendly

Kembali lagi di ViperGoy Blog. Pada kali ini saya akan membahas tentang Cara Membuat Menu Dropdown Di Blog. Setelah artikel Cara Membuat Menu Di Blog, yang tanpa Efek Dropdown atau menu yang jatuh kebawah, kali ini saya akan membahas Cara Membuat Menu Dropdown Di Blog Dengan CSS. Jika anda melihat hasil pencaharian dengan " Cara Membuat Menu Dropdown Di Blog Tanpa Edit HTML " itu sama tidak akan membuat Menu - Menu Blog anda terindeks oleh Google. Tapi itu tergantung selera saja, saya hanya mengajarkan yang baik bagi saya sendiri saja. Oke lanjut.

Kode CSS Menu Dropdown ini sama seperti Menu Template Zikazev Blue dari Kang Ismet dengan beberapa pengeditan. Semoga Kang Ismet dan Para Fansnya bisa mengerti dan Tidak Demo disini. Hehehe.. Oke langsung saja ya. Cekidott......

Cara Membuat Menu Bar Dropdown CSS Pada Blog :

1. Buka Blogger Home kalian.
2. Kemudian pilih Template » Edit HTML.
3. Lalu Cari Kode <b:skin><![CDATA[/*
4. Kemudian Copy Kode dibawah ini dan Paste di BAWAH kode <b:skin><![CDATA[/*

#menu{background:#444;border:1px solid #222;color:#fff;height:42px;font-family:'Oswald', Arial, sans-serif;width:970px;margin:0 auto;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:42px;width:980px}
#menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal}
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 -1px 0 #222;}
#menu li a{border-right:1px solid #222;}
#menu li a:hover {color:#fff;background-color:#222;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#444;border-top:1px solid #222;border-left:1px solid #000;border-bottom:1px solid #000;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#f0f0f0 transparent transparent transparent;position:absolute;top:16px;right:9px}
#menu ul.menus a:hover{background:#222;color:#fff}

5. Kemudian Copy Kode HTML dibawah Kode <div id='header-wrapper'>

<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Disclaimer</a></li>
<li><a class='dropdown'>Contact</a>
<ul class='menus'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Pinterest</a></li>
</ul>
</li>
<li><a href='http://vipergoy.blogspot.com/'>ViperGoy Blog</a></li>
</ul>
</nav>

Keterangan :
Untuk Membuat Menu Baru :
<li><a href='URL-HALAMAN'>TEXT</a></li>

Untuk Membuat Menu Dropdown :
<ul class='menus'>
<li><a href='URL-HALAMAN'>TEXT</a></li>
<li><a href='URL-HALAMAN'>TEXT</a></li>
</ul>
</li>

6. Kemudian Save / Simpan.

Beberapa dari kalian memang agak sulit untuk mengubah ini, tetapi saya bisa membantu anda bagi yang belum bisa dengan cara Message Facebook saya yang ada di bawah / footer blog ini.

Bagaimana Panduan Membuat Menu Dropdown Pada Blog ini ? Cukup menarik dan mudah bukan ? Setelah Membuat Menu Blog jangan lupakan untuk membaca Tutorial Blogger lainnya seperti
Cara Mengetahui Harga Blog
Cara Membuat Scroll Pada Widget Blog
Cara Mengganti Background Blog
Serta untuk tidak ketinggalan dengan Koleksi Template Blog Keren yang saya punya.

Oke, Sekian dari Paman ViperGoy untuk artikel yang berjudul Cara Membuat Menu Horizontal Di Blog Dengan Mudah. Semoga anda dapat mendapatkan Pemecahan Masalah bagi Blog anda. Terima Kasih semua.
Labels:

Comments

Post a Comment

Popular posts from this blog

MEMBUAT BLOG DI TERIMA ADSENSE

Membuat blog langsung di terima Google adsense atau sekali daftar langsung diterima oleh Google Adsense adalah idaman para blogger pemula. Karena Masa depan dari para publisher adalah mendapatkan bayaran dari iklan yang di tempatkan di Blog. Saya pun dulu seperti itu . Ada semangat ngeblog ketika blog yg kita miliki terpampang iklan iklan dari GA.  Walaupun ada banyak situs pengganti google adsense yg juga bayar mahal namun GA tetap menjadi pilihan paling utama .  Google adsense masih menjadi Favorit di urusan mendapatkan penghasilan dari internet Baca Juga ; Alasan Blog Di Tolak Google Adsense Untuk bekerja sama dengan Google adsense ada ketentuan ketentuan dasar yg harus Blogger mania ketahui kemudian terapkan. Walaupun ada banyak cara untuk mendapatkan adsense, Baik itu youtube atau ad mob tetapi disini kita bicara tentang Google adsense di Blog. Ketentuan inilah yg nantinya akan menjadi kebijakan yg dinilai oleh google apakah Blogger mania mengikuti atura...
Post a Comment
Read more

Cara Memperkecil / Mengurangi Pemakaian Memori RAM Mozilla FireFox Dengan Firemin

Cara Memperkecil Pemakain Memori RAM Mozilla FireFox Dengan Firemin Mozilla Firefox dikenal sebagai salah satu browser terpopuler di dunia. Banyak sekali pengguna FireFox yang menggunakan browser buatan Mozilla tersebut sebagai default Browser. Kelebihan dari browser FireFox ini memiliki banyak adds-on, cepat, dan juga memiliki banyak pilihan derivatif seperti CyberFox, Palemoon, Dan sebagainya. Namun, dibalik semua kelebihan tersebut, Firefox memiliki beberapa kelemahan. Salah satu kelemahan dan FireFox adalah penggunaan memori RAM yang cukup besar. Untuk pemakaian standar saja FireFox bisa tembus memakan RAM hingga mencapai kurang lebih 200 MB. Mozilla sendiri sudah berusaha meng- improve  browser miliknya, namun tetap saja masih terasa besar.  Tetapi sekarang kalian tidak perlu khawatir, karena sekarang sudah ada sebuah aplikasi portable yang dapat mengurangi / reducing  pemakain memori dari Mozilla Firefox. Aplikasi mini tersebut bernama Firemin.  Berikut adala...
Post a Comment
Read more

Cara Mengganti Template Blog

Kembali lagi di ViperGoy Blog . Pada artikel ini, saya akan memberikan artikel tentang  Cara Mengganti Template Blog . Mungkin anda bingung dengan Mengganti Template Blog . Ya, pada tampilan baru blogger, memang sangat bingung untuk Mengganti Template Blog karena tempatnya sudah berubah - ubah. Namun, jangan cemas untuk para blogger yang ingin Mengganti Template Blogn ya. Caranya sangat mudah sekali, tetapi ikuti langkah-langkah yang ViperGoy berikan. Cekidot... Cara Mengganti Template Blog : Langkah Pertama : Silahkan Buka Link ini "  http://blogger.com/  " Langkah Kedua : Anda akan melihat tampilan seperti ini. ( Lihat Gambar ) Langkah Ketiga : Klik pada Menu Dropdown , dan pilih " Template ". ( Lihat Gambar ) Langkah Keempat : Setelah itu akan muncul tampilan seperti ini. ( Lihat Gambar ) Langkah kelima : Lalu, Lihat pada Kanan Atas kalian, ada tombol seperti ini. ( Lihat Gambar ) Langkah Keenam : Lalu akan muncul tampilan seperti ini. ( Lihat Gambar ) Ketera...
Post a Comment
Read more