Shoutbox hide di tepi blog

Shoutbox hide di tepi blog

Baca Juga

Shoutbox hide di tepi blog?

Sop baru sahaja menukar tempat shoutbox tersebut ke tepi blog. Tujuan utama ialah untuk memastikan ruang shoutbox tersebut lebih panjang. Dengan itu, lebih banyak link boleh dipaparkan oleh para rakan blog yang aktif blogwalking. Jika ruang terlalu kecil, jejak yang ditinggalkan akan terbelakang dengan cepat.

Salah satu cara blogger blogwalking ialah dari satu blog ke blog lain melalui jejak yang ditinggalkan. Blogger akan terjah berdasarkan jejak yang ditinggalkan di shoutbox yang terbaru. Ini kerana jejak baru yang ditinggalkan  bermakna blogger tersebut turut aktif berblogwalking. Jejak akan dibalas dengan cepat!

Shoutbox di tempat asal boleh Sop panjangkan tetapi ia akan menjadikan sidebar blog RH akan bertambah panjang. Ia mungkin kurang sesuai.

Terdapat pertanyaan oleh Mata Hati bagaimana untuk membuat shoutbox ini. Sop mendapat tutorial dari sebuah blog (lupa da..) dan ia sangat mudah untuk dibuat.
Ikut tutorial mudah berikut:
1. Pergi ke Page Element -> Add a gadget -> HTML/Javascript
2. Masukkan kod di bawah:

<!-- shoutbox start-->

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:180px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i248.photobucket.com/albums/gg163/gnesop/jejak.gif') no-repeat;

}

.gbcontent{

float:left;

border:1px solid #bebebe;

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

<!-- Begin Shoutbox -->

PASTE KOD SHOUTBOX ANDA

<!-- End Shoutbox -->

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

<!-- shoutbox end-->

Ubah butang Shoutbox dengan menggantikan link berikut:
http://i248.photobucket.com/albums/gg163/gnesop/jejak.gif

Ubah kedudukan ke atas atau ke bawah Shoutbox:
top:20px;

Untuk meenentukan saiz butang Shoutbox

height:180px;

width:30px;

Untuk ubah border dan background

border:1px solid #bebebe;

background:#F5F5F5;

3. Simpan

Untuk memastikan tiada sidebar kosong, kod di atas boleh dimasukkan ke gadget HTML yang lain.

Selamat berjaya

Mohon maklum balas juga jika terdapat sebarang masalah Shoutbox di blog RH sekarang