Cara Sembunyikan Shoutbox/Auto Hide
Demo
Ikut Langkah Yang Simple Ni:
- Login ke akaun blogger korang
- Pergi ke Design/Layout --> Page Element --> Add Gadget
- Pilih HTML/Javascripts
- Dan pastekan je kod di bawah ni
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UPg9s4Jm8Unv-q8IHGfA11qouGswPzAx6dXjK4BcrS869YFHVYNEM1w31oILoHGFI0xvvto3Fg1b6sEkQNZgjftkmKZh9q8lHF_lgV276qT5PL9oiIvL7o6sbTdNR6w4HopO_yb-uBNT/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">
<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>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UPg9s4Jm8Unv-q8IHGfA11qouGswPzAx6dXjK4BcrS869YFHVYNEM1w31oILoHGFI0xvvto3Fg1b6sEkQNZgjftkmKZh9q8lHF_lgV276qT5PL9oiIvL7o6sbTdNR6w4HopO_yb-uBNT/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">
PASTE KESELURUHAN KOD SHOUTBOX KORANG DI SINI
<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>
PENERANGAN
Gantikan perkataan Merah dengan kod shoutbox korang
Korang boleh ubah kod unggu dengan kod gambar yang korang suka
Kod biru adalah kedudukan shoutbox.Tambah nilai 50px untuk merendahkan lagi kedudukan shoutbox korang
6 ulasan
sembunyikn means letak kt side bar ea???haha.ala mlunye tataw..:P
Replykool lah~ huhu,, mmm aku dah undi kaw kt bpm tu~
Reply1)Kilang Al-Quran Dan Bagaimana Al-Quran Dibuat ?
2)Mengumpat! Adakah Ianya Hobi Manusia Zaman Sekarang ?
3)Menjadi Tunang Orang Tanpa Kita Sedar, Biar Betol ?
wow..sekarang saya dah tahu dah! ehe...\
Replyterima kasih banyak2 untuk info ni... =D
@ruby zaizi Ya,letakkan ka sidebar =)
Reply@Anip™ Haha,ya ke?TQ =)
Reply@Nurul Nazifa AzmiSama sama =)
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.