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


.

Tutorial New Layer_Adobe Photoshop

.



Salam korang...

Kali nie Wan nak wat tutorial camne nak wat New layer dalam Adobe Photoshop...Ok ok..Mesti orang akan tanya nape nak wat New Layer lak??tak penting pun..Bagi yang dah taw tu..tak yah lah tengok k..hehehe..New Layer nie penting law nak wat Doodle ...kan skang nie ramai yang nak blajar camne nak wat Doodle.Nak edit edit gambar pun penting ..lagi lagi law kita banyak gunakan Brush untuk mengedit..So New Layer nie penting koz..Law kita wat dekat layer yang berlainan kita leh edit and remove je layer yang kita tak nak tu..Dan nie pun leh kurangkan banyak kesilapan dalam mengedit...bagi Wan ..law Wan nak edit apa apa pun Wan sentiasa wat New Layer nie..Kerja pun senang dan kesilapan leh dikurangkan..


Law korang nak cuba..

Jom Tutorial..

Mula mula korang open lah Adobe Korang..




Law dah korang open lah satu file or gambar or new File..Lepas tu korang tekan serentak CTRL dan SHIFT dan N kat keyboard korang tu.Dan nanti korang akan dapat hasil macam kat bawah nie..Ada pop up yang akan kua.



Name tu korang tulis tajuk layer korang k..Dah tulis tajuk korang OK kan je..Gambar kat bawah nie sebelum ada layer..



Yang kat bawah nie lak selepas ada layer..



So korang leh lah Edit untuk layer layer korang..




Ok..Dah ..Tu je lah cara wat layer..Senang je kan...


Papai..


.

I love Islam..How about you?? _doodle

.





Pagi ini..sewaktu bangkit,sekonyong konyong kelopak mata dibuka, hati berderum tak keruan. Entah kenapa tiba tiba menangis bersendirian.Dada seperti dicengkam keluar wayar wayar yang berselirat. Terputus perintang pengawal arus, menjadikan nafas sesak terbatuk batuk..


Hari nie sengaja mengolah isi dan kata ganti diri pertama..Biar sesekali berbeza dengan sebelum nya.Dari sini kita belajar menilai, mentafsir dan membuat keputusan dari usaha dan keyakinan diri sendiri.




.

Tutorial Add Ruang Gadget atas Header dalam page Element

.



Salam Korang..


Kali nie Wan nak ajar korang tambah ruangan Add Gadget kat atas Header korang."Tutorial Add Ruang Gadget atas Header dalam page Element".Template biasa biasa tak de kat Ruangan Add Gadget kat atas Header kan..So Skang Wan nak ajar korang..Care nya senang je..dan kemungkinan koding Template berbeda beda gitu..So kene Tengok betul betul koding yang Wan bagi k..jangan gelabah lak wat tu..


Untuk pengguna design template

Dashboard>Design/Layout>Edit HTML
tick expand widget


Lepas tu korang cari kod kat bawah nie k
Ctrl+F bagi memudahkan pencarian

<b:section class=

Law korang dah jumpa korang akan jumpa kod macam kat bawah nie..

<b:section class='header' id='header1' preferred='no'>

Yang 'no' tu korang tukar kepada 'yes' k...
So selesai..


Law korang tak ade kod yang sama macam kat atas tu..Mungkin korang akan jumpa kod macam kat bawah nie.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Law korang ada kod yang macam kat atas tu atau seumpama macam kat atas tu..Asalkan yang depan tu sama dengan kod <b:section class= . So korang gantikan kod dekat atas or kod yang seumpama tu dengan kod yang kat bawah nie..

<b:section class='header' id='header1' preferred='yes'>

Dah selesai tu..Korang preview dulu..Law tak de error or cam selamat je..Korang leh save...
So siap lah..Tengok lah kat bahgian page element korang.


Korang leh lah add gadget yang korang nak kat atas header tu k..Nak letak Nuffnang Leaderboard pun dah leh..


So selamat Mencuba


Papai.


.

Blog + Study = Final Exam

.



Salam Korang...


Hari nie tak leh lepak lelama depan lappy nie..Nak study and tido awal lak malam nie..Koz esok nak bagun awal and Study lagi..Esok first paper Wan untuk Final..So wish me luck ye kengkawan..hehehe..


Erm..Wan masih gak ada masa nak wat semua tempahan and Blogwalking and update blog..Sebanar nya Final nie tak lah ganggu tugas Wan pun..Study study ..Kerja kerja online online..Leh je bahagikan masa ..dan skang nie nak kurangkan sikit masa nak ngadap lappy..Nak fokus lebih kat study..Subjek kali nie hope leh score lagi..nak naikkan pointer nie..hehehe..Korang semua dah cuti sem ..Wan baru je nak start final..Aiyo...


k lah korang..

papai

Wish me all da best ya..Kamek sayang kitak bah..


peace

.