Membuat Buku Tamu dan Lencana FB Di Blog Sendiri ...

Mengawali Sebuah coretan ketik di layar monitor,,,mari kita ucapkan rasa syukur Alhamdulilah kepada Sang Pencipta tentunya Yang telah meberikan kita kesehatan sehingga ku Ingin Bisa Hadir untuk 1 tujuan yg pasti sharing ilmu dan pengalaman nya...untuk kakak semua, bersyukur pula atas PR1 nya yg telah diberikan mbh google pada blog ini, baru dua bulan ni blog berkelana di dunia maya, buku tamu dan juga lencana FB yang bisa nongol ngilang,,,nongol ngilang. buku tamu dan lencana Facebook dengan berbagai ragam desain. untuk itu yuk kita ikuti langkah langkahnya.....

Tapi perlu diketahui sebelumnya kakak harus punya dulu BUKU TAMU entah shoutmix, cbox, shoutbox dan lain sebagainya...pokoknya harus punya dulu kak.

lansung aja ke TKP di bawah ini aja yya :

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

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 kakak ya.
*untuk yang ini silahkan isi dengan buku tamu milki kakak <!-- Isi Dengan buku tamu yang sudah kakak punya? entah dari shoutmix,shoutbox,ataupun cbox dls </iframe>

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

kodenya seperti di bawah ini kak :

<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">



<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 kakak yya...
*untuk yang ini  silahkan isi dengan lencana FB anda, jika kakak belum punya silahkan membuat lencana di Fb kakak , dan perlu diketahui kakak, jika kakak membuat lencana Fb untuk sekarang ini gak tau kenapa gak muncul gambar foto seperti punya saya, kenapa bisa begitu...ya gak taulah....!!!tapi kakak pasti bertanya kenapa bisa punyaku ada fotonya? gini aku punya trik seketika itu bikin lencana Fb kok gak muncul2 terus gambarnya, aku akalin aja gambar di lencana Fb waktu buat simpan dulu aja gambarnya jadi JPEG dan silahkan sobat simpan di photobucket cari aja kodenya dan ganti aja kode yang sudah kakak simpan tadi di photobucket,lihat hasilnya...

Semoga bermanfaat yya kak,

sukses selalu dan jadilah blogger sejati... hehehe

Lab Private's

Senin, 12 September 2011