Skip to main content

TUTORIAL HIDDEN SHOUTBOX

assalamualaikum w.b.t wahai bloggers sekalian alam!!hohoho..sekarang saya nak berkongsi sikit ilmu pengetahuan dengan korang semua tentang hidden shoutbox atau dalam bahasa ibunda kita,shoutbox menyorok..sebelum nak buat shoutbox menyorok nie mesti la kena ada kod shoutmix..pastu create la shoutbox anda mengikut kreativiti..ok!malas saya nak menaip panjang-panjang sebab bukan korang nak baca pun...huhuhu..JOM KITA MULAKAN TUTO!!
1)login blogspot>design>layout>page element>add gadget>HTML/javascript
2)copy kod di bawah dan pastekan di 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://i1123.photobucket.com/albums/l559/husna209/hijau1.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 KORANG KAT 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>
yang warna merah hati kod shoutmix yang korang.
yang warna merah tu boleh letak gambar apa-apa pun tapi yang di editkan la menggunakan photoshop la..tapi kalau korang malas atau tak da photoshop korang boleh merayau kat blog orang yang ada buat tutorial shoutbox ambik je image diorang yang telah tersedia tapi kalau korang malas jugak korang boleh je ambik yang saya sediakan dibawah tapi simple-mimple je la..

Photobuckethttp://i1123.photobucket.com/albums/l559/husna209/t-merah.png

Photobuckethttp://i1123.photobucket.com/albums/l559/husna209/t-kuning.png

Photobuckethttp://i1123.photobucket.com/albums/l559/husna209/t-navy.png

Photobuckethttp://i1123.photobucket.com/albums/l559/husna209/pinkcair.png

Photobuckethttp://i1123.photobucket.com/albums/l559/husna209/oren.png

3)save!kalau tak jadi bagitau!
*boleh jugak ubah lebar atau ketinggian mengikut keselesaan

credit to:mr.aizuddin
Labels:

Comments

Nor Aini Samat said…
hai, bgs ar tutorial neh.
akk wat shoutbox neh. TQ
cmne nk wat yg kat tab ats tu?
25 March 2011 at 13:53
ADMIN said…
@Nor Aini Samat nnti saya watkn tuto tu, insyaallah
26 March 2011 at 09:04
Post a Comment

Popular posts from this blog

TUTORIAL SHOUTBOX TIMBUL TEPI BLOG TANPA BERJALAN

Asalamualaikum w.b.t...saya tak tau nak explain macam mana rupa shoutbox nie..shoutbox nie macam ajax floating shoutbox jugakla tapi dia tak timbul kat tengah-tengah..tengoklah sendiri rupanya=) tekan untuk lihat dengan lebih jelas! header tu x berapa nak lawakan..hehehe.. ok!step dia senang daripada shoutbox ajax floating tu.. 1)login blog>design>page element>add gadget>HTML/javascript 2)copy kod dibawah dan pastekan di javascript <style type="text/css"> .gb_fixed{ position :fixed; top:0px; right:0px; z-index: 10; } * html .gb_fixed {position:relative;} #hidden_gb2 { display:none; border:2px solid #333333; background:#ffffff; padding:10px;   padding-top:0px; } </style> <div class="gb_fixed"> <table id="hidden_gb2" cellpadding="0" cellspacing="0"> <tr><td> <div><a href="javascript:void(0)" onclick="gb_showHideGB()">[ close ]</a></div> <div...
3 comments
read more

freebies background part 4

assalamualaikum w.b.t.. nak bagi background dekat korang nie.. ambik lah jangan tak ambik tapi mesti mau kredit..kalo tak lawa cakap\jadi orang yg jujur/ Flower cute background https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNLEkawfQDwiUWupO4wP6ft-6tok_8uPgWQW2NaOvvQPzxA3kJR972kDhP4Hl9QRi6x7BDhOOhJL0Gi8gGP-MeaiCjAjojLKzGkJmrDJOFXgRf7fITOCMGOi4WKd_vDUxy5HH8032gDhV/s1600/polkadot-crop.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqeiNPZVq1fEczqo8y6HqV_1UAuIGVNYpNrhovIML9GXyEX-fhK5VaT7Rzm7Jrl6WZJM7ll7w95WjYA8NdXjV5iUxs7wdh4197XvOhHBqHu3YFh4gQzk-7IwvwCspJm4Jf4iUM74Rv0A9D/s1600/polkadot-crop+purple.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicb9FvTFnNJKXjOqDJ8G-neMypMsN4Cotr7T1coMIZIUOie03jwtMp5k3b6M8RpU9VCHm5byrGWbm59911yZsFh5_GnNGdN0F993kcLm8rKQaBaoLorQjFhMQ3VaQPvK4hj3AgCqnSJ4T0/s1600/polkadot-crop+blue.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpiDdjq_KVHSN0AA7ZiDCT6yjCvXYWcKpIse7Vyv3NuowlhjvkRyKYvriIa4bkSPZ...
Post a Comment
read more

Autisme

Autisme tu apa?? istilah autisme berasal daripada perkataan autos  yang bererti diri sendiri   dan Isme yang bererti aliran. Ini bermakna autisme membawa maksud keadaan yang menyebabkan kanak-kanak menumpukan perhatian dalam dunianya sendiri.<sumber: ummuhaq.qulhaq pesakit autisme nampak normal je tapi bila bab menguruskan diri dan berkomukasi diaorang ada masalah sikit..contoh paling dekat adalah adik saya.Adik saya dah umur 6 tahun tapi masih lagi tak boleh bercakap..tapi walaupun tak pandai bercakap sangat pandai membuli kakaknya.. adik saya nie jenis autisme yang active,ada yang sepupu saya tu jenis yang pasive.. huh penat betul kawal dia nie boleh kurus tau sapa yang jaga dia..hehehhe.. mak saya kata kalau hntr dia nie kat babysitter confirm babysitter tu tak larat nak jaga.. hanya orang yang faham dia je yang boleh jaga dia.. kat bawah nie la anak kesayangan mak n abah.. ♥ ♥ ♥ my beloved youngest sis.. ♥ comel tak=) adik saya nie tak boleh dengar ...
Post a Comment
read more