Ok, berawal dari kunjungan ke salah satu blog inspiratorku “Hompimpa alaihum gambreng” yang kebetulan makai efek dropdown dengan efek bounce membuat ku penasaran dan ceritapun berlanjut dengan mencari tutornya.. (hehe panjang kali lebar ceritanya). Langsung aja bro/siz kita ke penampakan tuh dropdown menu kurang lebih seperti yang ada di blog ini.
Terus langkah pemasangannya:
- login ke akun blogger sobat, terus ke menu rancangan dan ke edit HTML
- backup dulu templatenya!! biar kalo ada kesalahan bisa dibalikin.
- cari kode
]]</b:skin>
atau</style> dan pasang kode di bawah ini di atas kode tersebut
/*Navigation*/
.menu {
font:normal 12px arial;
line-height:normal;
text-transform:none;
color:#FFF;
text-decoration:none;
margin:0;
padding:3px 0
}
.menu ul {background:#000;
background-image: linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -o-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -moz-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -ms-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(148,0,0)),
color-stop(0.6, rgb(0,0,0))
);
height:35px;
line-height:30px;
-webkit-box-shadow:0 1px 5px #fff;
-moz-box-shadow:0 1px 5px #fff;
box-shadow:0 1px 5px #fff;
margin:0;
padding:0
}
.menu li {
list-style:none;
color:#FFF;
float:left;
display:inline;
position:relative;
margin:0;
padding:0
}
.menu li a {
display:block;
border-left:1px solid #444;
border-right:1px solid #222;
color:#FFF;
text-decoration:none;
font-weight:700;
line-height:30px;
outline:none;
margin:0;
padding:2px 15px
}
.menu li ul {
position:absolute;
z-index:10;
left:0;
top:100%;
height:auto;
width:170px;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
margin:0;
padding:0
}
.menu li ul a {
border-left:none;
border-right:none;
border-top:1px solid #444;
border-bottom:1px solid #222;
display:block
}
.menu li ul li {
float:none;
display:block;
width:auto
}
.menu li ul ul {
top:0;
left:100%
}
.menu li a:focus {
background-color:#666;
border-left-color:#777;
border-right-color:#555
}
.menu ul li a:focus {
background-color:#666;
border-top-color:#777;
border-bottom-color:#555
}
.menu li a:hover,.menu ul li a:hover {
color:#ccc;
background:#000
} - setelah itu masukkan efek bounce berikut ini di atas kode
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://hompimpa.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('.menu li').hover(function() {
$(this).children('ul').filter(':not(:animated)').slideDown(700,'easeOutBounce');
}, function() {
$(this).children('ul').slideUp(400);
});
});
</script> - Dan masukkan menu nya di tempat yang Anda inginkan, contoh menunya seperti ini:
<div class='menu'>
<ul>
<li><a href='http://arimjie.blogspot.com/search/label/Farmasi'>Pharmacy</a>
<ul>
<li><a href='#'>Biologi Farmasi</a>
<ul class='children'>
<li><a href='http://arimjie.blogspot.com/search/label/Farmakognosi'>Farmakognosi</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Fitokimia'>Fitokimia</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Farmakologi'>Farmakologi</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Mikrobiologi'>Mikrobiologi</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Bioteknologi'>Bioteknologi</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Biokimia'>Biokimia</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Fisiologi'>Fisiologi</a></li>
</ul>
</li>
<li><a href='#'>Farmakokimia</a>
<ul class='children'>
<li><a href='#'>Farmasi Analisis</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Kimia%20Fisika'>Kimia Fisika</a></li>
<li><a href='#'>Kimia Medisinal</a></li>
<li><a href='#'>Kimia Klinik</a></li>
<li><a href='#'>Analisis Mikrobiologi</a></li>
<li><a href='#'>Analisis dan Keamanan Makanan</a></li>
</ul>
</li>
<li><a href='#'>Farmasetika</a>
<ul class='children'>
<li><a href='#'>Ilmu Meracik Obat</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Farmasi%20Fisika'>Farmasi Fisika</a></li>
<li><a href='#'>Teknologi Farmasi</a>
</li>
<li><a href='http://arimjie.blogspot.com/search/label/Farmakokinetik'>Biofarmasi dan Farmakokinetik</a></li>
</ul>
</li>
<li><a href='http://arimjie.blogspot.com/search/label/Spesialite%20Obat'>Spesialite Obat</a></li>
<li><a href='#'><span style='font-weight: bold; color:#ddd;'>Informasi Praktikum</span></a>
<ul class='children'>
<li><a href='#'>Fisika Dasar</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Praktikum%20Kimia%20Fisika'>Kimia Fisika</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Praktikum%20Farmasi%20Fisika'>Farmasi Fisika</a></li>
<li><a href='#'>Fitokimia</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://arimjie.blogspot.com/search/label/Tips%20Ngeblog'>Design</a>
<ul class='children'>
<li><a href='http://arimjie.blogspot.com/search/label/Photoshop'>PhotoShop</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Coreldraw'>CorelDraw</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Desain%20Web'>Desain Web</a></li>
</ul></li>
<li><a href='http://arimjie.blogspot.com/search/label/Tips%20Ngeblog'>Blogging</a>
<ul class='children'>
<li><a href='http://arimjie.blogspot.com/search/label/My%20Tools'>My Tools</a>
<ul class='children'>
<li><a href='http://arimjie.blogspot.com/2012/01/kode-warna-html-complit-seperti.html'>Kode Warna</a></li>
<li><a href='http://arimjie.blogspot.com/2012/04/parse-html.html'>Parse HTML</a></li>
<li><a href='http://arimjie.blogspot.com/2012/01/cara-mengecek-berat-blog.html'>Check Weight</a></li>
</ul></li>
</ul></li>
<li><a href='http://arimjie.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='#'>Lain Lain</a>
<ul class='children'>
<li style='color: rgb(255, 102, 102);'><a href='http://arimjie.blogspot.com/search/label/TV%20Live%20Streaming'>TV Streaming</a>
<ul class='children'><li><a href='http://arimjie.blogspot.com/2011/01/rcti-live-streaming.html'>RCTI Live Streaming</a></li><li><a href='http://arimjie.blogspot.com/2011/01/mivotv-live-streaming.html'>Mivo.tv Live Streaming</a></li></ul></li>
<li><a href='http://arimjie.blogspot.com/search/label/Bisnis'>Bisnis</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Serba Serbi'>Serba Serbi</a></li>
</ul>
</li>
<li><a href='#'>E-Book</a>
<ul class='children'>
<li><a href='http://arimjie.blogspot.com/search/label/Book%20Review'>Review</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Pharmacy E-Book'>Pharmacy</a></li>
</ul>
</li>
<li><a href='http://arimjie.blogspot.com/search/label/Exchange' target='_blank'>Exchange</a>
<ul class='children'>
<li><a href='http://arimjie.blogspot.com/2012/01/tukar-link.html'>Banner Exchange</a></li>
<li><a href='http://arimjie.blogspot.com/2012/01/link-exchange.html'>Link Exchange</a></li>
</ul>
</li>
<li><a href='http://arimjie.blogspot.com/2012/04/guest-book.html' target='_blank'>Guest Book</a></li>
<li><a href='http://arimjie.blogspot.com/search/label/Daftar Isi' target='_blank'>Daftar Isi</a></li>
</ul>
</div> - Terakhir pratinjau dan kalo sudah sesuai dengan harapan save. !! selamat mencoba.
menu dropdown nya kaya menu blog ini ya gan,,ijin coba ya gan..:D
BalasHapussilahkan mas broo!!
Hapuswaduh artikel master taufik ada dimana-mana...xixixi
BalasHapusweits ada master di sini.. maksih dah berkunjung master koben.. :)
Hapuskan artikelnya master taufik banyak berguna :)
Hapusbtw, salam kenal broo..
salam kenal balik sobat
HapusMelihat tampilan blog ini rasanya seperti web profesional, mantabs deh... pingin seperti ini tapi kurang bisa hehehehe
BalasHapusTrims atas tutornya masbro, ijin mempelajari ya :)
hehehe... mas arie berlebihan nih..:)
Hapussilahkan dipelajari mas!!
sdh saya follow mas bro.
BalasHapusjangan lupa sering2 berkunjung,
http://denbo-1.blogspot.com
ok mas bro, thanks yah
Hapussalam kenal sobat...
BalasHapusnice post
salam balik sobat..
HapusAne coba buat blog ane yang lain sobat...
BalasHapusterima kasih infonya...
BTW, home pagenya bagus, ane mau pake diblog ane gimana cara buatnya yah ?
mohon tutorialnya yah... :D
Luar biasa... menarik sekali tutorialnya, langsung minta izin copas artikel tak simpen di notepad, buat arsip tutorial sewaktu2 dibutuhkan.
BalasHapusBTW, betul jg tuh.... home pagenya keren ui....
silahkan mas..
HapusBgus nih artikelnya,,,tpi saya takut ngutakngatik Parse HTML saya,,,Blog saya kan udah ada menunya klo di tambahin Efek bounce mungkin akan lbih menarik,tpi rasanya blog saya ga perlu di tambahin efek bounce deh...Thanks udah mau berbagi Ilmunya,,
BalasHapusDi tunggu Komentar Dan kunjungan baliknya..!!!
ckckc, mantab. backto top sama breadcrumbnya sama :D
BalasHapusKeren nih sob tutorialnya mengenai Drop Down Navigation Menu With Bounce Effect, pengen nyoba tapi belum ada waktu... kapan-kapan mau nyoba ah...Makasih sob :)
BalasHapussilahkan sobat
HapusYour car could be stolen if you don't keep this in mind!
BalasHapusConsider that your car was taken! When you approach the police, they inquire about a specific "VIN lookup"
A VIN decoder: What is it?
Similar to a passport, the "VIN decoder" allows you to find out the date of the car's birth and the identity of its "parent" (manufacturing facility). Additionally, you can find:
1.Type of engine
2.Model of a vehicle
3.The DMV and the limitations it imposes
4.The number of drivers in this vehicle
The location of the car will be visible to you, and keeping in mind the code ensures your safety. The code can be checked in the database online. The VIN is situated on various parts of the car to make it harder for thieves to steal, such as the first person seated on the floor, the frame (often in trucks and SUVs), the spar, and other areas.
What happens if the VIN is intentionally harmed?
There are numerous circumstances that can result in VIN damage, but failing to have one will have unpleasant repercussions because it is illegal to intentionally harm a VIN in order to avoid going to jail or calling the police. You could receive a fine of up to 80,000 rubles and spend two years in jail. You might be stopped by an instructor on the road.
Conclusion.
The VIN decoder may help to save your car from theft. But where can you check the car reality? This is why we exist– VIN decoders!