Assalamualaikum Pada postingan ini saya akan share mengenai cara membuat menu vertical cantik untuk blog tentunya dengan cara yang sangat simple jika agan tertarik silahkan ikuti langkah pembuatannya dibawah ini...
Masuk blog anda
pilih menu tata letak/add gadged
pilih html javascript
kemudian silahkan letakan kode dibawah ini dimanapun anda ingin menampilkan menu tersebut..
<center>
<div class="menuzoomout">
<ul>
<li><a href="http://digratisan.blogspot.com/">Kebo</a></li>
<li><a href="http://digratisan.blogspot.com/">Jaran</a></li>
<li><a href="http://digratisan.blogspot.com/">Sampi</a></li>
<li><a href="http://digratisan.blogspot.com/">Bedes</a></li>
<li><a href="http://digratisan.blogspot.com/">Mayung</a> </li>
</ul>
</div>
</center>
<style>
.menuzoomout ul {
width: 40%;
margin: 15px 10px;
padding: 10px;
list-style: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #FF8C00;
background: -moz-linear-gradient(left, #FF8C00 0%, #e8e8e8 29%, #FF8C00 43%, #e8e8e8 65%, #FF8C00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(29%,#e8e8e8), color-stop(43%,#cccccc), color-stop(65%,#e8e8e8), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(left, #8B0000 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#FF8C00 100%);
background: -o-linear-gradient(left, #FF8C00%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
background: -ms-linear-gradient(left, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
background: linear-gradient(to right, #FF8C00 0%,#e8e8e8 29%,#FF8C00 43%,#e8e8e8 65%,#FF8C00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000000',GradientType=1 );
}
.menuzoomout ul li {
margin: 5px auto;
padding: 5px;border:2px solid #cdcdcd;
cursor: pointer;color:#000000;
font-family: century gothic;font-weight: bold;
font-size: 25px;
line-height: 30px;
-webkit-transition: 200ms all;
-moz-transition: 200ms all;
-o-transition: 200ms all;
transition: 200ms all;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px #cdcdcd;
background: #FF8C00;
background: -moz-linear-gradient(top, #8B0000 0%, #8B000050%, #e1e1e1 51%, #8B0000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8B0000), color-stop(50%,#8B0000), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
background: -o-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
background: -ms-linear-gradient(top, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
background: linear-gradient(to bottom, #8B0000 0%,#8B0000 50%,#e1e1e1 51%,#8B0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000000',GradientType=0 );
-webkit-box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);
}
.menuzoomout ul li:first-of-type {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
}
.menuzoomout ul li:last-of-type {
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.menuzoomout ul li:hover {
padding-left: 20px;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menuzoomout ul li a {color:#000000 !important;}
</style>
Catatan : Silahkan ganti kode berwarna merah dengan judul menu dan url tujuan agan sendiri
Jika sudah silahkan simpan template agan dan lihat hasilnya hehehehe maaf untuk demonya ane pake bahasa sumbawa kwkwkwkw :)
Selamat mencoba semoga bermanfaat...
0 comments:
Post a Comment