Pages

Sunday, May 16, 2010

MAKE SHOUTMIX HIDE

1. Copas (copy Paste kode berikut, lalu
pasang pada Widget HTML/Javascript baru.


<style
type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
*
html #gb{position:relative;}

.gbtab{
height:117px;
width:50px;
float:left;
cursor:pointer;
background:url('http://sites.google.com/site/pahingdesign/images/tabs-paper-cuss-Clip.png') no-repeat;

}
.gbcontent{
float:left;
border:2px solid #E0E0E0;
background:#F5F5F5;
padding:10px;
}
</style>
<script
type="text/javascript">

function
showHideGB(){

var gb =
document.getElementById("gb");

var w =
gb.offsetWidth;

gb.opened ? moveGB(0, 47-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">

<!--
Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="pahingjepara"
src="http://www6.shoutmix.com/?pahingjepara" width="200" height="400"
frameborder="0" scrolling="auto">

<a
href="http://www6.shoutmix.com/?pahingjepara">View
shoutbox</a>

</iframe>
<br /><a href="http://catatancuss.blogspot.com/"
title="Mau Membuat Yang Seperti Ini..???">Klik Aja Ini</a><br
/>

<div
style="text-align:right">

<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
<!-- End ShoutMix
-->

</div>

<script
type="text/javascript">

var gb =
document.getElementById("gb");

gb.style.right =
(30-gb.offsetWidth).toString() +
"px";

</script></div>
2. Jika tidak ingin merubah desain dan tampilan, Ganti kode yang berwarna hijau dengan kode Shoutmix  anda, Bagi yang
belum memiliki kode shoutmix, silakan membuat account gratis di TKP. Lalu Save Widget baru ini tanpa
memberi nama, dan letakkan sembarang pada Layout Blog.
3. Jika ingin merubah
desain buku tamu, perhatikan kode yang berwarna merah.
Berikut penjelasannya

  • top:50px; (untuk merubah ketinggian buku
    tamu, bisa diubah dengan 40px atau sesuai kebutuhan)

  • height:117px; width:50px; (untuk merubah tinggi dan lebar design yang
    selalu muncul, ganti ukuran sesuai dengan design baru)

  • background:url('http://sites.google.com/site/pahingdesign/images/tabs-paper-cuss-Clip.png')
    no-repeat; (sesuaikan dengan alamat URL, tempat gambar/design baru
    disimpan)

  • border:2px solid #E0E0E0; (Untuk merubah ukuran dan warna border atau
    garis keliling buku tamu)

  • background:#F5F5F5; (Untuk merubah Warna Background Buku
    Tamu)

Note: Gunakan merubah  gambar gunakan format .PNG Transparan
Silakan Berekperimen dengan buku tamu Autohidenya, jika ada pertanyaan seputar pemasangan buku tamu Autohide silakan isi pada kotak komentar

0 comments:

Post a Comment