Sliding Menu Panel
Penerangan:Apabila klik pada buka menu,sebuah menu akan dibuka.Ia membuatkan blog kelihatan lebih kemas dan menjimatkan ruang sekirannya korang ada banyak benda nak letak.
Menu ini adalah dibuat menggunakan slider jQuery.
Cara Pemasangan
1.Log masuk ke blogger dashboard anda
2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html
Cari kod
<head>
3.Pastekan kod dibawah selepas kod <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Abrir menú" to "Cerrar menú" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});</script>
<b:if cond='data:blog.pageType != "item"'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>
3.Cari kod
]]></b:skin>
Pastekan kod dibawah sebelum/diatas kod ]]></b:skin> tersebut
/* Top Sliding Menu
----------------------------------------------- */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}
.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPObUiCjfc1u48HAPEs7GfhFJ0DXJHP17QmILvgQWblO55T2FELIHEzXZqVPwVRBdfunBJ4E6Gj0oFd_hJjKinCk4uO06aFw8Je2XZgmyyxncm5dEw4NufCiKHHVz7wiiabSYM_9FOr8b7/s1600/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh57OYjYCl_T2UKmqxcytembhZ7DHjZeJ5jmhBRJKPy_X_YHRipduhmx3GuPp24XdArZL7cml2l7nwfsIGEnzoZ3jZUdpS_KsX6TTIffFSYSXVer5mBrSrr61sQANUqOw0jYcB2J7WQ5c3l/s1600/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7p5-NewOV8k7x6WHKwdUdozhVZAsFu5zmEBzX0wfacyuXfOklNU5qYeMxT-uRQJ91bvpg8ntaMFCqnRrmeM3wjDETaYDUCjecOMrJ4zEPrfQNevP5TBIAc9acvvab6MyTyW-9YnM8Fvv/s1600/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-yZuX0Aw94InQwq2_5Oe_vQwcivuIuJlT0hvZa3T57uHl_Iq1KM0u2WvpXDucl9w5fvDBwdxwm1lm_2U2QNmdHAdJ-Wq9GmNst1UVSFeC_i73xg0IXh278pTygV0-zw-9cK-E7HxuwfyG/s1600/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivO8BMUR6FGUBzioJKe1OmrXx7Jus-0kc39BiZkU01R8eZp_VvDcgElBb1RX1tizNJe2VSNfXnBw-SbfS93ExaWvDxDA3in2fYmzD9IGzIimwVxHvmtGT89K7nQ8pAPPzLEAVvY1i44aqI/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0MJdbWtA4GrdsP9V2mNtvXERoumX1dG0mG5Kl4Mwx3u2a7IXxxeJCD3q3zKSz0Uptr29HkZzj7RT4t2ZwKuNiDQWnJrJ5JMgp-nhaveBHXG3ZgCw5gEQMzXWF6eSjHxaFePz4paHWp_Ah/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivO8BMUR6FGUBzioJKe1OmrXx7Jus-0kc39BiZkU01R8eZp_VvDcgElBb1RX1tizNJe2VSNfXnBw-SbfS93ExaWvDxDA3in2fYmzD9IGzIimwVxHvmtGT89K7nQ8pAPPzLEAVvY1i44aqI/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0MJdbWtA4GrdsP9V2mNtvXERoumX1dG0mG5Kl4Mwx3u2a7IXxxeJCD3q3zKSz0Uptr29HkZzj7RT4t2ZwKuNiDQWnJrJ5JMgp-nhaveBHXG3ZgCw5gEQMzXWF6eSjHxaFePz4paHWp_Ah/s1600/bt_close.png) no-repeat left -19px;}
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px; /* Alto del slide */
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #FFFFFF;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimXXN5Iqk4o-_jiU983U_Pew4U52cRIYWQYWgQkzdivh9p2tuEdKeE7SGQ5jgTmB72zIpbP7S2WMJLw6Zo2RmVgvQszFmGlOsc5BVRhI12mZQEnDcpXGZOlh7WiOrFtAUn-EIdOg71fsqc/s1600/bt_register.png) no-repeat 0 0;
}
#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUtmicbP5w9E0QyUnocISnJZv7QpsGGWrUyW99iKq6Q8TDQqlD7MZzkvbWucLdZR-JQoWVENzP_Ld6yrcY1ecTIdvNVz1HaogNXfjVbK2ODXdlp5HKHMQGLRq7NcbwLsYnHiNHmkHHCfF/s1600/bullet_blue.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #999;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}
4.Cari kod
<body>
Pastekan kod dibawah selepas kod <body>
<!-- Inicio top sliding menu -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<!-- Primera sección -->
<div class='left' style='width:240px !important'>
<h4>Hai Selamat Datang!</h4>
<p>Follow melalui social network atau subsribe melalui feed</p>
<div align='center'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6Fc8UbQQgdfEZXG6doyoLouLT1TeCaoUHaGWaJVuPD9v3RqbxebwyapqZbooNQQfyJZ7KVsCQLdKb9zG2aWLXAvSAjM8aozQRJ9C2ajU5AA2SbJPXr9AfM2KcvKc4Q9XDfHHdWmEzkVe/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_erwivfoUwXBO94jPCeMk1sODiDOnST-VGf2ljzxgg_vyMI9shssSwfIuuvOo6yYnnRRdh09RIkvK6C6qsgkHgpTiwjG9xvOCiuvOjKay_0f2Amh5PUsZh0Jax4Kv7QJE1Oc9Myy1olB/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjkVVxO5WHX2KIYJ3lP1Ien7Sjb72zOzXXCmIuMEeeE2AU_w41kDDQCwjNFqFmpjoqe3X7r3lzO41vk0pk8rJMAE7cUseY4QB6p7QYG3VEgBCkCykE4CUl2UggPG_Ug44kJ_ubPe_WtQ2/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>
</div>
</div>
<!-- Segunda sección -->
<div class='left' style='width:320px !important'>
<h4>Kategori</h4>
<div id='slide-menu'>
<ul>
<li><a href='URL link'>Menu item 1</a></li>
<li><a href='URL link'>Menu item 2</a></li>
<li><a href='URL link'>Menu item 3</a></li>
<li><a href='URL link'>Menu item 4</a></li>
<li><a href='URL link'>Menu item 5</a></li>
<li><a href='URL link'>Menu item 6</a></li>
<li><a href='URL link'>Menu item 7</a></li>
<li><a href='URL link'>Menu item 8</a></li>
</ul>
</div>
<div id='slide-menu2'>
<ul>
<li><a href='URL link'>Menu item 1</a></li>
<li><a href='URL link'>Menu item 2</a></li>
<li><a href='URL link'>Menu item 3</a></li>
<li><a href='URL link'>Menu item 4</a></li>
<li><a href='URL link'>Menu item 5</a></li>
<li><a href='URL link'>Menu item 6</a></li>
<li><a href='URL link'>Menu item 7</a></li>
<li><a href='URL link'>Menu item 8</a></li>
</ul>
</div>
</div>
<!-- Tercera sección -->
<div class='left right'>
<h4>Subscribe blog!</h4>
<p>Subsribe</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Nombre-del-Feed'/>
<input name='loc' type='hidden' value='es_ES'/>
<input class='bt_register' type='submit' value='Suscribe'/></form>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Selamat Datang!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Buka menú</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup menú</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fin top sliding menu -->
Save dan lihat hasilnya.
Sekiranya korang guna Blogger Template Designer korang paste kod selepas:
<body expr:class='"loading" + data:blog.mobileClass'>
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.