Catatan Si DjaiL

Cara Membuat buku Tamu di blog

Posted by: zonder77

Sebenarnya banyak web yang mnyediakan fasilitas pembuat buku tamu seperti www.shoutmix.com, www.cbox.com dsb. untuk pembuatannya silahkan coba :
* Kunjungi www.shoutmix.com dan klik create your shoutbox now
* Pada create account masukan seperti biasa (register) dan jangan lupa lakukan centang pada katak sebelah kanan I have read and agree on the term service lalu klik continue
* sahabat blogger akan disediakan tampilan widget shoutmix pilihlah sesuai selera (choose style)
* Pada tahap place on site, klik go to my control panel now
* Pada quick start klik get codes
* Kemudian klik place shoutbox on wabepage Sepetri biasa copypaste-kan kode HTML pada blog anda dan selesai

Lebih lanjut tentang membuat buku tamu, Kalau sahabat blogger pengen punya buku tamu seperti yang ada di blog saya mari simak yang berikut ini ;

1. Masuk ke account Blogger , pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:



<div class='widget-content'>
<div class="box"><h2>Guest Book</h2>
<div class="textwidget"><!-- Start Shoutbox light effect by Pandu -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>
$(document).ready(function() {


//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {


//Cancel the link behavior
e.preventDefault();


//Get the A tag
var id = $(this).attr('href');


//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();

//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});


//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);
});

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});

//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script> 



<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #Pandushoutbox {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>


<ul><center> <a href="#Pandushoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">
<!-- Start Shoutbox --> 

<div id="Pandushoutbox" class="window">


<!-- paste kode buku tamu kamu disini -->

 
<div id="tutupan"><input type="button" value="Close" class="close" />  

</div></div><!-- End Shoutbox --> 
<div id="semah"></div></div>

<!-- End of Shoutbox light effect by Pandu --></div></div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogid=3763532167321085438&widgettype=html&widgetid=html10&action=editwidget&sectionid=sidebar' onclick='return _widgetmanager._popupconfig(document.getelementbyid("HTML10"));' target='confightml10' title='edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>





4. ganti kode <!-- paste kode buku tamu kamu disini --> dengan kode buku tamu kamu.

5. Selamat mencoba!

This entry was posted on 9:08 PM . You can leave a response and follow any responses to this entry through the Subscribe to: Post Comments (Atom) .

1 komentar

Hehehe,kalo buat guestbook n komentarnya ada tepat dibawah buku tamu tsb,gimana caranya?? Trus cara biar ada emoticon ato smiles pada kiriman komentarnya gimana ea¿?

Post a Comment

>

ShoutMix chat widget

Guestbook Rolling Widget