Posted by : Karta_Jaya

Salam Blogger....Hari ini saya akan memberikan materi tentang membuat buku tamu tersembunyi. Tetapi ketika dibuka, semua halama blog akan kelihatan gelap. Tetapi sebelumnya saya sudah pernah menulis Cara untuk Menyembunyikan Buku Tamu dengan Cara Rolling.
Nah jika sobat blogger, sudah mempunyai buku tamu pada blog, langsung saj ikuti langkah-langkah berikut. Tetapi jika belom punya silahkan buat buku tamu anda di SINIIIII.....
Oke..kalau sudah siap langsung saja kita membuat buku tamu yang tersembunyi..Gooooo

Cara Membuatnya adalah..


1. Anda sudag berada pada Dasbor Blog. Jika belum Login dulu.
2. Jika sudah Login, pilih Rancangan
3. Pada Tata Letak, pilih Tambah Gadget
5. Kemudian pilih HTML/JavaScript, dan letakkan kode berikut di dalamnya.

<!-- Start Shoutbox light effect by azis -->

<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 #azisshoutbox {

background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.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="#azisshoutbox" 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="azisshoutbox" class="window">

SIMPAN SCRIPT SHOUTBOX KALIAN 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 azis -->
</div>

6. Jangan lupa disimpan

Catatan
  • Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
  • Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
  • Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
  • untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.
>>Tambahan<<
untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah ini :

http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png

http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png

http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png

http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png

Tampilan button shoutbox diatas letaknya didalam sidebar, Nah bottom shoutboxnya bisa kita pasang di samping secara melayag.
Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:
<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
Ganti kode tersebut dengan kode ini:
<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#azisshoutbox" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a>
</div>
</ul>
Kemudian simpan....Semoga bermanfaat..
Dibalik penulisan Artikel ini

{ 5 komentar... read them below or Comment }

  1. klo memasangnya melayang dikiri gmna yh gan?

    BalasHapus
  2. Coba anda edit kode seperti berikut ini:

    position:absolute;

    left:0;

    top:0;

    Silahkan anda coba-coba aja.
    Mohon maaf, jika jawabnnya tidak membantu.:-L

    BalasHapus
  3. nice tutor brai .,., kunjungi balik yah www.archer.biz

    BalasHapus
  4. Aku dah berhasil pasangnya, :D tapi kenapa gelapnya ngga full ya.? tolong dong biar full ~x(

    BalasHapus
  5. @Fendy : coba edit kode berkut ini ini:

    background-color:#000;

    BalasHapus

Tukaran Link Yooo...Silahkan Masukkan Nama dan URL Blog Kamu di Dalam Kotak di Bawah Ini. Silahkan Konfirmasi Saya di HUBUNGI KAMI untuk Melakukan Link Balik ke Blog Anda. Terima Kasih

Terima Kasih Telah Bertukaran Link Dengan Kami. Secepatnya Akan Kami Link Balik

Welcome to My Blog

Blog Archive

Tips Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.





Page Rank Checker Logo Forantum I Blogging Is My Life Photobucket Blogger Help Templates Widgets SEO Tips aRvaNs Site's WAHYOKU BLOG

Jika Sobat Menghapus Link TTB dari blog sobat, maka TTB-pun akan Berbuat hal yang sama. Adil kan?




Silahkan Anda Klik Salah Satu Link Iklan Di Atas


Widget Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.


- Copyright © TIPS dan TRIK BLOG -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -