View
62
Download
4
Category
Preview:
Citation preview
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
Recommended