Wadah Madrasah Pengalaman: Tutorial Slide float Shoutbox with cute Frame and icon

Saturday, May 28, 2011

Tutorial Slide float Shoutbox with cute Frame and icon

Salam Korang...

Kali nie Wan nak wat Tutorial Slide float Shoutbox with cute Frame and icon..Dalam bahasa melayu nya..Tutorial Slide float shoutbox dengan bingkai comel dan icon...ahhaha..Memandai lak Wan..Ok Law korang nak tengok contoh nie korang leh tengok kat blog WanhazelJunior Shout yang sebelah kiri taw..Korang klik ke..Tu lah contoh nya..So menarik tak??

Kod nie Wan koding sendiri k..Hope korang tak ubah lah koding asal nie..Bukan senang nak susun and baca bahasa HTML nie...Lepas tu ada lak yang mengaku dia yang wat kan..Macam Shout Ajax Float yang sebelum nie..Banyak lak yang mengaku dia yang buat..tapi tak pe lah...Segala yang baik tu untuk dikongsi..Law nak Copy Tutorial nie Copy je lah ...nak credit kat Wan or tak nak tu terpulang..Bergantung ngan niat hati orang tu ..K lah merepek lak Wan..Law korang nak..

Jum Tutorial..
Wan akan mudahkan Tutorial untuk korang faham..

Dashboard>Add gadget>HTML
gadget paling Bawah ..

Law dah..Copy and paste kod nie dalam Gadget HTML korang tu..

<div style='display:scroll; position:fixed; top:10px; right:10px;'>
<a class='linkopacity' href='http://wanhazel.blogspot.com/2011/05/tutorial-slide-float-shoutbox-with-cute.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get Slide Float Shoutbox'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></a><br />
<a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="140" height="140"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4nNYYNNS0p0fDFx-IuDmLCGfgomaea_fMW_8y09crTvUjv8tmXFh5fiXYt3U4OH4IAL3AKtvYix29pE2C48_qDywyWoeOWDXN-85IQK5roZbIYEdfUEuOzABvxcu4bfHJgN6KXNgD5Bl/s1600/icon+shout.png" alt="Shoutbox" title="Shoutbox" /></a>

</div>

<style type="text/css">
#at{
position:fixed;

top:0;
;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}

.atcontent{
float:right;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdXnk6QN4ebPv5mP-hdXOk6e8Wq5ngi1ZGqdsipdvozH6piZFO1nMutLgLkT6Bs5V_AY19zDKvFNZtmcB0F5nmHckt2QTfGYTwI42OsE8rx3SmQuvYdnHF8FTElVyvDPtdtXuzYfWg3iM/s1600/kak+yana+shout+frame+copy.png) no-repeat 0 0 transparent;
width:800px;
height:460px;center scroll ;

padding:56px 0 20px 5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

<br /><br /><br /><br /><br /><br />

Masukkan Shoutbox korang denagn lebar 270 dan tinggi 280

<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" />
</a></div>
</center></div>
</div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div></div>

Lepas korang copy kod tu..Korang masukkan kod Shoutbox korang k..Dekat bahgian yang Wan ada tulis tu

Masukkan Shoutbox korang denagn lebar 270 dan tinggi 280

.

Dan law korang nak Ubah Frame untuk Slide Shoutbox korang nie..Korang ubah kod yang nie..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdXnk6QN4ebPv5mP-hdXOk6e8Wq5ngi1ZGqdsipdvozH6piZFO1nMutLgLkT6Bs5V_AY19zDKvFNZtmcB0F5nmHckt2QTfGYTwI42OsE8rx3SmQuvYdnHF8FTElVyvDPtdtXuzYfWg3iM/s1600/kak+yana+shout+frame+copy.png

.

Dan law korang nak ubah Icon Slide Shout korang nie lak..Korang ubah kod nie..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4nNYYNNS0p0fDFx-IuDmLCGfgomaea_fMW_8y09crTvUjv8tmXFh5fiXYt3U4OH4IAL3AKtvYix29pE2C48_qDywyWoeOWDXN-85IQK5roZbIYEdfUEuOzABvxcu4bfHJgN6KXNgD5Bl/s1600/icon+shout.png

.

Dan selesai..Senang kan..Kat Bawah nie Wan bagi percuma Frame Shout..So korang leh guna lah..Frame yang kat dalam Kod kat atas tu frame dia sebijik macam gambar kat atas skali tu..Yang kat bawah nie untuk korang tukar tukar Frame..ehehhe.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwqFDatrwd02VXZBibUzjVlhyLQ4oPEojG3HbzGSU0EvhGltzPIDT-eR-EmOAEXSXipuVy1Fjv6BO6k88iH506MYac9FhAfjxOUw1f_zz4scfekfi7zTNYUR8JxzUmpcHFwKIBMPTSrbg/s1600/wan+shout+frame.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1hzJBEMkFfm2czBnP38kQBV9DPBlsLfMPJGdTcJc3G-41SBTW9YKEtutfKChYO1Klu4dDr7aJ7f9S6bAREshskEWuWusUBYuiQQ4bDDx8X_rg1c2a3_t7faLK8A4Eu4-Pk7mm9X7mUe3/s1600/wan+shout+frame1.png

Ok tu je..

So Perbezaan Slide and Ajax Shoutbox cuma cara dia keluar je kan..hehehe..

K lah korang..

Selamat mencuba..

Sakit mata lak wat kodding nie..

.

269 comments:

«Oldest ‹Older 201 – 269 of 269

نور الشهيرة بنت مجلن said...: asal dye bertindih dengan post body? tlg ..; December 4, 2011 at 10:04 PM
Wan_hazel said...: bertindih??camne tu??; December 4, 2011 at 10:57 PM
kaki gelak.com~ said...: tankiue..gune ekh icon comel 2..hEE; December 11, 2011 at 5:53 PM
Aniey Boo said...: wan.. knp shoutmix tu x msuk kat dalam bingkai?? sya dah cuba brapa kali x jadi2 jg,,; December 20, 2011 at 11:34 AM
Aniey Boo said...: This comment has been removed by the author.; December 20, 2011 at 11:44 AM
aniey said...: sya dah cuba buat,, tp shoutmix dia trkeluar dr frame.. mcm mn nie?? wan boleh tolong x??; December 20, 2011 at 12:43 PM
Wan_hazel said...: kalau keluar ke bawah..buang kod
taw; December 20, 2011 at 8:04 PM
Aniey Boo said...: maksud?? kod yg mn yg nak d buang??; December 20, 2011 at 9:44 PM
Wan_hazel said...: kod < br > yg kat tas shoutmix tu; December 21, 2011 at 10:31 AM
Aniey Boo said...: ok,, sya dah dpt dah,, tQ for the tuto.. =); December 21, 2011 at 6:03 PM
Wan_hazel said...: welkam; December 21, 2011 at 9:04 PM
Witch Vera said...: Hi Thanks, Really Loves your tutorial.. But, My cbox was like not that fixed with the frame. plz have look, what need to edit there ya? thank you so much ^^; January 5, 2012 at 6:19 AM
Witch Vera said...: Hi Wan.. Thanks a Lot...! Really appreciate! ^_^ Hahah..; January 5, 2012 at 8:00 PM
-MΔRINI MK- said...: Wan tolong saya boleh x? O.o
saya x paham laa~~
ape maksod Wan dgn 'Masukkan Shoutbox korang denagn lebar 270 dan tinggi 280'?
hope Wan boleyh tlg eh ;)
marinimk-belieber@blogspot.com; January 11, 2012 at 12:41 AM
Wan_hazel said...: maksudnya..awak kene adjust size shoutbox awak tu dgn size tu..kalau tak adjust so tak ngam lah nanti; January 11, 2012 at 10:50 AM
Unknown said...: tyare bloger br...i need ur help..npe tyare nye shoutbox xmsuk dlm frame ek?; January 11, 2012 at 4:04 PM
Wan_hazel said...: ekot size..kalau dia kebawah sgt buang kod < br > tu; January 11, 2012 at 8:38 PM
dahazell said...: SALAM....
dah 3x sye send comments tp xbls pn....; February 3, 2012 at 12:47 AM
dahazell said...: SALAM....
dah 3x sye send comments tp xbls pn....; February 3, 2012 at 12:47 AM
Wan_hazel said...: dahazell

awak send komen kat mana???; February 3, 2012 at 12:49 AM
Huda Solehah said...: Assalamualaikum akhi Wan,
thanks for the cute shoutbox frame, i`m appreciate it!

Syukran once again! ^_^V; February 17, 2012 at 9:43 PM
suraya binti mohd salleh said...: salam,m0hon share skali lg =)); February 18, 2012 at 12:19 PM
Diera Tekikushika said...: wan, kenapa shoutbos tu tak center ek bila keluar, dia keluar sipi-sipi jek..

http://aquarestsadrenalin.blogspot.com/; February 22, 2012 at 10:16 PM
Wan_hazel said...: pastikan add gadgegt tu kat tengah2 taw; February 22, 2012 at 10:40 PM
Unknown said...: salam kenal...saya amek tutorial yg ni ye bro...thanks...dan maaf sbb amek dlu seblm bgtaw.. eheh...cute sgt tu yg terrr...amek dlu...ngeee....btw, done follow awk... :); March 26, 2012 at 8:06 AM
Unknown said...: comell ! thengss wan :)
http://akupunyecerite-mylittlestory.blogspot.com/; April 3, 2012 at 8:45 PM
Solehah Shamsuddin said...: wan,sy nk tnye ssuatu ni.mcmne sy nk ubah kedudukan frame ye..mksd sy boleh ke kanan atau kiri atau tengah2.please bgtau sy cara nk ubah ye.Anyways,i guna awk nye frame ni tau; April 4, 2012 at 1:52 AM
Wan_hazel said...: caranya cuma alihkn kotak add gadget tu je; April 4, 2012 at 9:09 PM
Solehah Shamsuddin said...: oh camtu ye.tp sy gne blogskin.tau tak kat bahagian kod mane yg kna ubah?; April 5, 2012 at 4:46 PM
Wan_hazel said...: budak bucuk

dia kebawah ke ke atas??; April 5, 2012 at 6:48 PM
shera said...: tuto ini pon saya cuba . kedudukannya tetap sama . Button close tetap tak nampak . Tolongggg !!!!!!!!!; April 17, 2012 at 6:07 PM
AmIe said...: salam..
wan ..
dh try dh..
jadi..
tp nape bile tekan shoutbox tu dye de kuar new tab??
pastu kalo nk close pon de gak..nape??; April 19, 2012 at 1:19 PM
Wan_hazel said...: itu koding yg awak pasang open new tab tu....; April 19, 2012 at 1:29 PM
shuhadaothman said...: wan , shu amik slide float shoutbox ye. comel sangat :); April 27, 2012 at 2:25 AM
Captain Cyrushio said...: wan..zana punyer slide shoutbox x mnjadi sgt..puas dh zana main koding tu jer yg mmpu zana buad...
yang slack dekt shoutbox tu..background dyer tu tinggi sangt..nak kaci rendah sikit kaci kamcing dengn kotak shoutbox tu..puas dh ni zana cari dlm kod tu nk 'yop' kt background image tu..
:'(; May 5, 2012 at 11:36 AM
Captain Cyrushio said...: *'top'; May 5, 2012 at 11:37 AM
Wan_hazel said...: zana remove kod nie taw..; May 5, 2012 at 11:51 AM
Wan_hazel said...: < br / >; May 5, 2012 at 11:51 AM
haslina said...: kod shoutbox? mana nk dapat.sy buta blog.; May 6, 2012 at 1:57 AM
haslina said...: salam..shotbox dh berjaya. shoutmix camne nak buat yer?; May 6, 2012 at 2:34 AM
Wan_hazel said...: googlr cari shoutbusuk / cbox ...peace; May 6, 2012 at 11:12 AM
mikux said...: kenapa tak dpt tekan shoutbox ==" gambar dah comels <3 apa salahnya nie

http://oledokey.blogspot.com/; June 12, 2012 at 10:02 PM
mikux said...: mcm mana nak adjust frame ke tengah?
tq.

http://oledokey.blogspot.com/; June 12, 2012 at 10:11 PM
Wan_hazel said...: pasang add gadget tu kat tgh2 taw..tghh page element tu; June 12, 2012 at 10:15 PM
Unknown said...: woahhh... dah try..cantik la.. tq wan hazel!!! :))); July 6, 2012 at 10:18 AM
Ferdinand Hegemur said...: CooL....; August 4, 2012 at 6:06 AM
Unknown said...: thanks abg wan sbb bntu saye hehehe; September 2, 2012 at 11:17 AM
Naora said...: Nak tnye yang ni bole gune utk CBox jgk ke??; October 21, 2012 at 11:13 AM
Wan_hazel said...: boleh je; October 21, 2012 at 8:09 PM
Anonymous said...: knp shoutbox yg sy pnya kluar kt tepi?.....yg awk pny kluar kt tngah..; October 24, 2012 at 10:05 PM
Wan_hazel said...: awak letak dekat gadget paling bawah yg pjgn kat bawah tu k... jgn letak kat tepi; October 24, 2012 at 10:11 PM
Wan_hazel said...: awak letak dekat gadget paling bawah yg pjgn kat bawah tu k... jgn letak kat tepi; October 24, 2012 at 10:11 PM
Wan_hazel said...: awak letak dekat gadget paling bawah yg pjgn kat bawah tu k... jgn letak kat tepi; October 24, 2012 at 10:11 PM
jnyz said...: hello, i like ur design, but i wanna it to be in eng not BM...can u do me a favor? or can u pls tell me which sofware i can use to create my own frame? TQvm; October 29, 2012 at 3:22 PM
Wan_hazel said...: jnyz

hello... i use adobe photoshop 2 make a frame; October 29, 2012 at 7:09 PM
Apple Hijau said...: wan.. help!!!.. frame x nk center.. -_-"...; November 23, 2012 at 3:38 PM
Wan_hazel said...: dia ke bawah ke keatas??; November 23, 2012 at 8:25 PM
miSs_Lyssa said...: admin saya nak tanya bukan pasal shoutbox nie tapi nak tanyer pasal lain,,,
saya tengok admin punya blogg nie mula2 bukak tue dyer cakap 'selamat datang ke blogg ini' pastu bila kita klik benda tue baru terbukak blogg sebenar,,,macam maner nak buat tue,,,,,kawan saya tak nk share,,,tolong lerrr,,,, :(; December 2, 2012 at 9:25 PM
miSs_Lyssa said...: admin saya nak tanya bukan pasal shoutbox nie tapi nak tanyer pasal lain,,,
saya tengok admin punya blogg nie mula2 bukak tue dyer cakap 'selamat datang ke blogg ini' pastu bila kita klik benda tue baru terbukak blogg sebenar,,,macam maner nak buat tue,,,,,kawan saya tak nk share,,,tolong lerrr,,,, :(; December 2, 2012 at 9:25 PM
Wan_hazel said...: eh..ada ke pop up yg cakap selamat dtg...betul ke nie??rasanya kat blog wan tak de kot; December 2, 2012 at 9:40 PM
miSs_Lyssa said...: admin ader bnyk blogg kn????dlm blogg ygwarna pink tue,,,dyer bkn pop up,,,tp dyer sebahagian pd blogg tue,,,,; December 3, 2012 at 4:28 PM
Wan_hazel said...: owh..guna nie.... backup template dulu sbelum wat k.

http://wanhazel.blogspot.com/2011/08/tutorial-welcome-image.html; December 3, 2012 at 8:17 PM
anshmnf said...: Guna ye tutorial ni.Terima kasih :); December 27, 2012 at 6:41 PM
annenadia said...: thanks kak..first time sye jd buat..; December 31, 2012 at 2:53 PM
Izati said...: salam..nice!shoutbox jd dah..tq~; March 2, 2013 at 7:53 PM
Syazrin Rayhan said...: menarik dan cantik, nak try la... :D; March 3, 2013 at 11:43 PM
Unknown said...: thanks for your idea...
wan,cbe wan bke blog ni http://tautanhalaqah.blogspot.com/
pastu tkn dkt cbox..knape dye kluar blh tpi..pastu camne nak bg dye center,,thanks..; March 25, 2013 at 6:37 PM
Unknown said...: nk tanye knape sye punye shoutbox dye x tebus ? nh try tgk http://nadiabalqys.blogspot.com/
plz tolong sye :'(; June 4, 2013 at 10:28 AM
Nnsm said...: Salam , kalau guna blogskin macam mana ek ?; August 20, 2013 at 7:00 PM

«Oldest ‹Older 201 – 269 of 269 Newer› Newest»