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 TM

Terima Kasih Atas Kunjungan Anda...
ViperShare :


52 komentar:

  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)

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

    BalasHapus
  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

    BalasHapus
  4. masih kesulitan,maklum newbe,hikhik

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. tengkyu gan...mampir di blog ane ya

    BalasHapus
  7. manatappp mapir lagi belajar http://zamancomputer.blogspot.com

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

    BalasHapus
  9. makasih gan, kunjungi balik ya http://adf.ly/dvP1F

    BalasHapus
  10. Mantap gan and bermanfaat....

    BalasHapus
  11. Makasih gan.. sangat bermanfaat...

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

    BalasHapus
  12. wahh terima kasih gan ,,, sekarang akan saya coba ..

    mohon juga komentarnya di blog saya gan..

    BalasHapus
  13. terimakasih infonya bisa dicoba nih. salam kenal :)

    BalasHapus
  14. sip. kunjungi ya http://zona-gratiz.blogspot.com/

    BalasHapus
  15. 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.

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

    BalasHapus
  17. 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

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

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

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

    BalasHapus
  21. kunjungan perdana
    klw bisa kunbal gan.

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

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

    BalasHapus
  24. keren tutorialnya........

    BalasHapus
  25. header-wrapper nya gak ketemu tuh...
    Gimana gan?

    BalasHapus
  26. 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

    BalasHapus
  27. mas kalau buat menubar lagi gimana

    BalasHapus
  28. thanks informasinya yaa
    kunjungi blog kami www.168sdbet.com

    BalasHapus
  29. Thanks bro bermanfaat sekali..polo mi ye

    BalasHapus
  30. susah kali om,kasih tau donk cara yang mudah?

    BalasHapus
  31. ko punya saya gk bisa ya..?
    coba cek = baskoro321.blogspot.com

    BalasHapus
  32. 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???

    BalasHapus
  33. Thanks bang,,,Mampir jga kesini hnd-g.blogspot.com

    BalasHapus
  34. terimakasih sob, sangat membantu sekali tutornya

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

    BalasHapus
  35. maaf juragan numpang link. terimakasih sebelumnya,


    http://detexsi.com/2014/12/resep-cara-membuat-cilok.html

    http://detexsi.com/2015/02/manfaat-vitamin-e-untuk-kesehatan.html

    http://www.detexsi.com/2015/02/bahaya-rokok-elektrik-bagi-elektrik.html

    http://www.detexsi.com/2015/02/sunnah-rasulullah-dalam-kehidupan.html

    http://detexsi.com/2014/03/cara-membuat-singkong-tela-tela-berbumbu_16.html

    BalasHapus
  36. keren nih..."
    mohon ijin tes d blog ane ya..."

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

    BalasHapus
  37. 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..."

    BalasHapus
  38. http://vipergoy.blogspot.com/

    BalasHapus
  39. Terimakasih banyak atas infonya, saling berbagi info yuk, kunjungi juga website kami yaa (Y)

    OPEMBESAR PENIS,OBAT PEMBESAR PENIS,ALAT PEMBESAR PENIS

    CREAM KECANTIKAN CREAM PEMUTIH WAJAH

    MINYAK OIL PEMBESAR PENIS MINYAK PEMBESAR PENIS

    OBAT KESEHATAN HERBAL ALAMI OBAT PENYAKIT SIPILIS

    OBAT PELANGSING HERBAL OBAT PELANGSING BADAN

    PENGHILANG TATO OBAT PENGHILANG TATONOX

    PENGGEMUK BADAN OBAT PENGGEMUK BADAN

    PERANGSANG WANITA OBAT PERANGSANG SERBUK

    OBAT PENINGGI BADAN OBAT PENINGGI BADAN GROW UP

    OBAT PEMBESAR PAYUDARA OBAT PEMBESAR PAYUDARA

    CREAM PEMBESAR PAYUDARA ALAMI CREAM PEMBESAR PAYUDARA

    BIO HAIR OBAT PENUMBUH RAMBUT OBAT PENUMBUH RAMBUT BIO HAIR

    PERAPAT VAGINA OBAT CHIEN CHIN OBAT PERAPAT VAGINA

    PERANGSANG WANITA CAIR OBAT PERANGSANG WANITA POTENZOL

    BalasHapus
  40. agak membingungkan gan..."
    gx ada cara mudahnya y...???"

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

    BalasHapus
  42. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  43. Artikel yang menarik, kunjungi balik blog kami ya :)

    http://clayton88.blogspot.com | http://kagumiterus.blogspot.com/ |
    http://informasiberitatop.blogspot.com | http://www.layardewasa.top | http://pkcinema.com | http://bit.ly/1sAwovI | http://bit.ly/1sUU8dl | http://bit.ly/1ZIdBJv | http://bit.ly/1YjeNnK | http://bit.ly/1WKgJqp | http://bit.ly/1ZIehP9 | http://bit.ly/1sAwovI | http://bit.ly/1UobCKp | http://bit.ly/1S0ZSYr | http://bit.ly/1ZIehP9 | http://bit.ly/1UL7Ia5 | http://bit.ly/1WKgJqp | http://bit.ly/1YjeNnK |

    BalasHapus

 
Facebook Twitter Felix Yoga Group

2013 Copyright © ViperGoy Blog | Template Name's : Viper Black White | Template By: Paman ViperGoy