Cara Membuat Buku Tamu dan Lencana FB yang Keren Lagi Imut di Blog

Mengawali Sebuah coretan ketik di layar  monitor,,,mari kita ucapkan rasa syukur Alhamdulilah kepada Sang Pencipta tentunya Yang telah meberikan kita kesehatan sehingga Q Ingin Bisa Hadir untuk 1 tujuan yg pasti sharing ilmu dan pengalaman nya...untuk  Sobat semua, bersyukur pula atas PR1 nya yg telah diberikan mbh google pada blog ini, baru dua bulan ni blog berkelana di dunia maya, masih muda sekali umurnya udah dikasih PR1 ma mbh google,walaupun di kasih PR1 harus tetep semngat pokoknya...dan berterimakasih sekali, nah  habis trauma dengan kejadian kebaran kemaren kali ini hadir lagi dengan postingan baru tentunya!!!maap yah yang nunggu2 postingan baru lama menunggu!!!sobat bloger semua yang ini pasti semua udah pada tau dan mengerti tentang postingan saya kali ini, akan tetapi jika sobat semua mau buku tamu dan juga lencana FB yang bisa nongol ngilang,,,nongol ngilang dan tentunya bikin hemat tempat lah...dan seterusnya....yang pengen2 ajah silahkan sedot ajah ya...h he..he...he..bagi yang udah tau maap mungkin ni postingan udah basi kok diulang ulang,,,,he...he...yah sekedar sharing ilmu ajah nih...buku tamu dan lencana Facebook udah saya moderasi dengan desain saya sampek berbagai ragam desain saya buat...ampek moh moh pokoknya...untuk itu yuk kita ikuti langkah langkahnya.....

Tapi perlu diketahui sebelumnya sobat harus punya dulu BUKU TAMU entah shoutmix, cbox, shoutbox dan lain sebagainya...pokoknya harus punya dulu.
lansung aja ke TKP di bawah ini :

Silahkan Sobat masuk Tata Letak tambah Gadged kemudian HTML/Java Script dan masuk kan kode di bawah ini :

1. kode bawah ini untuk buku tamu yang ke 1

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #088A08;
background:#000000;
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">

<!-- Isi Dengan buku tamu yang sudah sobat punya? entah dari shoutmix,shoutbox,ataupun cbox dls </iframe>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
*untuk top:20px; :merupakan jarak keatas antara bukutamu dengan sidebar
*untuk height:200px; : merupakan panjang dari Ikon buku tamu
*untuk width:30px; : merupakan jarak kesamping ikon dengan buku tamu
*untuk yang ini http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif merupakan tombol/ikon buku tamu...jika sobat mau dibawah ini koleksi nya silahkan diambil

-http://i846.photobucket.com/albums/ab26/arifins/Facebook.png
-http://i846.photobucket.com/albums/ab26/arifins/fb.gif
-http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif
-http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif
-http://i846.photobucket.com/albums/ab26/arifins/SMIX-1.png
-http://i846.photobucket.com/albums/ab26/arifins/OKE.gif

*untuk yang ini merupakan #088A08 warna garis, sesuaikan dengan beground teplate sobat
*untuk yang ini merupakan warna beground buku tamu #000000 silahkan diganti warna sesuai selera sobat, jika belum tau kode warna silahkan cari tau DISINI
*untuk yang ini silahkan isi dengan buku tamu milki sobat <!-- Isi Dengan buku tamu yang sudah sobat punya? entah dari shoutmix,shoutbox,ataupun cbox dls </iframe>

2. Kode yang kedua untuk lencana FB atau pun buku tamu yang kedua juga bisa

kodenya :

<style type="text/css">
#hitsukeFX{
position:fixed;
top:300px;
z-index:+1000;
}
.hitsukeFXtab{
height:200px;
width:30px; float:left;
cursor:pointer;
background:url('http://i846.photobucket.com/albums/ab26/arifins/fb.gif') no-repeat;
}

.hitsukeFXcontent{ float:left;
border:2px solid #088A08;
background:#000000;
padding:10px;
}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
var w = hitsukeFX.offsetWidth;
hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
hitsukeFX.opened = !hitsukeFX.opened;
}

function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }


</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
<div class="hitsukeFXcontent">

<!-- img src="http://i846.photobucket.com/albums/ab26/arifins/facebook-2.png" <!-- Facebook Badge END -->

<div style="text-align:right">
<a href="javascript:showHidehitsukeFX()"> [close] </a>
</div>
</div>
</div>

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

keterangan :
*untuk top:300px; :merupakan jarak keatas antara bukutamu dengan sidebar
*untuk height:200px; : merupakan panjang dari Ikon buku tamu
*untuk width:30px; : merupakan jarak kesamping ikon dengan buku tamu
*untuk yang ini http://i846.photobucket.com/albums/ab26/arifins/fb.gif merupakan tombol atau ikon lencana fbnya jika ingin lebih bagus lagi silahkan sobat berkarya sendiri
*untuk yang ini merupakan #088A08 warna garis seuaikan dengan template sobat,agar lebih indah dan menarik
*untuk yang ini merupakan warna beground buku tamu #000000 silahkan diganti warna sesuai selera sobat, jika belum tau kode warna silahkan cari tau DISINI
*untuk yang ini <!-- img src="http://i846.photobucket.com/albums/ab26/arifins/facebook-2.png" <!-- Facebook Badge END --> silahkan isi dengan lencana FB anda, jika sobat belum punya silahkan membuat lencana di Fb sobat , dan perlu diketahui sobat jika sobat membuat lencana Fb untuk sekarang ini gak tau kenapa gak muncul gambar foto seperti punya saya, kenapa bisa begitu...ya gak taulah....!!!tapi sobat pasti bertanya kenapa bisa punyaku ada fotonya? gini saya punya trik seketika itu bikin lencana Fb kok gak muncul2 terus gambarnya, saya akal aja gambar di lencana Fb waktu buat simpan dulu aja gambarnya jadi JPEG dan silahkan sobat simpan di photobucket cari aja kodenya seperti punya ku seperti ni  http://i846.photobucket.com/albums/ab26/arifins/facebook-2.png dan ganti aja kode yang sudah sobat simpan tadi di photobucket,lihat hasilnya...

Seperti Ini Gambar Yang Saya Maksud

Jika masih bingung tinggalkan komentar, udah yah aku udaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah ngantuk banget niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiih udah jam02.30 pagi WIT masih ngeposting belum tidur,,,huh ngantuk polll, udah tak bobok dulu by..by..

SELAMAT MENCOBA SEMOGA ANDA BERHASIL

Cara diatas saya dapatkan dari berbagai sumber dan telah saya moderasi sendiri dr Mbah google