29 March 2022

3D Hover Fancy Dropdown Menu

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

3D Hover Fancy Dropdown Menu

Efek 3D Hover Dropdown jadi salah satu trik bagus untuk diterapkan ke dalam menu di sidebar blog. Untuk menampilkan menu yang ada di blog bisa dilakukan dengan trik ini.

Menu yang menjulur ke bawah apalagi dengan efek animasi akan menambah display blog menu menjadi semakin kreatif. Karena seolah-olah animasi ikut bermain dalam CSS dropdown menu tersebut.

Baca Juga : Menu Button Animasi dengan Trik Kode CSS3

Efek ini akan muncul ketika kita hover menu dan menimbulkan sebuah efek animasi dengan bergantinya layar menjadi warna lain. Dengan begitu layar berganti ketika ada aktivitas mouse bergerak di atasnya.

Sehingga dengan efek ini akan menambah kasanah ilmu tentang CSS bukan. Dengan penerapan yang valid, menu biasa akan bisa menjadi sebuah efek yang sangat elok dipandang.

Baca Juga : Tooltip Keren Memperjelas Link Deskripsi pada Text Link

Okelah kalau begitu kita mulai saja.

3D Hover Fancy Dropdown Menu


Kita masuk ke Dashboard Blogger, kemudian pilih Sesuaikan : Edit HTML, lalu cari kode ]]></b:skin>. Tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi. Berikut ini kodenya :
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px;
border: 0px solid red;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUQRzQlFL6wgm3LnRadF-Q3EkU7DBq6QNpJsDA6OI8j3-8pkLnR6szB4_DSka9hAj8rNddKBVEuo5ALD7TzeUPhkatrrPBcyRGJNuS3lPQ1dZ_6wJcAwI2x8XQS6pQKjXu-3AFG4T1g_K5/s200/Logo.png) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: black;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-webkit-border-radius-top-left:20px;
-webkit-border-radius-bottom-right:20px;
-webkit-border-radius-top-right:20px;
-webkit-border-radius-bottom-left:20px;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url() no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: black;
}
.glossymenu li a:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptyQ11TXhN0OsL7GW9K3DYbUwO6qmQAVQXv5wLVAqS7G8zlZ9_-zuba7pfRyA7UJgcFABerDy0S13QAyJYwNCfmcm-yLYrPBZSJK8WtAz-UzPINU_cMKjgA0Ds4jjwneBit79S81fBiDz/s200/Logo2.png);
}


Setelah itu untuk menampilkan efek 3D fancy nya, kita bubuhkan kode ini di sidebar atau di postingan juga bisa. Dibawah ini kodenya :
<ul id="verticalmenu" class="glossymenu">
<li><a href="URL blog kalian">ket artikel</a></li>
<li><a href="URL blog kalian">ket artikel</a></li>
<li><a href="URL blog kalian">ket artikel</a></li>
<li><a href="URL blog kalian">ket artikel</a></li>
<li><a href="URL blog kalian">ket artikel</a></li>
<li><a href="URL blog kalian">ket artikel</a></li>
<li><a href="URL blog kalian">ket artikel</a></li>
</ul>


Catatan :
Untuk URL blog diganti dengan URL artikel misal : https://alifacode.com/2022/03/marhaban-yaa-ramadhan-2022-alifacode.html
Dan untuk keterangan artikel isi dengan kata-kata kamu misal : Tutorial Blog.


Dan setelah itu kalian tinggal save dan publikasikan saja artikel kamu dan lihat blog. Sudah jadi khan? pasti sudah jadi dong ya. Terima kasih ya yang sudah mempraktekkan trik ini, semoga blog kalian jadi punya menu yang bagus. Semoga dengan artikel 3D Hover Fancy Dropdown Menu. Wassalam.

Bagikan ke teman-teman kamu
Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul 3D Hover Fancy Dropdown Menu . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon