4/25/2014 Cara Membuat Menu Dropdown Di Blog ~ ViperGoy Blog's

http://vipergoy.blogspot.com/2013/12/cara-membuat-menu-dropdown-di-blog.html 1/6

Home > Tutorial Blogger > Cara Membuat Menu Dropdown Di Blog

Cara Membuat Menu Dropdown Di Blog

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}

Search

Random Article

Home Indonesian Website Optimasi Google Plus

Cara Membuat Menu Dropdown Di Blog

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

ViperGoy Search . . .

4/25/2014 Cara Membuat Menu Dropdown Di Blog ~ ViperGoy Blog's

http://vipergoy.blogspot.com/2013/12/cara-membuat-menu-dropdown-di-blog.html 2/6

#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.

4/25/2014 Cara Membuat Menu Dropdown Di Blog ~ ViperGoy Blog's

http://vipergoy.blogspot.com/2013/12/cara-membuat-menu-dropdown-di-blog.html 3/6

Judul: Cara Membuat Menu Dropdown Di Blog

Rating: 10 out of 10 based on 24 ratings. 5 user reviews.

Ditulis Oleh Felix Yoga

Terima Kasih Atas Kunjungan Anda...

ViperShare :

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.

Related Posts

25 komentar:

Ayoberkarya 5 Desember 2013 20.19

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)Balas

awhnymous X 6 Desember 2013 00.04

wah sangat bermanfaat sob, ijin BM buat belajar ntarBalas

fajri mansyah 6 Desember 2013 19.11

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

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

saepur rizal 14 Desember 2013 18.46

4/25/2014 Cara Membuat Menu Dropdown Di Blog ~ ViperGoy Blog's

http://vipergoy.blogspot.com/2013/12/cara-membuat-menu-dropdown-di-blog.html 4/6

mantapBalas

KANAYA AZALIA 8 Januari 2014 23.26

masih kesulitan,maklum newbe,hikhikBalas

gilang romy 11 Januari 2014 14.42

Komentar ini telah dihapus oleh penulis.Balas

Pasang CCTV Murah 16 Januari 2014 08.40

tengkyu gan...mampir di blog ane yaBalas

Era Komputers 25 Januari 2014 20.30

manatappp mapir lagi belajar http://zamancomputer.blogspot.comBalas

Zidniew Crewes 30 Januari 2014 07.22

mau ganti warna dasarnya, harus ubah script yang mana ya gan?mkasih,Balas

iday rockzs 2 Februari 2014 21.58

oke. bermanfaatBalas

Deni Saputra 16 Februari 2014 13.25

mantap gan artikelnyaBalas

gung santosa 23 Februari 2014 16.38

makasih gan, kunjungi balik ya http://adf.ly/dvP1FBalas

Fatah ariq 25 Februari 2014 13.36

gan kode yg kedua gak adaBalas

Aa Pahma 25 Februari 2014 15.53

Mantap gan and bermanfaat....Balas

DIAN MALIK Alamsyah 1 Maret 2014 19.16

Makasih gan.. sangat bermanfaat...

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

paper house 2 Maret 2014 11.30

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

mohon juga komentarnya di blog saya gan..Balas

Wahyu Auliasari 12 Maret 2014 08.27

terimakasih infonya bisa dicoba nih. salam kenal :)Balas

4/25/2014 Cara Membuat Menu Dropdown Di Blog ~ ViperGoy Blog's

http://vipergoy.blogspot.com/2013/12/cara-membuat-menu-dropdown-di-blog.html 5/6

Tambahkan komentar

Indra Setiawan 18 Maret 2014 12.21

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

TOGEL AKURAT 19 Maret 2014 01.26

Keterpurukan hidup membuat saya melakoni pesugihan di PAKMANDALA,sebelumnya saya Mendapatkan no hp aki (082348985714) dari temanyang sudah sukses kaya, saran PAK MANDALA pesugihan yang cocok untuksaya adalah Bank GHAIB, di waktu itu tanpa banyak perhitungan saya ikutipetunjuk dari aki ,saya sudah sangat bingung dengan hutang yang beratus-ratusjuta. Untung saja ada PAK MANDALA yang membantu melalui syareatnya. Sayaserahkan umur 1 hari saya untuk ritual ini . pada malam pelaksanaan ritual sayamerasa sesuatu yang sangat asing,. Karna merasa tak kuat kemudian saya cobamelelapkan diri, entah sadar atau tidak saya melihat sosok makhluk tinggi besaryang memberikan saya kain hitam yang berisi uang 50-100rbuan yang sangatbanyak setelah benar-benar sadar saya memeriksa kotak hitam yang telah sayapersiapkan sebelumnya atas perintah PAK MANDALA ,dan dengan sangatterkejut saya melihat kotak tersebut penuh dengan uang 50-100ribuan sampairatusan lembAr banyaknya , tanpa ada rekayasa saya membuat kesaksian inikarna semua ini benar-benar saya alami. SUMPAH DEMI ALLAH DAN ATS NAMAKELUARGA Saya ucapkan ribuan terimkasih kepada PAK MANDALA,saat inihutang saya telah lunas dan saya tlah memiliki toko elektronik yang lumayanbesar . sekali lagi saya ucapkan terimakasih yang sangat besar kepada PAKMANDALA dan keluarga.Balas

Lizbeth Yulia Christi 1 April 2014 10.17

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

ajeng septiani 4 April 2014 11.41

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

krisnabayu aji 4 April 2014 22.08

balaskho di template ane nda ada kata" yang harus di cari di langkah ke 5 yah,,,???http://krisnabayuaji123.blogspot.com/Balas

Fahri Prahira 8 April 2014 18.12

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

M. Ghiffaari Ilham.R 9 April 2014 08.06

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

buka usaha 13 April 2014 14.49

pusing bgt..newbieeBalas

4/25/2014 Cara Membuat Menu Dropdown Di Blog ~ ViperGoy Blog's

http://vipergoy.blogspot.com/2013/12/cara-membuat-menu-dropdown-di-blog.html 6/6

Masukkan komentar Anda...

Beri komentar sebagai: Google Account

Publikasikan

Pratinjau