Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

Navigasi Style CSS Menu Putri Malu

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

Trik Blogger

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>


/* Awal CSS Menu Putri Malu*/
#menumalu{
top: .4em;
right:2em;
width:230px;
position: fixed;
z-index: 200;
}
#topi {
margin:0 ;
padding:0;
height:55px;
background:url(https://lh5.googleusercontent.com/-fezRGemt3IA/TuyZsblTRNI/AAAAAAAAF3w/3MWopHdsAEU/s800/malusprite.png) no-repeat 0 0;
border-bottom:2px solid #3FE9C9;
}
#isimenu{
margin:0 ;
padding:0;
width:230px;
background-color:#962BBD; repeat-y;
}
.sepatu{
margin:0;
padding:0;
height:78px;
background:url(https://lh5.googleusercontent.com/-fezRGemt3IA/TuyZsblTRNI/AAAAAAAAF3w/3MWopHdsAEU/s800/malusprite.png) no-repeat 0 -80px;
display:block;
border-top:2px solid #3FE9C9;
}
span.panwah,span.pantas{
width:27px;
height:26px;
display:block;
margin-left:103px;
margin-top:35px;
}
span.panwah{
background:url(https://lh5.googleusercontent.com/-fezRGemt3IA/TuyZsblTRNI/AAAAAAAAF3w/3MWopHdsAEU/s800/malusprite.png) no-repeat 0 -158px;
}
span.pantas{
background:url(https://lh5.googleusercontent.com/-fezRGemt3IA/TuyZsblTRNI/AAAAAAAAF3w/3MWopHdsAEU/s800/malusprite.png) no-repeat -27px -158px;
}

#isimenu ul, #isimenu li{
list-style-type:none;
}
#isimenu ul li {
margin: 0;
padding : 5px;
border-top:1px solid #3FCF7E;
border-bottom: 1px solid #3FE9C9;
}
#isimenu ul li a {
padding-left:5px;
text-decoration:none;
display:block;
}
#isimenu ul li:hover {
background-color:#ffd700;
}
/* Akhir CSS Menu Putri Malu*/



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.

Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

49 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?

wah setelah lihat demonya,hasilnya lumayan bagus juga ya mas,jadi kepikiran buat nyobain ini di blog saya :)

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

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger