Buku Tamu Panel Slide Vertikal Jquery

Print this page

Buku Tamu Panel Slide Vertikal Jquery

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 saya  akan buat artikel tentang cara membuat Buku Tamu Slide Vertikal Dengan Jquery yang akan tampil jika  diKlik.

Contoh hasil bisa Anda lihat seperti dibawah ini :

Dan untuk demonya anda bisa lihat di blog saya, Tepat pada pojok kanan
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

      Kemudian

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/AVvXsEhYnizKH7GMwHn05GoqDPf27A_-zpnZDgtdg7wKo_lI0fxXexhbat7GQK17kOkYhyfYWqlCIrsJqKitahZsrKFfZQaEoPVNeaPIM4J_ZBjwtnIWjhXMpIDzGLLEE3Q8YjocSE2AeTqrlh8/)
  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/AVvXsEjzu7escg8mZsYjB7xv8RdbHFCaCAFlW7POMESaELIjIAV4kGjPh9B8jEFRyH89Y1H-7IDieDQRe03p1Ntr02XrhPOnakkpJ-JpccGYecsLr7U8_Q2sH5orlE39a4IdGMlvrIn4vya9cp8/)
  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/AVvXsEjzu7escg8mZsYjB7xv8RdbHFCaCAFlW7POMESaELIjIAV4kGjPh9B8jEFRyH89Y1H-7IDieDQRe03p1Ntr02XrhPOnakkpJ-JpccGYecsLr7U8_Q2sH5orlE39a4IdGMlvrIn4vya9cp8/)
  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(){

$(&quot;.triger2&quot;).click(function(){

 $(&quot;.panel2&quot;).toggle(&quot;fast&quot;);

 $(this).toggleClass(&quot;active&quot;);

 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 shout box  milik anda.
. Selamat mencoba, dan semoga berhasil . . .

Artikel Terkait