Membuat Widget Chat Shoutmix Sembunyi di Sidebar

Post by Unknown on Monday, May 16, 2011 | 1:52 AM


ini dia trik lagi tentang sembunyi-sembunyi widget, hehehe. Kalau masih penasaran dengan trik ini aku tuntun deh. Seperti yang sudah saya jelaskan sebelumnya tentang Widget Followers Sembunyi di Sidebar sebelumnya, trik ini pun tidaklah jauh berbeda. Malahan trik ini lebih simple ketimbang yang kemarin. Oke deh langsung saja tidak perlu banyak teori lagi.
  1. Login ke Blogger.
  2. Pilih tab Design – Page Elements.
  3. Add widget – HTML/JavaScript.
  4. Masukkan kode berikut ini :
<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">


<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="horier" src="http://www5.shoutmix.com/?horier" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?horier">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

<div style="text-align:right">
<a href="http://horier.blogspot.com/ ">[Horier]</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>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

  1. Ganti code shoutmix berwarna merah dengan code anda sendiri. Bila sudah selesai Save dan lihat hasilnya. ^^

14 Comments:

  • thank's gan buat Infonya . . .

    ini hasil yang saya buat

    http://ryanx619.blogspot.com/

  • @ryanx : oke sob coba saya cek deh, selamat klo sudah bisa berhasil ^^

  • wow...kaya chat boxx yang dipinggir itu ya gan/.?

  • Thnks ya sangt membantu,,,, :)

  • @tropical : huu'um sob, bener banget dah

    @dell : bener juga sob, 100 ane kasih ^^..dari pada ditaruh di sidebar kanan ntar makan bandwith

    @ngapakers : silakan sob..klo ada trouble langsung bilang yah

  • @topblogindo : makasih sob..yups, sama"

    @seggyand : terima kasih kembali teman ^^

    @foredi : ahh biasa aja sob..ane malu nih, hehe

  • hatur nuhun mas bro buat ilmu nya semoga makin banyak orang yg beramal ilmu di jaman sekarang :D

  • Post a Comment

    Mari kita saling voting dan berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada teman yang lain agar lebih bermanfaat. Terima kasih banyak saya ucapkan, Salam Blogger teman . . .