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.