Membuat buku tamu Panel Slide Vertikal jquery
16:19:00
By Unknown
Membuat buku tamu Panel Slide Vertikal jquery, dengan ini akan memudahkan kita untuk saling sapa dengan
para bloger lainya. Memang kita di susahkan dengan berbagai macam cara
yang unik untuk menampilkan buku tamu itu sendiri. Nah, sekarang ini
gue akan buat artikel tentang cara membuat Buku Tamu Slide Vertikal
Dengan Jquery yang akan tampil jika diKlik.Contoh hasil bisa Anda lihat seperti disamping ini :
Caranya membuatnya sebagai berikut :
Login di blogger Anda
* Masuk ke Dasbor
* Pilih Tata Letak / Rancangan Dan Edit HTML
* Klik "Expand Template Widget"
* Jangan lupa untuk memback-up template anda terlebih dahulu :
1. Cari code : ]]></skin>
Sisipkan code berikut di Atas-nya :
.panel2{
position:fixed;
top:20px;right:0;
background:#000;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
border:1px solid #940000;
width:350px;height:350;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;display:none;
padding:10px 60px 10px 30px}
.panel2 p{
color:#ffffff;
margin:0 15px 0 0;
padding:0}
.panel2 a,.panel2 a:visited{
color:#940000;
text-decoration:none;
border-bottom:1px solid #9FC54E;
margin:0;padding:0}
.panel2 a:hover,.panel2 a:visited:hover{
color:#fff;
text-decoration:none;
border-bottom:1px solid #fff;
margin:0;padding:0}
a.trigger2{
position:fixed;
text-decoration:none;
top:50px;right: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/AVvXsEhbq04v-t4UR6nHR9beVgZxZJ2NUR0j0RsZIzb5BmythZh24V7KDLOJmYDLK_sF2AbdfDt1YyRRCZ0B-30ZD0ukR4jYAA_z6GR7zcu_StMdLbEc7jAIA3hIOjQkhh1bJ4fR9_IRRCqJUD4/)85% 55% no-repeat;
border:2px solid #940000;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
display:block;padding:10px 35px 10px 10px}
a.trigger2:hover{
position:fixed;
text-decoration:none;
top:50px;right:0;
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/AVvXsEi-F4mxbbkeJsz6XhO1OQo07i8aL0a4jkeQJfyDirOdcunJX5IK6cxabnLhEo1Vg7Smdo7qeGHtLjWpASPgC93kJOCPkiZR47EOjVupredvv4ZKesRI77DWUgd0MT59SaBY6CkP0BawAz0/) 85% 55% no-repeat;
border2px solid #940000;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
display:block;padding:10px 40px 10px 10px}
a.active.trigger2{
background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-F4mxbbkeJsz6XhO1OQo07i8aL0a4jkeQJfyDirOdcunJX5IK6cxabnLhEo1Vg7Smdo7qeGHtLjWpASPgC93kJOCPkiZR47EOjVupredvv4ZKesRI77DWUgd0MT59SaBY6CkP0BawAz0/)85% 55% no-repeat}
.columns2{clear:both;width:330px;line-height:22px;padding:0 0 0 20px}
a:focus{outline:none}
.panel2 img{
background-color:#262626;
border:1px solid #333;
float:left;margin:3px 3px 6px 8px;
padding:5px}
.panel2 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}
2. Cari code : </head>Sisipkan code berikut di Atas nya :
<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(){
$(".triger2").click(function(){
$(".panel2").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
3. Selanjutnya cari code : </body>
Dan masukan code berikut di Atas-nya juga :
<div class='panel2'> <h3>Buku Tamu</h3> <= Isikan dengan Buku Tamu Anda => </div> <a class='triger' href='#'>SHOUT</a>. Warna yang di block hijau, bisa anda ganti Alamat Buku Tamu ( shout box ) milik anda.
. Selamat mencoba, dan semoga berhasil . . .
0 komentar: