mtasolutions



Untuk tutorial kali ini, saya ingin berkongsi cara untuk sembunyikan shoutbox anda pada sisi blog. Tujuannya adalah untuk menjimatkan ruang pada blog anda dan supaya blog kelihatan lebih kemas dan tersusun. Tutorial ini diambil drpd blog lama sy iaitu MTA Studio. Disebabkan sy telah menukar email maka sy bertukar blog ke Syoknyerblogging. Cara untuk membuatnya senang sahaja


1 Pergi ke Dashboard  > Design  > Page Elements > Add A Gadget > Html/Javascript

2 Salin koding di bawah dan paste pada kotak widget td. Gantikan teks "MASUKKAN CODE SHOUTBOX DISINI" dengan koding Shout box anda.

<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/AVvXsEik39Zwo1cHJ7N2rGbCJSyZlWnJ6ymuYrIMSNghKYUSbyBVeOUu1SWYsvkMqfBBOa3v2F-sh4HSNqwGs0YpCCd6Dim0WBAw2fewRfchNscOk2hDBvlPTsk6MnP_C9QL73SLimlPSld4aUh1/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">

MASUKKAN CODE SHOUTBOX DISINI

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

3 Tukarkan link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik39Zwo1cHJ7N2rGbCJSyZlWnJ6ymuYrIMSNghKYUSbyBVeOUu1SWYsvkMqfBBOa3v2F-sh4HSNqwGs0YpCCd6Dim0WBAw2fewRfchNscOk2hDBvlPTsk6MnP_C9QL73SLimlPSld4aUh1/s320/tabs.png dengan link gambar yang anda inginkan

4 Save dan lihat hasilnya.

Selamat mencuba (^^,)










Share Gadget
Stumble
Delicious
Technorati
Twitter
Facebook
Blog
Gadget


Jika anda sukakan article ini,linkkan kembali...



2 ulasan

  1. Good Blog Thalhah!!! Hehehe...I follow you...nanti leh blajar bnyak2 pasl blog

     
  2. Thalhah Amir Says:
  3. @Eiymah Fahimah. - thanks :)

     

Catat Ulasan

Cari Blog Ini

Pengikut

Pengikut Facebook

Informasi

SyoknyerBlogging adalah sebuah blog tutorial untuk bloggers yang menggunakan platform blogspot. Semua tutorial disini adalah daripada pengalaman sy berblogging selama 3 tahun. Sy bukan untuk mengajar tetapi lebih kepada berkongsi. Harap anda gembira disini. (^^,)

Mengenai Saya

Foto saya
Sy sangat sukakan web. Seorang Programmer. Pemilik Syoknyerblogging
Copyright 2010 | SyoknyerBlogging | Belajar Blogging Dalam Bahasa Melayu
Zengard Template designed by the Jinsona Design and XML coded by CahayaBiru.com