DickeyMaru DickeyMaru
DickeyMaru v7 200k IDR
Guest
Book

koleksi Style Buku Tamu

Author: HarisKhan 21.10 18 Comments

Banyak sekali sekarang Buku Tamu dengan berbagai gaya dan fitur seperti Melayang (kanan, kiri, bawah, atas), Sembunyi, Folting, Tanpa di Klik Terbuka Sendiri? dan masi banyak lagi. Semuanya bagus-bagus, namun dari beberapa Buku Tamu yang saya temukan ini. tarulah di htmljavascipirt
 
                                                                         floating kanan
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

keterangan yang tulisan bewarna merah ganti dengan code cobox mu
                                                                     floating kiri

<style> #hcl { position:fixed; top:50px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:35px; float:left; cursor:pointer; background:url('http://4.bp.blogspot.com/-2XUNMm7LJnU/TqfPCFpS5aI/AAAAAAAAAKg/s57yOLeJrXg/s1600/tabs.png') no-repeat; } .hclcontent { float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px}
 .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">

&lt;!-- Ganti ini dengan kode buku tamu kamu --&gt;

<br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->  </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div>   <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script></div>

keterangan yang bewarna merah ganti dengan cbox mu

Slide  


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});


});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background: #f90;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-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-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://lh3.googleusercontent.com/-XGxvD-bjtLk/TXo6ZGh056I/AAAAAAAAAUI/zvBMp0DrML4/s1600/btn-slide.png) no-repeat center top;

}
.btn-slide {
background: url(https://lh5.googleusercontent.com/-Ia33wJE4nHY/TXo1KNUSasI/AAAAAAAAAUE/Uss0CKLZP9U/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>

<div id="panel">

<!-- Ganti ini dengan kode buku tamu kamu -->

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

keterangan yang bewarna merah ganti dengan code cbox mu
yang bewarna pink kantulisan nya with ganti dengan warna yang kamu suka tapi pakai bahasa inggreish
yangbewana hijau kantulisan nya bukutamu ganti dengan :misalnnya contoh:chat nah seperti itu
dah selesai dehh                                                                    
Share and Backlinks
About Hariskhan
Awalnya cuman iseng main blog lama-lama jadi Gimana gitu saya senengngotakngatik,udah aboutnya sekian aja jangan kepo, pliss komentar di Artikel ini Terimakasih
You Might Also Like This
18 komentar (click here to add new comment)
  1. @NARUTO VS SASUKE BATLLE makasih ya sudah pakai :-P

    BalasHapus
  2. Wah .
    mantap nih, tapi mendingan Chat Box di buat Posting/Laman aja, biar Blog gk berat sobat .
    Saran aja lho . :D

    BalasHapus
  3. ok deh seterah mu sob..... ;)

    BalasHapus
  4. Bisa dicoba sob. nice share. salam SASTRA REMAJA 11

    BalasHapus
  5. wihhhh....lengkap nih sob...saya copy ahhh biar gak lupa ya..
    makasih tutor dan koleksinya :)

    BalasHapus
  6. wah, buku tamunya banyak amat sobb. Jadi bebas pilih nih

    BalasHapus
  7. Mantep sob, tp ane udh bkin dp0stingan hhe

    BalasHapus
  8. ohh nga apah-apah hhhehehheh =))

    BalasHapus
  9. keren gan, ane bookmark ni

    BalasHapus
  10. Buku tamu yg hidden seperti ini pasti bisa menghemat space blog kita, thanks tutorialnya masbro... bermanfaat sekali :)

    BalasHapus

COMMENTS SOBAT :D

Labels

Like (y)

Pengikut

Hariskhanishaq

© 2008-2013 DickeyMaru v7 | design by Dark Ard ???? RedesignHarisKhan | Some Rights is Reserved
Selamat datang! di blog cahaya ilmu semoga artikel disini bermanfaat ^_^ ~