Navigasi Style CSS Menu Putri Malu
Pada hari ini diedisi ke 2 di bulan maret 2014 ini kembali saya berbagi tutorial yang sekiranya bisa di gunakan untuk anda semua, Sedikit kesibukan offline sehingga aktivitas blogging dan blogwalking saya agak tersita. Jadi maaf jika Saya belum bisa bw ke blog Anda semua, semoga setelah artikel ini saya publish akan segera saya kunjunungi blog sobat setia semua. Setelah kemarin saya publikasikan artikel tentang, Rujak tumbuk keliling, Maka pada kesempatan ini, Saya akan share cara membuat Menu putri malu, Sesungguhnya saya binggung untuk menamai menu yang saya bagikan ini. Namun dengan simpel saya namai saja dengan sebutan Menu malu. Yang penting nanti tampilanya jangan sampai malu-maluin ya sob..? hhhh
Untuk melihat tampilan Menu Putri malu ini silahkan klik : DEMO
Feature Menu putri malu :
Menu putri malu, saya namakan ini kenapa bisa namanya begitu.? Sesungguhnya itu hanya nama saja, sesuai dengan gaya nya menu ini akan menyembunyikan link label, atau link postingan jika mouse meninggalkan element menu putri malu itu. Namun jika ingin melihat link yang terkandung pada menu tersebut. Hanya dengan mengarahkan mouse anda pada bagian menu itu. Maka secara spontan menu akan membkanya dengan tampilan dropdown. jika anda berminat ingin memsangnya berikut ini akan cara memasangnya pada blog anda, secara lengkap dan terperinci :
Cara memasang Menu Putri Malu :
Pastikan anda sudah masuk di blog anda. Pilih dasboard, pilih template dan klik edite template. Selanjutnya Copy kode di bawah ini dan pastekan tepat diatas kode, >]]></b:skin> atau diatas kode, </style>
Selanjutnya masih diedite Html cari kode, <body> Kemudian copy kode Html di bawah ini dan pastekan tepat dibawah kode, <body> berikut dibawah ini kode html nya
<div id="top"></div>
<div id="menumalu">
<div id="topi"></div>
<div id="isimenu">
<ul>
<li><a href='http://karristaent.blogspot.com/search/label/Tips%20Trik%20SEO?max-results=6' title='Tips Trik SEO'>Tips Trik SEO</a></li>
<li><a href='http://karristaent.blogspot.com/search/label/Motivasi?max-results=6' title='Motivasi'>Motivasi</a></li>
<li><a href='http://karristaent.blogspot.com/search/label/Corat%20Coret?max-results=6' title='Corat Coret'>Corat Coret</a></li>
<li><a href='URL' title='Nama Menu'>Nama Menu </a></li>
<li><a href='URL' title='Nama Menu '>Nama Menu </a></li>
<li><a href='URL' title='Nama Menu '>Nama Menu </a></li>
<li><a href='URL' title='Nama Menu '>Nama Menu </a></li>
<li><a href='URL' title='Nama Menu '>Nama Menu </a></li>
</ul>
</div>
<div class="sepatu"><span class="panwah"></span></div>
</div>
Keterangan kode diatas :
Kode Html diatas silahkan ganti link Label atau artikel anda yang berwarna, dan yang berwaran biru Nama label atau nama artikel blog anda. Selanjutnya yang terakhir cari kode, </head> kemudian copy kode jquery dibawah ini dan paste kan tepat diatas kode, </head><script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
$('#isimenu').hide();
$(window).load(function () {
$('#isimenu').slideDown(1500, function () {
$(this).slideUp(200);
});
});
$('#menumalu').mouseenter(function () {
$('#isimenu').slideDown(1000, function () {
$('.sepatu span').removeClass('panwah').addClass('pantas');
});
});
$('#menumalu').mouseleave(function () {
$('#isimenu').slideUp(200, function () {
$('.sepatu span').removeClass('pantas').addClass('panwah');
});
});
});
//]]>
</script>
Penyesuaian :
Setelah semua element script diatas terpasang dengan benar silahkan, klik save/simpan template. Silahkan load salah satu artikel anda, jika pemasanganya dengan benara maka Menu Putri Malu akan terpajang pada Blog anda, jiak belum nampak silahkan baca ulang barangkali ada yang kelewat. Silahkan anda Berkreasi sendiri dengan menyesuaikan ukuran dan tata letak penempatan Menu tersebut. Selamat mencoba
Demikianlah tutorial membuat Navigasi Style CSS Menu Putri Malu, ini semoga bisa bermanfaat buat sobat semua, terima kasih atas kunjunganya dan partisipasinya, semoga tutorial sederhana ini bisa lebih di pahami dalam pemasanganya, jika mau bertanya silahkan pada form komentar yang tersedia. Salam blogging.
48 komentar
wah mantab tutorial tentang style css putri malu ini.. hehe
manteb banget tutorial membuat menu ini.. sayangnya blog saya sudah tersedia menu nya ... jadi kapan2 saya pasang deh ijin BM dulu :D
menu putri malunya benar-benar nggak bikin malu mas Karris, jago juga nih mas Karris soal css :)
waduh judulnya sangat menggoda sekali Mas Saud, dan hasilnyapun sesuai dengan judul, kalau di sentuk baru nungul tu menu hehehehe, ijin coot kode mas Saud
tapi putri malunya ndak akan murungkut kalau disentuh kan mas ?? :D
Wah keren mas namanya. Menu putri malu, pas menunya tambah kelihatan cantik ya mas. Tapi sayang saya belum bisa ngintip putri malunya mas, soalnya lagi pake hp nih mas. Hehehe
Wah keren mas namanya. Menu putri malu, pas menunya tambah kelihatan cantik ya mas. Tapi sayang saya belum bisa ngintip putri malunya mas, soalnya lagi pake hp nih mas. Hehehe
bagus mas menunya, efek pas jatuhnya mirip putri malu :)
kode scripnya tidak banyak ya mas, singkat dan mudah di pahami. saya izin bookmark yaa mas, akan saya praktekkan buat blogg saya. thanks mas :)
namany xixixi boleh juga mas saud keren anmanya saya lihat tadi demo nya juga bagus sama mau BM saja dulu mas ..:) salam mas saud
salam kenal kang saud..
keren nih menu nya, sesuai dgn karakter saya yg malu-maluin, ekh.. pemalu maksudnya :ss
Ijin bm dulu ya.. dan ditunggu kunbal & follbacknya :)
wah keren juga ya Mas :)
Keren juga kelihatannya tuh, Mas....saya buta kalau tentang HTML, he he....
keren banget , tapi lumayan banyak juga ya scrif nya hehe
Kalo pake dropdown gitu mempercepat loading ngga, Bang? Ada ngaruhnya?
sy dh lama nggak ubek2 css nih mas ..... :)
yia bos, bener2 mantap, unik juga namanya, hehehe...
sepertinya menarik juga nih untuk dipasang, ijin kopi kodenya yia bos...
wah keren sekali mas Saud navigasinya.. jadi gemes nih ketemu sama putri malu. hehee
Silahkan Mas Nico Mas Comtel di coba semoga bermanfaat :-bd
Makasih Mas Abdul atas pendapat juga kunjunganya, silahkan Mas
Dengan senang hati di persilahkan Mas :-d
hahhah =D Kang Ucup bisa aja, yah hanya alakadarnya sambil
Belajar aja Kang, semoga bermanfaat :)
mantap artikel nya ne, izin bookmark dulu..
Kunjungan nya ditunggu
http://dikirain.blogspot.com/
Owh.. putri malu... gerayangin pake mouse baru nongol dia... wkwkwk
wah bener-bener malu tuh MENUnya,dikeluarin eh masuk lagi tuh menunya hehehe.keren banget kang Karryst....
bisa dibilang navigasi jenis vertikal :D
silahkan Mas Arie jika ingin menggunakanya, makasih atas
Pendapat dan kunjunganya :)
Keren Mas menu navigasi style css putri malunya. Lama-lama pengin juga nih belajar sama mas Saud. ijin simpan ya mas. :D
Salam
bolak balik baca tetep ngga paham apa yang dimaksud sama navigasi putri malu...terpaksa klik demonya deh...bentar ya,mau liat demo nya dulu
Saya lihat demonya kayaknya bagus sekali mas,,thanks sharenya,, dapat ilmu baru
Silahkan Pak Uda, sama-sama saya juga belajar deh Pak
kiranya moal bakalan nutupin artikel mun muka blogna ngangge Hp kang?
kalo ndak di coba
kayaknya penasaran nih mas :)
setia sama yang lama aja deh :D
selamat malam mas , saya hanya bisa menyapa mas, update belum ada waktu ... lanjut terus mas saud... happi blogging ...
Putri malunya memang tidak bikin malu ya ? justru tampilannya semakin keren,.
wah memang menunya malu-malu nih mas, kalau kita lepas dian langsung ngumpet sesuai dengan namanya menu putri malu hehe...
wah namyanya unik kang, kaya tanaman perdu :D
Wah keren nich Kang Saud navigasi nya. Kang Sau ternyata jago Coding juga ya :)
Wah menu navigasinya keren pisan mas, tapi kenapa dinamakan navigasi style css menu pitri malu mas? Apa karna tampilannya yang ngumpet gitu ya hehehe...
salam sapa sahabat mas saud, scriptnya panjang sekali ni mas.... saya takut menambah menu2 atau widget takutnya speed blog turun ni mas
keren kang,,_
disentuh baru nongol tapi jangan putri malu-maluin
hehe.
Unik dikit Mas hhehe bisa aja Mas Muroi ini deh :)
keren, bener-bener cantik tampilan putri malunya mas
Saya simpan dulu script nya mas,ntar jika di perlukan tinggal di pasang.trims!
luar biasa mas karis, sangat menarik ini menu css nya dengan efek putri malu ya, bisa dicoba nih ;)
sebelumnya saya minta maaf ya ga !
anda tahu nggak tentang komposisi warna !
kunjungan malam mas,wah ternyata mas saud mahir css juga yah,saya simak dulu yamas
Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini
Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower