Menu Image CSS
Udah pusing neg sama js..
Sedikit beralih ke CSS neg..
Kali ini ane akan share tentang Menu Image CSS.. (Apa tuh??)
Menu Image CSS ini adalah merupakan menu Vertical kalo dilihat dari bentuknya sih..
Tapi kalo dilihat dari penataan kode/scriptnya, Menu Image CSS ini
lebih ke Eksplorerisasi dari effect gambar az..
Penasaran kaya gimana bentuknya ???
Atau langsung lihat demo nya :
Demo Menu Image CSSKlik disini untuk melihat demo Menu Image CSS
Gimana ?? ada yg tertarik ?? (Layangan kalee..)
Begini neg sob cara membuatnya :
Langkah 1
Cari kode ]]></b:skin> pada Rancangan Edit HTML akun blog sobat.
Letakan kode dibawah ini diatas kode tersebut.
#menu {
list-style: none;
color: #FFFFFF;
width: 450px;
height: 493px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2CFs2jn6OX5wF6EA8uyqvoFJo32jAVSdMstdeKKIUsYhWti8R62_rdST5Bjjjv6akZpHqIDAsLOh66cBjWgPAk8rSul9XBJAf9WddbAA6Br6yKb0zA98x7ihgHI74QY4L-mdD_DCwTMU6//") no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {
width: 210px;
height: 54px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAaLsrDfr8BiMbcdi3WfeEqqxtLWjOYKSS2awJP3owaftMeq_oXwX0dEtfKghJelo3WL1EpLw-IaDaaysie9z3QB3TPR9K4dzwKDUPR8ClQXKA4HEVS7Cm8emb0TaF5wZZCJjo-6OSmSY//") no-repeat;
left: 46px;
top: 133px;
}
#menu .home span {
width: 150px;
height: 60px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4ZUaQCjJYFRu70lAQ17Zmw9QV7ERK6e7QxVUMkV7tiSI2VxZJCaiu_hMpVgL473fN5FjfJN_bht3ftjjjT3hr6aQ-ZSsvzvCmKDW3f6IpIbC8aCoarbqN3C4GBOVlaec5eLshTyX-6I//") no-repeat;
left: 210px;
top: -25px;
}
#menu .design {
width: 210px;
height: 54px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDM2JjBWyP7P9qWFhZcKOp4FLmTXGiSWxbM4Ly39nd7azZrZucRbAi-Z9OurP6fAG1lUT15wRQxYcfNiIrQc-qypKJ88NNjGqGGbHwN8zc76Tf3w4NcVFXDdbktyCBdE0kWRl1I9o_OK4//") no-repeat;
left: 55px;
top: 197px;
}
#menu .design span {
width: 180px;
height: 40px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHyA3tOxV3bfd4PyjtxxlGwT8S-VRkT1ocBMj_DlobIyX77RL2_uaslEozBkGUoI2MJcpXXl7EJh8de3PHr1zCkqBlLnKxQ_GzKyBUiZ2FrBAzcPC7Hhljafljyk4gqCX7J8m4c9HxbE//") no-repeat;
left: 184px;
top: 10px;
}
#menu .tut {
width: 210px;
height: 55px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQz1x65p6bzzcXKsVGc6tdVS9OduiBxd3gQdojUT2vTu954Ub6Q75dVz5UYaqP-P_6EraiZLWRkSQX9LCSbCtIr1-6o-fg5dtJY_gAn0ib4NZSSy6Lt8CAQ-GFpYZuY0tIjtqf5Z9XZe8//") no-repeat;
left: 60px;
top: 260px;
}
#menu .tut span {
width: 180px;
height: 40px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84M6UXtT3MwZNZlbsJWBoA0_gYeuYaUtJuOFV6gOiI0BsI8oi_2z3vBqegBeMb_tmL21nmAUljoFTsAwqlg4PIyPvlYwJdzP7URoc7KovhtWUDNXQa4Zkn6JnnG_JR0Lkr86_zbntkkg//") no-repeat;
left: 206px;
top: -10px;
}
#menu .rss {
width: 210px;
height: 53px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEyaHRoXAq54GP-HN9Ia5ok4oGa9NihETm5Quf6JsUi-VJtNWnp6VxsaS2v8DuxGMFd1ttnuUhW6noCQsR7OeuQuvrreqeILQu04dFsAGyT3yMsZ6aLIKHMOIb331N5w8HDKR9qTqmouc//") no-repeat;
left: 70px;
top: 325px;
}
#menu .rss span {
width: 130px;
height: 30px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSCGu2qrpfSIJR4WWb_7UoiIhJFBLZGkKYU1K8N_2FeOogCSsamk0wXsAcZTKJsXKP1tnT_1NcOz-qXIQlNGg0_ieIWL2FFljN3Y1-BXL4rj1VcFijFy0SIcvflKpmpU7Vt4AkY66AI0A//") no-repeat;
left: 200px;
top: 0px;
}Silahkan sobat ganti URL gambar-gambarnya, dengan gambar yg sobat inginkan..
Langkah 2
Save template.
Langkah 3
Tambahkan kode dibawah ini pada Halaman Add Gadget HTML / Java Script
<ul id="menu">
<li><a class="home" href="LINK">Home<span></span></a></li>
<li><a class="design" href="LINK">About<span></span></a></li>
<li><a class="tut" href="LINK">Aboits<span></span></a></li>
<li><a class="rss" href="LINK">RSS<span></span></a></li>
</ul>
Ganti tulisan LINK dengan URL Link yg akan sobat tuju.
Source Code Menu Image CSSKlik disini untuk mengambil semua source code Menu Image CSS
Langkah 4
Save template sobat dan lihat hasilnya.
Langkah 5
Selesai
Selamat mencoba dan semoga bermanfaat.
Posted by Girant_31
on 04.24. Filed under
Css,
Tips n Trik
.
You can follow any responses to this entry through the RSS 2.0.
Feel free to leave a response
kalau saya masih newbie bgt nih sob, tp bolehlah saya coba dulu
@5751663382226089606.0
Engga mas..
Hanya sedikit pengangkatan Image az..
Di upload lg az mas gambarnya..
Agak rumit dikit yang ini mas...tapi nggak apa2...buat latihan...trims yaow...
@120598496780341435.0
Monggo mas..
@9134848735571868550.0
Di ijinkan mas.. hehe..
Silahkan sobat ganti gambar-gambarnya yang dicetak Biru Tebal..
setelah pak liek pentelengi ... kok gak ada yang warnanya biru tebal ....
kunjungan pagi hari sob
dapat ilmu yang bermanfaat
terima kasih
eh jadi keren yah ^____^
Hmmm.. cantikk n atraktive..!!
@3667413217526243593.0
Sama-sama mas..
@2011811452483030624.0
Ya gitu dech.. hehe..
@8606614659663647404.0
Masa sih mas??? hehe..
wew menunya keren gitu yah ,mainan html lagi ni
@4989653708325474106.0
iya mas... selamat mencoba
Sbg newbie, sy belum begitu paham CCS. Tapi.. bay de wey bas wey on de wey, thank infonya. menambah wawasan khususnya utk pemula seperti sy ini. happy blogging..
manfaat lainnya apa brader?
Keren abiz mas..ane liat demo na wawww...mantap mas...kalo bikin benner link gimana mas??ane belum punya ni benner link mas...
Keren abiz mas..ane liat demo na wawww...mantap mas...kalo bikin benner link gimana mas??ane belum punya ni benner link mas...
@2652134870069525515.0
Ok dech..
Happy blogging jg ya..
salam hangat dari ane..
@8362510103888825610.0
Ga jg mas..
Hanya pengangkatan sedikit bt image nya..
kalo ingin lbh ringan, ganti az image nya mas dg ukuran yg lebih kecil..
@2873090187953553558.0
Sama halnya dengan menu biasa mas..
hanya ditambahkan effect image az supaya lebih menarik..
Waw......., It's look beautifull.........
Apalagi kalu pakai css3... Hehehehehehe........
Met pagi yah ^_____^
blum ada tutorial lg yah
mampir lagi nich sob
gpp ya...
jujur sob, saya gak mudeng.. tapi niat saya memang mau komen disini tuh..
abiz ngeliat demonya keren juga ternyata hhe......boleh nie.....sedot tutornya dulu ah .... makasih Sob......sorry nie agak telat.....happy blogging...
salam kenal..:)
@2236664897607388900.0
oh gt ya..:)
Berkunjung untuk memberikan semangat agar terus berbagi dengan ilmunya.. :)
selamat malam kawan....... nungguin bola mulai mampir dulu :)
met pagi sob berkunjung nich
@6290490040020764742.0
Sdh tuh.. Baru az update.
@7239259899794483096.0
Betul mas..
Cuman ane blm Faham bngts tntng CSS3
@6731598762332574648.0
Ya GPP dunk..
Masa GPP lah.. hehe..
yg sering2 jg gpp ko mas.. hehe..
@6084436512446777122.0
Sama-sama mas..
@7370000632299845413.0
Wah.. makasih ya bt koments nya..
BTW, ga mudengnya dmn nya ya mas??
@2283035005205006789.0
Salam kenal jg mas..
Terimakasih sidah nyempetin mampir kmari..
@6287174272355150059.0
Gini az dech mas.. susah jg klow lwt form komentar..
Kalo berkenan, ane minta backup an template punya mas..
ntr ane edit..
gmn??
@6726422835552232200.0
Met siang jg mas.. :D
@1472582484961652958.0
Maaf mas ane telat..
Terimakasih ya mas ats kunjungan nya..