Selamat malam sahabat Blogger, tutorial kali ini saya akan membagikan tips Cara Membuat Dropdown Menu Keren dengan CSS. Menu Dropdown adalah bentuk sederhana dari navigasi sebuah Blog. Navigasi adalah media yang mempermudah pengunjung dalam mengakses seluruh isi Blog anda, termasuk informasi yang diinginkan oleh pengunjung.
Semakin menarik Anda dalam menyajikan navigasi,otomatis akan membuat betah pengunjung berada di Blog Anda ( Asal semua informasi yang Anda sajikan adalah informasi yang informatif )
Anda baca baik baik tutorial ini sebelum Anda memutuskan mengganti kode pada TEMPLATE Blog Anda ( anda pahami), Karena setiap TEMPLATE memiliki perbedaan pada kode HTML dan script. Dan kebanyakan dari Blogger kebingungan ketika pada template mereka tidak memiliki kesamaan dengan tutorial dibawah ini. Pada prinsipnya peletakan kodenya sama mungkin diskripsinya berbeda dan ini yang membuat bingung.
Berikut langkah membuat Dropdown Menu Keren dengan CSS :
1.Masuk ke akun BloggerAnda
2. Pilih TEMPLATElalu Klik EDIT HTML
Catatan penting : Untuk menghindari kesalahan yang tidak dapat Anda perbaiki, silahkan back up template Anda dulu..! sebelum menuju langkah berikutnya. Jadi klik dulu cadangkan/pulihkan lihat kanan atas setelah Anda klik EDIT HTML.
3. Letakkan kode CSS berikut diatas ]]></b:skin>
CSS
.tiblogku:before,
.tipblogku:after {
content: " ";
display: table;
}
.tipblogku:after {
clear: both;
}
.tipblogku {
*zoom: 1;
}
/* Main level */
.menu {
margin: 50px auto;
width: 800px;
width: fit-content;
}
.menu > li {
background: #FE80DF;
float: left;
position: relative;
transform: skewX(25deg);
}
.menu a {
display: block;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-family: Arial;
font-size: 13px;
}
.menu li:hover {
background: #FE80DF;
}
.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}
/* Dropdown level*/
.submenu {
position: absolute;
width: 200px;
left: 50%; margin-left: -100px;
transform: skewX(-25deg);
transform-origin: left top;
}
.submenu li {
background-color: #FEBFEF;
position: relative;
overflow: hidden;
}
.submenu > li > a {
padding: 1em 2em;
}
.submenu > li::after {
content: '';
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}
/* Odd stuff */
.submenu > li:nth-child(odd){
transform: skewX(-25deg) translateX(0);
}
.submenu > li:nth-child(odd) > a {
transform: skewX(25deg);
}
.submenu > li:nth-child(odd)::after {
right: -50%;
transform: skewX(-25deg) rotate(3deg);
}
/* Even stuff */
.submenu > li:nth-child(even){
transform: skewX(25deg) translateX(0);
}
.submenu > li:nth-child(even) > a {
transform: skewX(-25deg);
}
.submenu > li:nth-child(even)::after {
left: -50%;
transform: skewX(25deg) rotate(3deg);
}
/* Show dropdown */
.submenu,
.submenu li {
opacity: 0;
visibility: hidden;
}
.submenu li {
transition: .2s ease-out transform;
}
.menu > li:hover .submenu,
.menu > li:hover .submenu li {
opacity: 1;
visibility: visible;
}
.menu > li:hover .submenu li:nth-child(even){
transform: skewX(25deg) translateX(15px);
}
.menu > li:hover .submenu li:nth-child(odd){
transform: skewX(-25deg) translateX(-15px);
}
4. Cari kode </head> dan lihat di bawah/dekat kode </head>. Cari kode berikut ini <div id='wrapper'> dan pastekan kode berikut tepat dibawahkode <div id='wrapper'>.
HTML
<ul class="menu tipblogku">
<li><a href="#">Menu 1</a></li>
<li>
<a href="#">Menu 2</a>
<ul class="submenu">
<li><a href="#" target=”_blank” >Submenu 1</a></li>
<li><a href="#" target=”_blank” >Submenu 2</a></li>
<li><a href="#" target=”_blank” >Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul class="submenu">
<li><a href="#" target=”_blank” >Submenu 1</a></li>
<li><a href="#" target=”_blank” >Submenu 2</a></li>
<li><a href="#" target=”_blank” >Submenu 3</a></li>
<li><a href="#" target=”_blank” >Submenu 4</a></li>
</ul>
</li>
<li><a href="#" target=”_blank” >Menu 4</a></li>
<li><a href="#" target=”_blank” >Menu 5</a></li>
</ul>
Catatan penting
► Ganti tanda # dengan link Anda ( contoh http://namabloganda.blogspot.com/label/SEO.html)
► Jika TEMPLATE Anda sudah menggunakan Dropdown menu, Anda tinggal menghapus kode CSS sebelumnya dan menggantinya dengan kode CSS pada langkah ke 3 ( lihat baik baik langkah ke 3 ). Dan hapus kode HTML sebelumnya, biasanya terdapat dibawah kode </head>. Dan silahkan anda ganti kode HTML sebelumnya dengan seperti pada langkah ke 4.
► Jika pada TEMPLATE Anda belum terpasang Dropdown menu Anda bisa mengikuti langkah ini secara berurutan.
Demikian tips blogger Cara Membuat Dropdown Menu Keren dengan CSS, Jika ada masalah silahkan Anda tinggalkan komentar atau mengisi formulir kontak. Terima kasih salam Blogger.