Cara Pasang Buku Tamu Tersembunyi / Hidden ShoutBox

Tip ini akan membantu kita untuk menampilakan Buku tamu untuk tetap tampil di halaman muka namun tidak akan memakan space/tempat, sebab widget ini akan disembunyikan di samping Body blog. langkah Cara Pasang Buku Tamu Tersembunyi / Hidden ShoutBox ini mudah untuk dilakukan, langkahnya hampir sama dengan Cara memasang Widget Facebook atau widget lain yang biasa kita lakukan
Berikut langkah-langkahnya












  1. Login ke blogger
  2. Klik menu Layout
  3. Klik Page Elements
  4. Klik Add a Page Element
  5. Klik ADD TO BLOG pada menu HTML
  6. Copy kode berikut dan Pastekan Pada Widget  HTML/Javascript


<style type="text/css">
#gb{
position:fixed;
top:50px;
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 / ShoutBox Sahabat disini

<div style="text-align:right">
<a href="http://rangga-hadi.blogspot.com/2010/02/cara-pasang-buku-tamu-tersembunyi.html">[get this widget]</a>><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></div></div>

       7.Save Widget tersebut.

Jika langkah tersebut sudah anda lakukan,anda dapat melihat hasilnya pada blog anda masing-masing
Untuk mendapatkan kode skoutmixnya ikuti langkah2 d bwah ini
  1. Kunjungi halaman http://www.shoutmix.com/main/
  2. Untuk mendapatkan code sriptnya, kita harus registrasi dahulu. Klik 'create your shoutbox now'. Maka akan muncul halaman seperti dibawah ini. Masukkan ID anda, Password, Name, dan email anda. Jangan lupa di check list 'i have ready and agree ....'. Kemudian klik continue.
  3. Setelah klik continue, maka akan muncul halaman berikut ini. Pilihlah shoutbox style sesuai keinginan anda. Setelah anda pilih, klik continue.
  4. Step berikutnya akan muncul halaman seperti berikut. Klik 'get to my control panel now'
  5. Akan muncul halaman seperti di bawah ini. Untuk mendapatkan kode scriptnya, klik get code pada kolom quick start, pilihlah get code.
  6. Pada step terakhir ini akan muncul halaman seperti di bawah ini. Setting width dan height sesuai dengan ukuran blog anda. Copy code nya di kotak 'generated codes', lalu pastekan pada elemen javasript/html pada blog anda (tentunya anda harus login pada blog anda).

Simpan script yang telah anda pastekan ke elemen html nya. Lihat blog anda. Semoga berhasil.

0 komentar "Cara Pasang Buku Tamu Tersembunyi / Hidden ShoutBox", Baca atau Masukkan Komentar

Posting Komentar

Jika artikel ini bermanfaat bisa dishare gan, tapi ingat selalu cantumkan sumber jika ingin copas artikel ini