Assalamualaikum..
Hari ni nak tunjukkan kat korang macam mana nak buat shoutbox di blog. meh kite kenali ape tu shoutbox. Tutorial ni boleh digunakan oleh blogger baru.
Kenali ape itu IMAGE ICON:
Step 1: Dashboard ---> Design ---> Page Elements ---> Add Gadget ---> HTML/JavaScript
Step 2: Copy code di bawah dan paste kan di dalam 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('URL IMAGE ICON') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:pink;
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 Code Shoutbox 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>
Nota:
kaler merah tukar dengan URL IMAGE yang anda nak.
kaler Ungu tukar dengan code shoutbox yang telah anda sign up.
* kalau takde URL IMAGE sendiri letak je code yang kat bawah ni. gantikan tempat URL IMAGE ok.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOfJwAtWPWP9Cn6YQKyyQ3el0T3D6kI_sDqxcwiVzCZjPcDylGFaBvbo17ma_1JOpStJWZMjqr1olIJbYVGNFicrP7RlaONQt7Vl3P61cNH7YvyX9XYF_KDnb48R7k7tbB2VDN5_3udO9/s320/tabs.png
Step 3: Save dan cuba preview untuk pastikan jadi ke tak.
Selamat Mencuba =)
4 comments:
dah jd..ngee~
thx cik T-pah.. :)
Yeayyyy ^_^ hehe..
same2 :)
dah jadi la .. ! thanks a lot ye.. jemput datang ke blog saya.. :)
ur welcome :) Insyaallah.. :D
Post a Comment