Belajar SEO Blogspot

Cara Mempercantik Tampilan Buku Tamu

Hai sahabat blogger,dan para pengunjung setia computer4rt,pada postingan kali ini saya ingin share tentang gimana caranya membuat shoutmix atau buku tamu lebih keren :),dengan sedikit memberikan variasi pada code html akan sangat berguna buat percantik tampilan blog atau buku tamu anda :),ya mungkin tidak usah basa-basi langsung saja dek rohmad bahas,ini SSnya.

Bagaimana?tertarik?ayow disimak gampang kok cuma 3 sampai 4 langkah saja :)


1. Siapkan kode Buku tamu Chat anda,kode ini adalah code yang anda dapat dari penyedia buku tamu anda.

2. Masuk Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript.


3. Masukkan kode yang ada di bawah ini
ke dalam kontennya atau kolom html yang tadi.

<script>
$(document).ready(function() {
//select all the a tag with name equal to syam

$('a[name=syam]').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 moveHeight = $(document).height();

var moveWidth = $(window).width();


//Set heigth and width to move to fill up the whole screen

$('#move').css({'width':moveWidth,'height':moveHeight});


//transition effect

$('#move').fadeIn(500);

$('#move').fadeTo("slow",0.5);


//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(1000);


});


//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();



$('#move').hide();

$('.window').hide();

});



//if move is clicked

$('#move').click(function () {

$(this).hide();

$('.window').hide();

});



});

</script>

<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#move {

position:absolute;

left:0;

top:0;

z-index:5000;

background-color:#000;

display:none;

}



#house .window {

position:fixed;

left:0;

top:0;

width:330px;

height:479px;

display:none;

z-index:9999;

padding:0px 100px 0px 0px;

}
#house #shoutmix {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrM_wlat8YejHufd5YhtKGIsBGS6p964Kx1W-xXD7yIh5K5kpv7EqzfvVnztQ2sRubv0cCEfq4ySZit0u4oLZiP3mSpKztiqVK15e38SbfEH6HaYqQzOe7DKnxSgqj7KPAKX6ZvNPIDzv/) no-repeat 0 0 transparent;

width:330px;

height:479px;

padding:83px 0px 0px 0px;

}
#closed {

padding:2px 0 0 0;

}

</style>


<ul><div style='display:scroll; position:fixed; top:130px; right:3px;'>

<a href="#shoutmix" name="syam"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdtkAKBRlCFy6eo6Dq528XPMU5jxi3QxCDSNPLoRIMaWKoOXm9ZNlQ5D9WK0igXU2BfkP1VNsL3P3I95DIZkJcjt6RXKi0vOtZ_KR1xS_gxCHhnQ0c58VGrI0CqR2qeANfQtsv0ur2Iw/s128/template_tamu.gif" width="34" height="125" /></a>
</div>
</ul>

<div id="house">

<!-- Start Shoutmix -->

<center>

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

Masukan kode buku tamu disini


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

</div></center></div><!-- End Shoutmix -->

<div id="move"></div>

<!-- End of Shoutmix light effect -->

4. Ganti tulisan yang berwarna merah atau tulisan "Masukan kode buku tamu disini" dengan code buku tamu anda.


5. Simpan dan anda lihat hasilnya.