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 Blogger
Anda
2. Pilih TEMPLATE lalu 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 dibawah
kode <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.
This comment has been removed by the author.
ReplyDeleteDicas e tutoriais - Blogger, Tumblr, WordPress, SEO, Word e Excel
ReplyDelete