Thursday, May 31, 2012

Membuat Guest Book Tersembunyi pada Blog



Assalamu'alaikum sobat kali ini saya akan memberikan trik (cara mudah dan cepat) membuat buku tamu di blog sobat seperti gambar di atas. buku tamu ini berfungsi untuk para pengunjung dapat ber-chat dengan pengunjung yang lain maupun dengan admin (administrator). Khusus kali ini saya buatkan untuk sobat dengan berbagai/bervariasi warna dengan photoshop. bagaimana? langsung saja. mau buat kan???
ikuti langkah-langkah berikut dengan teliti dan benar : (OK!!)
1. login ke blogger sobat (so pasti...)
2. pilih layout/tata letak > add gadget/tambah gadget > pilih HTML/Javascript > copas kode berikut > kemudian simpan
kode : 
<style type="text/css">
#gb{
position:fixed;
top:23px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

( Letakkan kode buku tamu (cbox, shoutmix, dsb) sobat disini)

<br/>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

3. ganti berwarna merah dengan kode buku tamu sobat!

4. ganti kode berwarna hijau ( #A5BD51) dengan warna border buku tamu sesuai keinginan sobat, bisa lihat/copas kode  warna disini (colour pallete)
       
5. ganti kode berwarna biru dengan gambar buku tamu yang sobat buat atau dapat mengganti dengan URL gambar berikut : (untuk URL diatas buku tamu berwarna hijau (default))

note : untuk meng-copas URL gambar di bawah juga bisa klik kanan gambar dan klik "Copy Image Location"

A. Buku Tamu :


1. warna biru, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/buku-tamu/buku_tamu.png?attredirects=0

     

2. warna merah, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/buku-tamu/buku_tamu_red.png?attredirects=0


3. warna cokelat, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/buku-tamu/buku_tamu_brown.png?attredirects=0


4. warna ungu, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/buku-tamu/buku_tamu_purple.png?attredirects=0


5. warna orange, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/buku-tamu/buku_tamu_orange.png?attredirects=0


B. Guest Book :


1. warna hijau, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/Guest_Book.png?attredirects=0

2. warna biru, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/Guest_Book_blue.png?attredirects=0


3. warna cokelat, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/Guest_Book_brown.png?attredirects=0


4. warna merah, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/Guest_Book_red.png?attredirects=0


5. warna ungu, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/Guest_Book_purple.png?attredirects=0

6. warna kuning, URL : https://sites.google.com/site/bloggerdata001/home/guest-book/Guest_Book_yellow.png?attredirects=0

______________________________==================_______________________________

6. Jangan kemudian simpan/save dan sesuaikan letaknya, SIMPAN!!!

7. lihat hasilnya, bagaimana???

Terima kasih semoga bermanfaat!!!
Wassalamu'alaikum !

0 comments:

Post a Comment