Buku Tamu, ala Panel Slide Vertikal dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini :

]]></skin>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4 :

.parno{position:fixed;top:40px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.parno p{color:#ccc;margin:0 0 15px;padding:0}
.parno a,.parno a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.parno a:hover,.parno a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.triger{position:fixed;text-decoration:none;top:110px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiGsZ3krXYIkqFv744yfrSoyAQudzzMD02MdEyj2rqi7XivvFhL177ec6YoJHaZbQlAUOcA_hk95D74bM7N8FFlD9OHLgxCM6Unds952vPU48-DOIB11GKo0Sz44Z8SVxfbHXyESz5vas/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.triger:hover{position:fixed;text-decoration:none;top:110px;left:50px;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMkpDD0S7HXzyRpzg15pf6vBla3hzuki33Df8z9u5S65OUidnohszJYpfXN7iXPTKJiZMWq90p1ZL6HAfgSCrJXKoDZme6TB4EuUJaFiYMWVQs0b9pIzaD798KzOuYC4JGxTi0RBcclaU/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.triger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.parno img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.parno h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Langkah 6
Cari kode dibawah ini :

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6 :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.triger&quot;).click(function(){
 $(&quot;.parno&quot;).toggle(&quot;fast&quot;);
 $(this).toggleClass(&quot;active&quot;);
 return false;
});
});
</script>

Langkah 8
Cari kode dibawah ini :  

</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8 :

<div class='parno'>
<h3>Buku Tamu</h3>
====== Kode Widget ShoutMix Anda =======
</div>
<a class='triger' href='#'>Guest</a>

Posted in: Label: Tutorial Blog

Related Posts / Artikel Terkait :