Gimana ? Baguskan ? Sudah pasti banyak yang bilang menu hidden itu bagus. Menu yang dilengkapi kode JavaScript ini mampu bekerja lebih cepat daripada yang lainnya.
- Login ke Blogger
- Klik Design > Edit HTML
- Letakkan kode berikut di atas kode ]]></b:skin>
ul#deopradipta {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#deopradipta li {
width: 100px;
}
ul#deopradipta li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#deopradipta .aa a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#deopradipta .ab a{
background-image: url(http://megapolitan-group.com/inc/images/icon_fasilitas.png);
}
ul#deopradipta .ac a{
background-image: url(http://www.e-isik.com/tr/images/icon_admin.png);
}
ul#deopradipta .ad a{
background-image: url(http://www.scortaproduction.com/images/icon_govin.png);
}
ul#deopradipta .ae a{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Money_Coin_Icon.svg/50px-Money_Coin_Icon.svg.png);
}
ul#deopradipta .af a{
background-image: url(http://fatek.ung.ac.id/informatika/image/icon_berita.png);
}
ul#deopradipta .ag a{
background-image: url(http://www.kemendag.go.id/images/pelayanan_perdagangan_icon_steep.png);
}
ul#deopradipta .ah a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
#Ganti kode berwarna Orange dengan link gambar yang kalian inginkan
- Letakkan kode berikut di bawah ]]></b:skin>
<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.2");
</script>
<script type='text/javascript'>
$(function() {
$('#deopradipta a').stop().animate({'marginLeft':'-50px'},1000);
$('#deopradipta > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>
- Terakhir letakkan kode berikut di atas kode </body>
<ul id='deopradipta'>
<li class='aa'><a href='http://dopind.blogspot.com/' title='Beranda'/></li>
<li class='ab'><a href='http://dopind.blogspot.com/2010/10/about-me.html'/></li>
<li class='ac'><a href='http://dopind.blogspot.com/2011/10/daftar-isi.html'/></li>
<li class='ad'><a href='http://dopind.blogspot.com/2010/10/friends-link_10.html'/></li>
<li class='ae'><a href='http://dopind.blogspot.com/2010/10/pasang-iklanbanner-di-akatsuki-blog.html'/></li>
<li class='af'><a href='http://www.blogger.com/profile/10331503479536442674'/></li>
<li class='ag'><a href='http://dopind.blogspot.com/2011/12/duidcoid-komunitas-bisnis-online.html'/></li>
<li class='ah'><a href='http://dopind.blogspot.com/2010/10/friends-link.html'/></li>
</ul>
#Ganti kode warna Hijau dengan kode yang kalian ingin pasang
#Jika ingin mengganti gambar *li class='aa'* kalian bisa ganti di kode *deopradipta .aa a* yang ada di langkah ke 3, begitu seterusnya
- Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D
Artikel Terkait
Langganan:
Posting Komentar (Atom)
33 komentar:
gak jalan uy di ane.. :(
http://muxdemo.blogspot.com/
sudah sob.. silahkan dicoba lagi :D
udah apanya nih?? masih sama kok.. ga brubah, sob.. (_ _")
sudah sob.. udah aku coba tadi :3
oke sob ^_^
udh berhasil aku.x
alhamdulillah ya .. ssuatu
hohoho.. sipp sobbb ^_^
berhasil gan, tapi cara mnculin deskripsi url nya sebelum diklik gmna ya?!
trz klo nyari gmbarx th dmn?
mhn bntuannya gan....
gambar itu di langkah no.3 sob.. yg warna orange diganti..
kalau deskripsinya itu dilangkah ke 5 sob.. kyk di home.. title="beranda".. kyk gitu aja :3
Ok, thanks sob....
oke sob.. sama_sama ^_^
Deo.... Sip banget nih............. boleh tanya ga..... aq minta tolong bisa???? plizzz berkaitan dengan Edit Template... nih....
okedah sob.. klw bisa ngmngin di FB aja http://www.facebook.com/manchesterunitedd
sob ini buat blogspot atau wordpress?
buat blogspot sob.. wordpress masih bingung ane -_-
BOLEH TOLONGIN AKU GK
aku masih awam dgn bhsa program apa lgi sama yg namanya scrip,,,
aku udah cb smw langkahmu tpi cman dikit adja yg jdi,,,,,boleh gk gan editkan scrip blog ku...????
klo boleh,,,tolong buatkan saja menu2 kyk menu blog pnyamu tpi pakai nama
home, mmp, mgm, struktur, basis, program
tlng di bantu yach,,,coz ini mw aku pakai untuk perusahaanku...
klo gan bisa bantu nanti scrip nya aku kirim lewat pesan fb adja yach,,,,
mohon bantuannya gan....
085211328349 N 082150607970
sms aku d nmr ntu klo gan mw bantu..
cz aku gk tiap hari online gan.....
sama sob.. ane fokus UN*juga.. jadi gak bisa bantu.. maaf.. :3
sOb mCNA z cArA gUna'y Ko' w pUsiNg gA ngERtik bikiN'y....
bos kalau mau bikin yang di hidden linknya gitu gimana ya. Bisa keluarnya kalau udah klik like atau +1 gitu
@ladyheart : coba aja di pakai dulu.. cuma coppas kode aja kok ^^
@tanto : ane masi gak paham sob :/
gan klo contoh menu yg laen ada ga?
silahkan cek dsini sob http://dopind.blogspot.com/2012/02/membuat-menu-hidden-2-di-blog.html ^_^
izin otw ke tkp sob :)
iya sob.. silahkan ^^
sipppp dah ane mau coba
ini kayak yang lagi dopind gunakan yah
@rizal : ehehe.. silahkan di cobacoba sob ^^
@hanggar : bukan contohnya ada di http://sasacullens.blogspot.com/ ^^
kakak datang dong di blog ku http://snakebluee.blogspot.com/
kk disana koment k,jadi teman k, y plis............
oke sob.. langsung ke TKP sobat :)
wah... keren!! thank you so much!! :D
Posting Komentar