Hi all, hari ini saya akan membahas cara membuat dropdown menu di blogger. Untuk membuat dropdown menu tentunya kita harus menguasai CSS dan HTML, ada juga yang menggunakan JavaScript. Namun semua itu bisa teratasi dengan hanya edit, copy, dan paste. Mudah bukan? Bagaimanakah caranya?
Pertama-tama, Login ke akun blogger anda. Masuk ke "Ikhtisar" blog anda, kemudian klik "Tata Letak" dan klik "Tambahkan Gadget" pada kolom yang berada di bawah kolom "Header", jika kita ingin meletakkan Menu di bawah kolom "Header".
Setelah klik "Tambahkan Gadget", maka akan muncul tampilan berikut ini.
Langkah berikutnya adalah klik "HTML/JavaScript", maka akan muncul tampilan berikut ini.
Kosongkan kolom "Judul" dan masukkan kode di bawah ini ke kolom "Konten". Sebelum memasukkan kode berikut ke kolom "Konten", apabila anda ingin mengubah nama dan link menu, silahkan ubah kode yang diberi warna hijau. Untuk penulisan link, ditulis di dalam tanda petik pada <a href="tulis disini">, sedangkan untuk nama menu, ditulis di dalam <span>tulis disini</span>. Langkah terakhir adalah klik "Simpan" dan Selamat Anda telah berhasil membuat dropdown menu.
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Uc-kyIZDzrlUQgQ73dYBf2UbdmaDrawUwllR3WaSQI7EuzWGgdtd0QrT_k4pUNVYwyWy13tZ5g5TunK1EIBVcPYVHWKs02GYMk09i1ZWH6J7rbB6-WP1gUni1TH127bgzWTAA4o1y9_o/s1600/highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGJwEFSC5bZtG2bbJOm9VeNgf_7vKzzIUbu-fAO0SR6_RFVyhfsYh2sDmkFm0hKoSolIKXl6-RudCP1wwXKdDMMbeK7msEbcq48T6I6h_Z_3UHIlBOiZtb2jFO_PJ5haxMBMtxX_jjdzX/s1600/menu-bg.png) repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #0d0d0d;text-shadow:0 -1px 0 rgba(0,0,0,0.7);line-height:18px}#cssmenu > ul > li:hover > a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Uc-kyIZDzrlUQgQ73dYBf2UbdmaDrawUwllR3WaSQI7EuzWGgdtd0QrT_k4pUNVYwyWy13tZ5g5TunK1EIBVcPYVHWKs02GYMk09i1ZWH6J7rbB6-WP1gUni1TH127bgzWTAA4o1y9_o/s1600/highlight-bg.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GBDizCE4R-yGtoY6HHsmyZ35Jf-3O5vhU8C-0pZVfhk5ldxF9tM0G4XIJXxoIWeOcwUtQ3zM8n5_MR4d-CogSEG_0Mt_r3AoetMuKxX0j1o-6CqT67C4YR-KT5SI4vPh7f8AqPVZ-oK1/s1600/hover.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGJwEFSC5bZtG2bbJOm9VeNgf_7vKzzIUbu-fAO0SR6_RFVyhfsYh2sDmkFm0hKoSolIKXl6-RudCP1wwXKdDMMbeK7msEbcq48T6I6h_Z_3UHIlBOiZtb2jFO_PJ5haxMBMtxX_jjdzX/s1600/menu-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu > ul ul li a{padding:18px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}#cssmenu > ul ul li a:hover{border-left:4px solid #d64e34;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GBDizCE4R-yGtoY6HHsmyZ35Jf-3O5vhU8C-0pZVfhk5ldxF9tM0G4XIJXxoIWeOcwUtQ3zM8n5_MR4d-CogSEG_0Mt_r3AoetMuKxX0j1o-6CqT67C4YR-KT5SI4vPh7f8AqPVZ-oK1/s1600/hover.png) repeat}#cssmenu > ul ul li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGJwEFSC5bZtG2bbJOm9VeNgf_7vKzzIUbu-fAO0SR6_RFVyhfsYh2sDmkFm0hKoSolIKXl6-RudCP1wwXKdDMMbeK7msEbcq48T6I6h_Z_3UHIlBOiZtb2jFO_PJ5haxMBMtxX_jjdzX/s1600/menu-bg.png) repeat}</style><a href="http://hardi-ads.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVu79c6jjyKhXVLo3nKNLGz3XIpYh1v-1_buBW8AZptchk0S6MxI3kCiL1MQ2jP6XPXKfS-8BD6_NI5EXporNQz-KU7l3M6XEj-JHNq2X-UDqJZertatOjc667UBaib13o78OSZBh8GVYO/s1600/blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://hardi-ads.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVu79c6jjyKhXVLo3nKNLGz3XIpYh1v-1_buBW8AZptchk0S6MxI3kCiL1MQ2jP6XPXKfS-8BD6_NI5EXporNQz-KU7l3M6XEj-JHNq2X-UDqJZertatOjc667UBaib13o78OSZBh8GVYO/s1600/blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://hardi-ads.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVu79c6jjyKhXVLo3nKNLGz3XIpYh1v-1_buBW8AZptchk0S6MxI3kCiL1MQ2jP6XPXKfS-8BD6_NI5EXporNQz-KU7l3M6XEj-JHNq2X-UDqJZertatOjc667UBaib13o78OSZBh8GVYO/s1600/blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->
<!-- ubah Link menu Anda -->
<div id="cssmenu">
<ul>
<li class="active"><a href="http://hardi-ads.blogspot.com/"><span>Beranda</span></a></li>
<li class="has-sub"><a href="#"><span>Menu 1</span></a>
<ul>
<li><a href="#"><span>Menu 1 1</span></a></li>
<li><a href="#"><span>Menu 1 2</span></a></li>
<li class="last"><a href="#"><span>Menu 1 3</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Menu 2</span></a>
<ul>
<li><a href="#"><span>Sub Menu 1</span></a></li>
<li class="last"><a href="#"><span>Sub Menu 2</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Tentang Saya</span></a></li>
</ul>
</div>
Demikian cara membuat dropdown menu. Semoga bisa membantu.
Tidak ada komentar:
Posting Komentar