Cara Membuat Menu Dropdown Di Blog

Tips and Trik | Tutorial Blogger | Information | Sharing for All



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.
Judul: Cara Membuat Menu Dropdown Di Blog
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Felix

Terima Kasih Atas Kunjungan Anda...
ViperShare :


47 comments:

  1. Bukan Lempar Batu Sembunyi Tangan,Tapi lempar "kata-kata"...jabat tangan (cara 'bodho' menembus hati konsumen) (bit.ly/18kwNoA) ==>The Power Of Service "Hendrik Ronald".

    -Joko sembung-
    mas sy copas daftar isinya cek deh (bit.ly/18kwNoA)

    ReplyDelete
  2. wah sangat bermanfaat sob, ijin BM buat belajar ntar

    ReplyDelete
  3. wah keren nih mas warna dropdownnya, coba test dulu ya?

    oh ya saya baru dapat trik dari grup facebook nih silahkan dibaca ya http://fajrimansyahshare.blogspot.com/2013/12/cara-daftar-google-adsense-melalui-youtube.html

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. manatappp mapir lagi belajar http://zamancomputer.blogspot.com

    ReplyDelete
  6. mau ganti warna dasarnya, harus ubah script yang mana ya gan?
    mkasih,
    blognya pakar ilmu

    ReplyDelete
  7. makasih gan, kunjungi balik ya http://adf.ly/dvP1F

    ReplyDelete
  8. Makasih gan.. sangat bermanfaat...

    Ayo bergabung bersama Anizan, dan dapatkan dollar yang lumayan tiap harinya... silahkan yang berminat hubungi saya..

    ReplyDelete
  9. wahh terima kasih gan ,,, sekarang akan saya coba ..

    mohon juga komentarnya di blog saya gan..

    ReplyDelete
  10. terimakasih infonya bisa dicoba nih. salam kenal :)

    ReplyDelete
  11. sip. kunjungi ya http://zona-gratiz.blogspot.com/

    ReplyDelete
  12. Keterpurukan hidup membuat saya melakoni pesugihan di PAK MANDALA,sebelumnya saya Mendapatkan no hp aki (082348985714) dari teman yang sudah sukses kaya, saran PAK MANDALA pesugihan yang cocok untuk saya adalah Bank GHAIB, di waktu itu tanpa banyak perhitungan saya ikuti petunjuk dari aki ,saya sudah sangat bingung dengan hutang yang beratus-ratus juta. Untung saja ada PAK MANDALA yang membantu melalui syareatnya. Saya serahkan umur 1 hari saya untuk ritual ini . pada malam pelaksanaan ritual saya merasa sesuatu yang sangat asing,. Karna merasa tak kuat kemudian saya coba melelapkan diri, entah sadar atau tidak saya melihat sosok makhluk tinggi besar yang memberikan saya kain hitam yang berisi uang 50-100rbuan yang sangat banyak setelah benar-benar sadar saya memeriksa kotak hitam yang telah saya persiapkan sebelumnya atas perintah PAK MANDALA ,dan dengan sangat terkejut saya melihat kotak tersebut penuh dengan uang 50-100ribuan sampai ratusan lembAr banyaknya , tanpa ada rekayasa saya membuat kesaksian ini karna semua ini benar-benar saya alami. SUMPAH DEMI ALLAH DAN ATS NAMA KELUARGA Saya ucapkan ribuan terimkasih kepada PAK MANDALA,saat ini hutang saya telah lunas dan saya tlah memiliki toko elektronik yang lumayan besar . sekali lagi saya ucapkan terimakasih yang sangat besar kepada PAK MANDALA dan keluarga.

    ReplyDelete
  13. makasihhh gan ijin copas boleh yaa. buat share ke temen2. tapi ntr sourcenya aku tampilin dari blog agan. visit blog q jg ya gann :)))

    ReplyDelete
  14. yappp udaa bisaa... kalo mau bikin sub menu lagi di dalam sub menu itu bisa gak gan.. jadi misalkan di menu nya judul nya kesehatan trus di buka judul nya kulit nahh sub menu kulit nya itu pas di buka da beberapa postingan misal tentang kulit gatal gatal sama kulit terbakar dll... kayak gitu tau gak gimana caranya?? bagi info donk... btw mampir yakk k blog ane.. tks gan

    ReplyDelete
  15. balas
    kho di template ane nda ada kata" yang harus di cari di langkah ke 5 yah,,,???
    http://krisnabayuaji123.blogspot.com/

    ReplyDelete
  16. Mkasih kaka, saya mngerti,
    mampir juga yah kemari http://katapai.blogspot.com/

    ReplyDelete
  17. KK kok di html saya tidak ada div id='header-wrapper' ?.

    ReplyDelete
  18. Terimakasih ,.. Banyak atas infonya Gan,.
    Sangat membantu, nih,. buat ane yang masih newbie Blogger,.
    Izin share, y?

    ReplyDelete
  19. terima kasih gan atas infonya. oia jangan lupa ya bagi yang suka taruhan bola masuk ke www.itubola.com , itu situs terpercaya gan :D

    ReplyDelete
  20. keren tutorialnya........

    ReplyDelete
  21. header-wrapper nya gak ketemu tuh...
    Gimana gan?

    ReplyDelete
  22. Makasih bos infonya sangat membantu buat saya yang baru mengenal ngeblog,, di tunggu info info lainnya bos…

    silahkan bagi yang memulai usaha baru, tahapan2 untuk memulai sebuah bisnis wajib di ketahui, dimana kita akan mengetahuinya??? Naahh silahkan buka Link berikut boss
    Cara Mendongkrak Nilai Prnjualan Produk bukak aja boss kita memang berhak kog mengetahui semua yang ada di dunia ini…. salam sukses

    ReplyDelete
  23. mas kalau buat menubar lagi gimana

    ReplyDelete
  24. Thanks bro bermanfaat sekali..polo mi ye

    ReplyDelete
  25. susah kali om,kasih tau donk cara yang mudah?

    ReplyDelete
  26. ko punya saya gk bisa ya..?
    coba cek = baskoro321.blogspot.com

    ReplyDelete
  27. Maaf gan numpang tanya, di dalam script HTML ane tidak ada kode
    <'header-wrapper'> yang ada

    <'header-inner'>
    <'comment-popup'>
    <'backlinks-container'>
    <'comment-holder'>
    <'comment-popup'> dan
    <'ArchiveList'>
    gimana nih gan??? jadi ane harus copy paste dimana kode HTML nya???

    ReplyDelete
  28. Thanks bang,,,Mampir jga kesini hnd-g.blogspot.com

    ReplyDelete
  29. terimakasih sob, sangat membantu sekali tutornya

    http://cv-pengobatan.com/pengobatan-alami-kanker-usus/

    ReplyDelete
  30. keren nih..."
    mohon ijin tes d blog ane ya..."

    http://edhay76.blogspot.com/
    http://sahabatedhay.blogspot.com/

    ReplyDelete
  31. gan.."
    mau tanya..."
    kalo pada satu menu tp bayak artikel ketika di klik bagaimana...???"
    misalnya menu "TUTORIAL", d dalam menu tersebut ada banyak artikel yang terkait dengan menu tersebut..."

    balas ya..."

    ReplyDelete
  32. agak membingungkan gan..."
    gx ada cara mudahnya y...???"

    ReplyDelete
  33. Terima kasih ya, mau saya cobain di blog https://myreseppraktis.blogspot.com
    https://macamragammanfaat.blogspot.com
    https://qubelajarblog.blogspot.com

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. AGENSLOT77 Merupakan situs judi slot online yang sudah sangat terkenal di Indonesia.Agenslot77 juga merupakan situs judi yang banyak memberikan Maxwin untuk semua member setianya. Agenslot77 juga selalu memberikan informasi seputar permainan slot online tergacor serta tips,trik & tips untuk mendapatkan kemenangan maxwin.

    ReplyDelete

 
Facebook Twitter Felix Yoga Group

2022 Copyright © ViperGoy Blog | Template Name's : Viper Black White | Template By: Felix Tirtamulia