Arif lAw

Arif lAw

Cara Membuat Buku Tamu Melayang di Blog yang Bagus

Posted: 11 Feb 2013 03:02 AM PST

Assalamualaikum Wr. Wb

Cara Membuat Buku Tamu Melayang di Blog yang Bagus | Nahh pada kesempatan yang baik ini saya mencoba menyajikan sebuah Tutorial yang mungkin udah biasa ada, dan saya juga rewrite dengan bahasa saya, bahasa anak Blogger gitu lohh hee.. Yahh biar lebih komunikatif dan mungkin lebih menarik jika saya yang menyampaikannya hee.. 

Apa sihh yang akan saya sampikan, heee kan udah ada tuhh di atas.. hee Cara Membuat Buku Tamu Melayang di Blog yang Bagus. Yappp bener banget tuh, di sini nanti saya akan memberikan Trutorial Blog yang lumanyan simpel tapi hasilnya Luar biasa bagusnya hee.. 

Cara Membuat Buku Tamu Melayang di Blog yang Bagus
Tampilan Button Buku Tamu
 Siapa sih yang nga tau Guest Book atau Buku Tamu ?? Buku tamu ini adalah Widget yang wajib ada buat blogger-blogger yang suka dengan Blogwakling, termasuk saya hee. Tapi karna saya udah jarang Online dan juga udah mualai banyak mengurus Blog jadi Aktivitas Blogwalking saya, tak kurangi hee. Maaf yaa buat temen -temen blogger yang udah mampir ke sini, tapi saya nga mampir ke tempat kalian. Sekali lagi Maaf yaa.

Oke udah.. sekarang kita masuk Ke Trutorial Cara Membuat Buku Tamu Melayang di Blog yang Bagus, emang sebagus apa sihh sampe-sampe di recomen. Nihh saya kasih sedikit gambaran yeee.

Cara Membuat Buku Tamu Melayang di Blog yang Bagus
Tampilan Buku Tamu Melayangnya
Gimana keren nga tuh?? Pasti keren donk dengan tampilan dan efek yang keren bikin betah dehhh buat selalu ngisi Buku Tamunya hee.

Pengin tau cara buatnya, yukk kita simak sama-sama.. jangan sampai kelewatan yaa nanti malah nga jadi hee biar nga banyak pertanyaan he. Oke deh berikut adalah Cara Membuat Buku Tamu Melayang di Blog yang Bagus :

  • Kita masuk Ke Blogger terlebih dahulu.
Blogger.com
  • Kalo udah kita ke Menu Tata Letak. 
  • Pilih Tambahkan Gadged.
  • Pilih yang HTML/Java Scrip.
HYML/Javascrip

  •  Setelah itu tambahkan Kode Html di bawah ini:
 
<-- Start Shoutbox light effect by Kiss -->
<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:450px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #kid53 {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:265px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
<div id="wadah">
<!-- Start Shoutbox -->
<div id="kid53" class="window">

Taruh Kode GuesBook Di sini

<div id="tutupan"><input type="button" value="Close" class="close" /><a style=" float:center; font-size:10px; color:#3B78CD; text-decoration:none;" href="http://ariflaw.blogspot.com">Blogger Tutorials</a>

</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by Kiss -->
 Menambahkan kode Html/javascrip
  •  Nahh Kalo udah dimasukin Tinggal Di Save dahh.
Masih binggung gimana cara pasangnya... nahh niee saya kasih Contoh pemasangannya di blog saya :

Ini Adalah Contoh Pemasangan Widget Buku Tamu Melayang Di Blog Saya


Demikian apa yanb bisa saya sampiakan mengenai Cara Membuat Buku Tamu Melayang di Blog yang Bagus, cari juga Cara Mempercantik blog yang lain di Daftar isi. Bila ada tutur kata yang kurang pas saya Mohon Maaf. Terimakasih saya ucapkan dan Wassalamualaikum Wr. Wb.

By Ariflaw Blog ---- Semoga Bermanfaat ^_^

Komentar

Posting Komentar

Postingan Populer