Memasang Buku Tamu Dengan Effects Of Dark

Untuk melengkapi postingan atau articles tentang Memasang Buku Tamu kali ini blog O.W atau Oto Website akan membahas tentang Memasang Buku Tamu Dengan Effects Of Dark atau juga bisa di sebut dengan Efeck Gelap.
Maksud dari Memasang Buku Tamu Dengan Effects Of Dark adalah bila tombol buku tamu ini di tekan atau di klick maka seluruh halaman blog akan menjadi gelap, kecuali buku tamunya! Sebelum Membuat Buku Tamu Dengan Light Efeck para sahabat O.W udah pada punya akun SHOUTBOX/CBOX/SHOUTMIX kan? kalo itu pasti udah pada punya ya, karna blog ini tidak menjelaskan bagaiman cara membuatnya, karna sangat mudah dan semua blog sudah ada yang membahasnya dari dulu.
Untuk contohnyaBuku Tamu Dengan Light Efeck  mungkin sobat bisa lihat gambar berikut ini

Contoh Buku Tamu Dengan Effects Of Dark

Sobat perhatikan tombol buku tamu yang saya beri lingkaran putih, nah bila tombol tersebut di tekan atu di klick maka seluruh halaman akan menjadi gelap dan buku tamu akan muncul, begitulah sedikit rinciannya.
Nah udah pada jelaskna? sekarang kita akan bahas tentang cara Memasang Buku Tamu Dengan Effects Of Dark di blog sobat.

1. Masuk ke akun blogger sobat, bukan akun blogger tetangga, hehehe...

2. Pada menu sobat klick Rancangan ➡ Tambah Gadget di bagian manapun sobat ingin tombol Buku Tamu muncul.

3. Selanjutnya sobat pilih elemen HTML/Java Script.

4. Lalu sobat Copy kode berikut dan paste atau letakkan di dalam elemen HTML/Java Script tadi.

<!-- Start Shoutbox Effects Of Dark by Oto Website -->
<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 #kid53 {
background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJmjlmHCfo8F5oKXCageRnja5Hx1zolZ64zW5nQIw0I_lQf7dbpguXM_T72JjrqiUpfTbcY7H35sNehRF4WFwaKq0J_puuiQTLT8k990Vj5SW00DSrXIIY1N0I9kbtOdtWyfAnQMzcJc/s1600/bukutamu_O.W.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="#kid53" name="modal"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lt0YJ18ehgiAJik2fRj_vkuNTFfOglDWu87u2fuWaI7EaCJefNyAyK1HxRuoj9wab4NvUFQ6VmRDtx1-z68xtIllj5M-v0_jqf4zp7rpRrbvuWg1yOnwul-n1F2wxGkCr2sb31_HH6k/s1600/tbbbukutamu_O.W.png " border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">
<!-- Start Shoutbox -->
<div id="kid53" class="window">

LETAKKAN KODE BUKU TAMU SHOUTBOX/CBOX/SHOUTMIX DISINI

<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End Shoutbox Effects Of Dark by Oto Website-->

5. Simpan.

Keteranagan:
Ganti teks warna merah dengan kode script dari cbox atau shoutmix
Warna biru adalah Url gambar berikut:

Untuk backgroundnya sobat bisa ganti sendiri/buat sendiri, ini adalah url gambar background yang ada di atas/yang akan muncul.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJmjlmHCfo8F5oKXCageRnja5Hx1zolZ64zW5nQIw0I_lQf7dbpguXM_T72JjrqiUpfTbcY7H35sNehRF4WFwaKq0J_puuiQTLT8k990Vj5SW00DSrXIIY1N0I9kbtOdtWyfAnQMzcJc/s1600/bukutamu_O.W.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lt0YJ18ehgiAJik2fRj_vkuNTFfOglDWu87u2fuWaI7EaCJefNyAyK1HxRuoj9wab4NvUFQ6VmRDtx1-z68xtIllj5M-v0_jqf4zp7rpRrbvuWg1yOnwul-n1F2wxGkCr2sb31_HH6k/s1600/tbbbukutamu_O.W.png

Keterangan Tambahan:
Tombol atau button di atas berada di slide bar, jika sobat ingin meletakkan buttonnya di samping dan melayang, sobat cukup ganti kode

<ul><center> <a href="#kid53" name="modal"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lt0YJ18ehgiAJik2fRj_vkuNTFfOglDWu87u2fuWaI7EaCJefNyAyK1HxRuoj9wab4NvUFQ6VmRDtx1-z68xtIllj5M-v0_jqf4zp7rpRrbvuWg1yOnwul-n1F2wxGkCr2sb31_HH6k/s1600/tbbbukutamu_O.W.png" border="0" width="158" height="58" /></a> </center> </ul>

dengan kode

<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#kid53" name="modal"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDNY3YTuSeFvO5o47SRxxI56hZA-DGjsVqV2yzw6IaJBfTlf8B7qWEk0SYd6YtPIp4p4S6R2HmE20Ak203J31DkQgp2AlwHKoGNGueYtwdGpALY7qkZcdD1votX51MzkWi-aTE9dme_M/s1600/samping_O.W.png" width="158" height="58" /></a>
</div>
</ul>

dan ini adalah penampakan gambar button yang akan muncul, jika kurang suka silahkan sobat ganti sendiri,ok!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDNY3YTuSeFvO5o47SRxxI56hZA-DGjsVqV2yzw6IaJBfTlf8B7qWEk0SYd6YtPIp4p4S6R2HmE20Ak203J31DkQgp2AlwHKoGNGueYtwdGpALY7qkZcdD1votX51MzkWi-aTE9dme_M/s1600/samping_O.W.png

Oke, saya rasa cukup untuk kali ini, dari blog ini saya ucapkan selamat mencobat, dan sukses.

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentan postingan/articles di atas!