Header Ads

cara buat shoutbox tersembunyi



Asalamulaikum dan Selamat Malam semua, Sebelum Melelapkan Mata yang tak Mengantuk lagi nih..huhuh ape2 tah ayat..huhuh.. Apiez nk kongsi ng korang tutorial macm mana nk buat Shoutbox yang tersembunyi, tutorial ni memg banyak  orang  buat tp Apiez buat benda ni hanya nk simpan dalam blog Apiez je, kot berguna untuk hari yang mendatang..huhuhu dan klu org lain nk tengok pn boleh kan, tak salah berkongsikan heheh... 

Cara- Caranya :

1. Login pada blogger dasbor anda dan klik layout
2. Klik Page  Elemen dan Klik  add Gadget
3. Klik HTML/Java script Copy dan pastekan kode di bawah 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">


< Letakkan disini kode Shoutbox Anda>
<div style="text-align:right">
<a href="http://mofizputra.blogspot.com/search/label/Tutorial">
[Toturial blog]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>


</div>






<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Lihat gambar dibawah :



4. Langkah seterusnya buka balik kode yang diberikan pada langkah 3 dan cari perkataan <letakkan disini kode shoutbox Anda>, lihat contoh seperti dalam gambar dibawah ;

 6. Apabila dah jumpe  perkataan < letakkan disini kode shoutbox Anda >, seperti gambar diatas, langkah seterusnya gantikan perktaan tersebut dengan kode html shoutbox anda yang lama, lihat contoh gambar dibawah ;




 
 5. Apabila dah gantikan Save. dan Lihat Hasilnya





12 comments:

  1. salam... wahhhhhhhhh nanti bolehlah tunjuk umie cara nak buatnya ya... kalau baca arahan ni slowlah sikit... ;)

    ReplyDelete
  2. emmmm..xpe2. sy xde plak shoutbox. hehe ;D

    ReplyDelete
  3. to umie : heheh.. blh je umie senang je nk wt benda nih heheh..

    Nur su'aidah bachok : letak la shoutbox, t blh chat & tingalkan pesanan lm tuh..

    :j:

    ReplyDelete
  4. Wasalam apiez.
    Pcik tak berapa faham ya..kod html tu padam semua dulu baru copy past yang apiez letak di ulasan ka? atau paste di tempat "gantikan" tu..di kod html.
    Minta bagiau lagi sekali ya.

    ReplyDelete
  5. maaf atas kekeliruan tu yea pak cik, Apiez dh updet dlm bentuk bergambar.. maaf atas tertinggal satu langkah, yg menyebabkan kekeliruan..

    ReplyDelete
  6. to suhaida : ah'a dh tengok dah td..heheh

    ReplyDelete
  7. nape semalam tak jumpa blog ni ek..
    semalam pandai2 sndiri je carik kt google..
    naseb jmpa n dh siap pon hidden shoutbox kita..
    tapi tak kesah la..
    nak komen jugakz..
    hehheh..

    ReplyDelete
  8. yeke.. heheh.. em sb ramai kot yng dah wt toturial nih..heheh sb tu tak jumpe.. heheh.. thks komen

    :a:

    ReplyDelete
  9. salam...

    aritu ade ke blog sape ntah... puas la meraban cari die punye shoutbox.... pastu perasan ade bende kat tepi profile tu...bile klik kuar la menatang tu... canggih da skang kan...hehehe...

    ReplyDelete
  10. to Putra Cinta : hahahahah... ah'a klu klik baru kluar menatang tu..hahahah.. emm biasalah sentiasa berubah2.. inovasi namanye tuh..huhuhuh..

    ReplyDelete

Powered by Blogger.