Banner 468 x 60

Advertisment 468 x 60
Loading...
Navigasi Style CSS Menu Putri Malu

Navigasi Style CSS Menu Putri Malu

Unknown Kamis, 01 Mei 2014 0 komentar Print

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.
Advertisment 300 x 250
Advertisment 300 x 250

0 Response to "Navigasi Style CSS Menu Putri Malu"

  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Navigasi Style CSS Menu Putri Malu" ini bermanfaat, share ke jejaring sosial.
Konversi Kode