STEP BY STEP CREATE NEW BLOG

Tutorial : About Me 6. Then , Dashbord > Design > Page Element > Add Gadget > Html/JavaScript 7. Kat bahagian atas , korunk perasan tak , ada Edit HTML / Rich Text ?? 8. Korunk CLICK Edit Html , paste link yang tadi , ok ? :) * Kalau tak de pun , korang tekan EDIT HTML .. dan BUKAN RICH TEXT taw ? 9. Then , korunk buad cm niyh ;)

CONTOH : <center><img src="http://sphotos.ak.fbcdn.net/hphotos-aksnc4/hs1189.snc4/154158_180103432016612_100000508706476_573355_7805816_n.jpg" /><center> 10. Lepas paste LINK tadi , korunk tambahkan , yang warna merah Lyssa tunjukkan ats ni ;) TAMBAHAN : Ok , kalau pic korang tuh besar sangat . Lepas korang tambah kan warna merah tuh , korang terus tekan RICH TEXT . Then , dia akan keluar gambar yang korang letak . Then , korang KLIK pada gambar itu , then resize bagi size yang bersesuaian ok ? :) **Tambahan tu , untuk pengguna Mozilla FireFox.. Kalau nak resize , korang mesti guna Mozilla , ok ? Tak boleh guna GOOGLE CHROME untuk TUTO ini .Thnx. 11. Dah siap , korunk tulis lah pasal korunk at bawah pic tuh k .? :) 12. Save . Selesai ^_^ p/s : Kepada sesiapa yang ingin masukkan gambar melalui laptop , dan bukan melalui FACEBOOK , korang boleh upload korang nyer image dekat sini , taw ? >>> http://imgur.com/ ** Lepas upload , korang copy , link yg tulis (Direct Link ) Then , ikot step 9 ! ^_^

Tutorial : Membuat scroll box

Tutorial untuk membuat scroll box adalah seperti berikut.. 1. Dari dashboard > Design > Add a gadget > HTML/javascript (Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog) 2. Kemudian masukkan/ubah kod widget seperti berikut. <div style="width:426px;height:100px;overflow:auto; "> Isi - isi kadungan yang korang nak letakkan < /div> Note : width: ubah mengikut lebar yang anda kehendaki height: ubah mengikut tinggi yang anda kehendaki 3. Apabila selesai, save dan lihat hasilnya.. Senang bukan..:) ** Kalau korang tak paham jugakk .. boleh

KLIK SINI !!!

Tutorial : Letak Gambar Dalam Scroll Box

1. Dashboard > Design > Add a Gadget > Html/Jacascript 2. Copy and Paste kod di bawah di ruangan tadi
<div style="background-image: url(http://dl.glittergraphics.net/pub/303/303771ob8r4r0z04.png); border-color: #FFCCCC; border-style: double; border-width: 4px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; height: 300px; overflow: auto; width: 220px;"> <center><img style="width: 153px; height: 204px;" src="URL GAMBAR KORANG" /> </center>

**Warna Biru : URL Background yang korang suka. Boleh dapatkan di Google or Photobucket or Glitter-Graphics **Warna Merah : URL korang boleh Upload di http://imgur.com/ Ambik yang "Direct Link" .. ok ?

Tutorial : Post Title Background

Hari ini ,Lyssa nak ajar korunk buad "Background Post Title" haha. nak blaja tak ? okie! Lyssa ajarkan oke?

Kat bawah niyh , Lyssa ada kasi contoh gambar background tuh:)

Oke, nak blaja kan ? Meh cini :)

1. Log in --> Design --> Edit Html 2. (Tekan Ctrl+F) Search .post h3 { kalau tak de , cari ini h3.post-title { 3. Kalau tak jadi kod dua2 yg kat atas niyh... korang boleh paste kod di bawah ini kat bawah h4 } 4. Copy and paste code ni di bawah .post h3 { ataupun dibawah h4 } border:0px dashed #cc99cc; text-align: center; margin:.5em 0 .5em; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.2em; background:url(URL BACKGROUND); color:$titlecolor; }

4. Bagi sesiapa yang mencari kod ini >> h3.post-title { Korang paste kod ini di bawah kod yang korang carikan tu ok ?:) border: 3px solid #C0C0C0; background: url(URL BACKGROUND);

Yang Lyssa tulis tulisan warna merah tu en , korunk gantikan dengan URL background yang korang suka.

4. Preview dulu . ! 5. Then,Save template! :)

Tutorial : Sidebar Title Background

Follow step kat bawah ni , ok ? 1. Dashboard => Design => Edit HTML =>Tick Expand Widget Templates . 2. Tekan CTRL+F search for this code h2 { 3. Bila da jumpa , copy code kat bawah ni and paste dekat bawah code h2 { background:url(URL GAMBAR PILIHAN)

4. lepas tu paste dekat bawah code ni text-transform:uppercase; nanti dia akan jadi macam ni . h2{text-align:center; margin:0 0 1em 0; font:$(widget.title.font);

color:$(widget.title.text.color); text-transform:uppercase; background:url('URL GAMBAR PILIHAN')} * preview dulu . kalau jadi, save jela ok .^_^

Tutorial : Disable Right Click

Lyssa di sini sebab nak ajar korunk buad "Disable Right Click" . Maksud nyer tuh , bila korunk tekan Right Click , tak kan boleha punyer.. Mana thu kan , kot2 ler , ada "COPY CAT" kt sini ke enn . haha oke oke . sini , Lyssa ajarinn ! :)

1. Dashboard >Design>Add a Page element >html/javascript 2. Copy code kat bawah nie : <script language=JavaScript> < !-//edit by unwanted

var message="Masukkan Mesej Anda Disini"; /////////////////////////////////// function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){

document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") // --> < /script> *Yang Lyssa Color kan dengan warna merah tuh , korunk tukar dengan ayat korunk sendiri ehh ? :)

Tutorial : Disable Right Click Without Alert

Haa.. kat sini , Lyssa nak share kat korang ciket ... Cam ner nak buat... Bila orang tekan right click... takkan keluar alert message... dan tuto ini jugak .. tak kan boleh copy entry org ok ? Ikut step di bawah :) 1. Dashboard > Design > Add Gadget > Pilih Html/JavaScript 2. Copy code di bawah .. and paste dekat ruangan html/javascript tuh : <script language=JavaScript> < !-//Disable right click script III- By Renigade (renigade@mediaone.net) //For full source code, visit http://www.dauspozi.com var message=""; /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false") // --> < /script> 3. Da siap .SAVE:)

Tutorial : Letak Icon Cute Sebelah Comment

Srkg ni pulak , Lyssa nak teach korunk , mcm mana nak letak icon yang kiut miut kat sebelah comment ! Nak tgk tak contoh nyer ? Mari sini ;)

Nampak tak tu ? hee! Sini..Sini.. Nak Ajar :) Bagi pengguna layout 1. Dashboard>Layout/template blogger/design>Edit HTML. 2. Then , klik pada Expand Widget Templates..tekan CTRL+F pada keyboard dan copy paste code di bawah ini ke ruangan find <span class='post-comment-link'> Bagi penguna template Dashboard > Template kemudian klik pada Expand Widget Templates..tekan CTRL+F pada keyboard dan copy paste code di bawah ini ke ruangan find <$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>>

3. Ok lepas korunk dah jumpa code yang korunk cari tu...korang copy lak code nie k..

Bagi pengguna layout <img src="LinkGambar"/> 4. Lepas tu korang paste kat sebelah code yang korang dah cari tadi..

CONTOH Bagi penguna template blogger and layout <span class='post-comment-link'><img src="LinkGambar"/> Bagi pengguna template <$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><img src="LinkGambar"/>

Oke , if dah siap , korunk preveiw dulu.. If dah jadi , terus save oke ? :) *p/s : Cute Icon , korunk boleh dapatkan di http://www.glitter-graphics.com/

Tutorial : HOME icon untuk blog

Today , Lyssa nak share ngan korunk , mcm mana nak letak HOME icon yang comel dekat blog korunk? Wahh , korunk nak tahu tak ,mcm mana cara nyer ? ahak2! ;)) Meh lah sini , Lyssa ajar kan ! ^_^ 1. Dashboard > Layout > Add A Gadget klik HTML/Javascript. and korang copy paste kod kat bawah nie k. <style type='text/css'> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } < /style>

< div style='display:scroll; position:fixed; bottom:10px; left:-12px;'> < a class='linkopacity' href='LINK BLOG KORANG' style='margin-left: 1em; margin-right: 1em;' title='HOME'><img border="0"width="50" height="50" src="URL HOME ICON" /></a><br /> *p/s : Korang bleh jgk , kalo nak ubah width="50" height="50" ikot ke sesesuaian blog korunk k. Law korunk nak letak kat bahagian atas korunk tukar kod yang berwarna pink tu k bottom:10px; left:-12px;'> Bottom tuka ke top Left tka ke right *sory , Lyssa tak dapat letak Lyssa nyer contoh HOME kat sini , cbb Lyssa dah ada Navigation tu. so , Lyssa juz nak share je lah ;) Dekat sini , Lyssa ada serta kan , beberapa link code icon ;) If berminat , copy je yang kat bawah niyh , oke? :) http://i122.photobucket.com/albums/o280/techwar88/home.gif

http://i269.photobucket.com/albums/jj47/anjieya/home-icon.jpg

http://i1029.photobucket.com/albums/y356/PachirisuFan1/Icons/Home_icon.gif

http://i604.photobucket.com/albums/tt126/heporz/Icon/home-64x64.png

http://i257.photobucket.com/albums/hh229/rhythmskateshop/Home_64x64.png http://i177.photobucket.com/albums/w205/hns911/frindster.gif

Tutorial : Hilangkan Tarikh Kat Atas Post Title

1.Dashboard > Design > Page Element 2.Dekat bahagian post tuh , korunk tekan edit auh ?? Nanti , dia akan keluar macam niyh ;)

3. Pastuh , kat anak panah tuh , korunk "Untick" tawu ?! 4. Then , lepas 'Untick , korunk tros save. 5.And lastly , try view bleg korunk! Comfirm jadi ! haha ;)

Tutorial : Centerkan Tajuk Post dan Sidebar

Skunk , Lyssa nak ajar plak , cam ner, nak Centerkan Post Title dan Sidebar=) Cam niyh , yunk ! :) 1. Log in > Dashboard > Design > Edit html 2. Then , tekan ctrl + F and korunk cari kod ni Untuk sidebar h2 { Untuk Post Title h3.post-title {

@atau h4 { 3. Copy kod kat bawah nih ;) text-align:center; 4. Then , paste kat bawah kod yang korang cari tadi. 5. Jgn lupa save plak auhh ;) =siap=
Th u rsd ay, Marc h 1, 2012

Tutorial buat Borang Tempahan / Order Form

Assalamualaikum.. Hai korang...Kali nie Wan nak ajar korang yang nak buat borang untuk Blogshop atau
yang nak jual jual barang kat laman sesawang tu. Bahasa Omputeh nye Order Form.. hehehe..Cara nya senang je.. Kalau korang nak.. Jom Tutorial...

Mula mula korang kena lah klik link dibawah nie k..

http://www.freedback.com/
Klik kanan dan open in new tab

Kalau dah..Korang pasti akan jumpa page macam yang kat gambar atas tu..Adakan
..??Lepas tu korang klik lah pada Icon CREATE A FREE FROM NOW..macam icon yang kat bawah nie..

Bila korang dah klik..Makanya korang akan dapatlah page macam yang kat bawah nie

Korang isi email yang korang selalu guna..Email yang korang aktif guna.Sign up biasa
biasa je nie. Dah selesai sign up.

Nanti kat email korang akan datang email pengesahan..Korang klik lah link pengesahan
yang dia orang bagi tu..Macam yang kat dalam gambar bawah nie..

Bila dah klik link pengesahan tu..Korang akan terus ke page yang macam kat bawah nie

lak..Jadi dekat sinilah korang mula buat Borang korang..

Nampak tak??kalau korang nak tambah isi isi borang korang..Korang klik pada ADD
QUESTION..Bila korang dah klik tu..nanti akan ada pop up kluar macam yang kat bawah nie..

Dalam box tu ada 6 pilihan..Rasanya korang tahu fungsi semua nie kan..Kalau tak taw..Baca
yang kat bawah nie.. Short Answer : Digunakan bagi pelanggan menjawab soalan yang pendek..Contoh soalan No Hp , Poskod , Kaum dan sebagai nya. Long Answer : Yang nie lak digunakan untuk jawapan yang panjang ..Contohnya Untuk is Alamat Rumah ,Dan sebagai nya.. Ratio Buttons / Select Box / Check Boxes : pulak untuk pilihan..macma objektif lah..ehehe..

So selesai..

Dah siapkan semua korang klik CONTINUE dan lepas tu klik sekali lagi pada CONTINUE
dan nanti akan terpapar lah kod HTML untuk korang..Macam yang dalam gambar kat atas tu..Korang copy all dan paste lah kat blog korang..

Untuk masukan kat blog lak..Korang leh lah letak kat Page Blog korang..Cara buat New Page.. Dashboard > New post > Edit page >New pages

Ok selesai..

Senang kan..Selamat mencuba

P/S: semua tempahan dari pelanggan korang akan masuk terus ke email yang korang guna untuk sign up mula mula tadi..

Cara Buat Order Form

Step 1 : Go to http://www.response-o-matic.com/ Then click GET STARTED! Uols akan di bawa ke page seperti di bawah

Penuhkan kotak2 yg disediakan kemudian klik button Sign Up

Step 2: Blh rujuk gambarajah di bawahdh ok..klik button Create Form

Cara Buat Order Form

Step 1 : Go to http://www.response-o-matic.com/ Then click GET STARTED! Uols akan di bawa ke page seperti di bawah

Penuhkan kotak2 yg disediakan kemudian klik button Sign Up Step 2: Blh rujuk gambarajah di bawahdh ok..klik button Create Form

Step 3 : Kt page ni uols kena tambah apa2 je maklumat yg uols nakhanya klik Add a Question

Short Answer cth : no tel, alamat email Long Answer cth : address Radio Button : cth : cara bayaran, cara penghantaran Drop Down Box : Senarai Produk Pilihan Check Box : sama cam Radio Button..cuma yg ni jenis kotak..tu je bezanya Text Block : kalau customer tk klik kotak ni, borang tempahan tk blh di hantar cth :
agree with the Term & Conditions apply to Ummi2Shoppe.com

Dah siap, klik button Save and Continue to Step 2 Step 4 : Seterusnya uols ikut je apa yg sya buat dlm gambarajah di bawah gantikan website & email ngn yg uols punya

Kemudian klik button Save and Continue to Step 3

Step 5 : Copy and pastekan code html yg diberikan di gadget HTML/javascript [ Dashboard > Design > Page Elements > Add A Gadget > HTML/javascript ] Done.gud luck

Tutorial : Buat Ayat Bergerak

Mawu tahu caranya ?? Begini.... 1. Log in > Dashboard > Design > Page Element > Html 2. Then , korunk copy and paste kod kat bawah niyh <img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEyOTE 4OTA3ODU3NjEmcHQ9MTI5MTg5MDgwNDcwOCZwPTc2MTcxJmQ9TWFycXVlZSUy MEdlbmVyYXRvciZnPTE=.gif" /><marquee style="background-color:FFDDFF; border: 1px solid DDBBDD; color:000000; font-family:verdana; font-size:9pt; width:700px;

height:50px; " direction="left" behavior="scroll" scrollamount="5" >TEXT KORUNK</marquee> *Yang Lyssa highlight warna kuning tu , korunk boleh tukar width and heigt mngikut kesesuaian. *Yang Lyssa highlight warna purple tuh plak , Kalo nak ubah direction , korunk boleh ubah macam ni... + right + up + down + alternate *Warna Merah plak , korunk buad ayat korunk sendiri ok? Then, save :) Cuba try view blog korunk , Jadi tak ? :)

Tutorial : Moving Word Cursor

1. Log in > Dashborad > Design > Add Gadget > Html 2. Then , korunk copy and paste kod kat bawah niyh taw! :) <style type="text/css"> /* Circle Text Styles */ #outerCircleText { font-style: normal; font-weight: normal; font-family: 'JOKERMAN'; color: TEXT COLOR; position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} < /style> < script type="text/javascript"> ;(function(){ var msg = "TEXT HERE"; var size = 24; var circleY = 0.75; var circleX = 2; var letter_spacing = 5; var diameter = 10; var rotation = 0.4; var speed = 0.2; if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); < /script> * JOKERMAN = if nak font lain , cari kat microsoft korunk lah k ?:) * TEXT COLOR = korunk boleh cari di sini ;) * TEXT HERE = Your Own Text ;)

Tutorial : Letak Ayat Di Bawah Setiap Post

Macam Kat Bawah ney :

Oke ,ikut step niyh ;) 1. Log in > Dashboard > Design > Edit Html 2. Tick Expand Widget Template 3. Korunk Tekan Ctrl + F dan cari kod ini <data:post.body/> 4. Kalo sudah jumpa , korunk copy kod kat bawah ni , and paste di bawah kod <data:post.body/> td :) <hr/><center>AYAT KORUNK</center><hr/> 5. Preview dulu oke :) 6. If dh jadi , SAVE k ^_^

Tutorial : Letak Ayat Di Bawah Setiap Post

Macam Kat Bawah ney :

Oke ,ikut step niyh ;) 1. Log in > Dashboard > Design > Edit Html 2. Tick Expand Widget Template 3. Korunk Tekan Ctrl + F dan cari kod ini <data:post.body/>

4. Kalo sudah jumpa , korunk copy kod kat bawah ni , and paste di bawah kod <data:post.body/> td :) <hr/><center>AYAT KORUNK</center><hr/> 5. Preview dulu oke :) 6. If dh jadi , SAVE k ^_^

Tutorial : Letak Background Gambar Pada Blockquote

1. Login > Dashboard > Design > Edit HTML 2. Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut : .post blockquote { 3. Kemudian di bawah kod tersebut, letakkan kod ini. background-image:url(url gambar); * Url gambar , korunk boleh amik di sini :) Photobucket! * Korunk carilah background yang korunk suka kat situ ok? (search je ape2! :) 4. Siap . Save :) p/s : Pada sesiapa yang tidak tahu cara penggunaan blackquote . Mari sini , Lyssa teach korunk !

1. First , korang HIGHLIGHT ayat yang korunk nak buad blackquote tu . 2. Then , korang click yang no 2 yang Lyssa tunjukkan at atas , 3. Lepas publish , korang akan dapat hasil nya

Tutorial : Buat Dropdown Menu

Sekarang ni , masa untuk buat tuto jer . Kalau nak masuk contest pun , rasa cam jemu lah plak ! haha ^^ Oke , sekarang , Lyssa nak share ngn korunk , macam mana nak buad dropdown menu. Pada sesiapa yang tak tahu , apa itu DROPDOWN MENU.? Lihat gambar di bawah ;)

Oke , skunk ,korunk ikut step yang Lyssa buat kat bawah ni :) 1. Login > dashboard > page element > add a gadget > HTML/javascript 2. Copy code kat bawah ni , ke dalam ruangan html/javascript. <select onChange="document.location.href=this.options[this.selectedIndex].value;"> < option selected>Tajuk</option> < option value="Link 1">Text 1</option>

< option value="Link 2">Text 2</option> < /select> Link 1 : Masukkan link untuk dibuka Text 1 : Masukkan perkataan/ayat untuk link

3. Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select> 4. Da siap? :) save hasil kerja anda ! :)

Tutorial : Flash Blockquote

Sebelum tuh , korang try buat yang ini dulu.. Baru buat Flash ok ? :) Oke , ikot step Lyssa ok ?:) 1. Dashboard > Design > Edit Html > Tick Eexpand Widget Templates 2. Tekan CTRL+F and cari code ni : .post blockquote{ 3. Lepas dah jumpa , paste code ni dekat BAWAH ' kod yang korang cari tadi k? background:url(URL background ); padding:5px; Border:2px dashed #00000; colour:#FFFFFF} blockquote:hover { background: url(URL background ) repeat right bottom ; border:2px dashed #000000; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; } *Yang Lyssa warnakan MERAH tuh , korang boleh cari code kat http://htmlcolorcodes.org/

Tutorial : Background Berbeza Pada Sesebuah Entry

Background dalam post , kebiasaannya telah ditetapkan dalam setting blogger. Tapi , ada SATU cara yang boleh digunakan untuk menjadikan background yang berbeza untuk entri yang dikehendaki sahaja. Contohnye , Background yang Lyssa guna sekarang ni :)

Kaler pink kan ? Comel tak? hehehe~ Tutorial ini , sangat senang la ! kalau korang paham konsep nye! Let's see , Whats the steps !?:)

1. Log in > Dashboard > New Post Anda :)

2. Pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' BUKAN 'compose' -> Ini untuk mengelakkan code warna dicopy sekali.:) <div style="background:url(Link gambar disini) no-repeat;"> Taip segala entri untuk blog anda disini. < /div> * Letakkan link gambar pada tulisan biru * Jika anda menggunakan gambar bersaiz kecil, sila buang no-repeat. * Taip apa sahaja entri anda seperti biasa dalam kawasan merah. Atau kalau hendak lebih mudah, buat apa sahaja entri, tetapi ending mesti ada </div> *Sudah siap, publish n lihat hasilnya oke? :) Oke ! Itu saja ! Kalau ada apa2 kekeliruan ,Sila tanya Cik Lyssa ni :) Kat shoutbox ! thnx!

Tutorial : Button Show-Hide Spoiler

Button Show-Hide Spoiler???

Oke , korang try usha2 kat sidebar blog Lyssa ney , ada tak yang macam ini ??

Ada kan ?? Try klik "Click Sini" . Ada apa2 perubahan tak? Bila klik , akan jadi macam ni !

Okeis~ Cara nyer simple jer. :) 1. Log in > Dashboard > Add Gadget > Html/Java Script 2. Copy dan paste code di bawah pada JavaScript : <div><div style="margin: 5px;"> < div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Klik Sini" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagNa me('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagNa me('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagNa me('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Klik Sini'; }" type="button"/> < /div> < div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2"> < div style="display: none;"> Masukkan Code JavaScript/Gambar/Text Di sini < /div></div></div></div> * Pada code warna MERAH , tukar kan dengan perkataan korunk !(fungsi sebelum spoiler di buka) * Pada code warna HIJAU , tukar kan dengan perkataan korunk !(fungsi selepas spoiler di buka) * Pada code berwarna BIRU korang letak code JavaScript,gambar atau text yang korang nak. 3. Save .! Lihat hasilnya :)

Tutorial : Letak Copyright

Ehh, tahu ker , macam mana nak letak copyright tuh?Yg macam kat bawah ni ler :*

Haa , mudah saja ! Ikot step Lyssa ney ^_^

1. Log in > Dashboard > Design > Edit Html 2. Cari kod ini .( Nak cari tekan Ctrl + F) </body> 3. Then , paste kod kat bawah ni kat bahagian atas kod yang korang cari tadi ok? <script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;); }, 10); </script> < center>TULIS AYAT COPYRIGHT KORANG KAT SINI</center> 4. Before tuh ,preview dulu , jadi or tak .? 5. If dah jadi , SAVE terus ok :) Selamat Mencuba :)

Tutorial : Ubah Warna Highlight

Oke, now pulak , Lyssa nak teach korunk , cam ner nak ubah warna highlight.! Macam at bawah niyh ;)

1. Log in > Dashboard > Design > Edit Html 2. Then , korunk cari kod ini : (Nak cari tekan Ctrl+F) a:link { 3. Copy code kat bawah ni , and paste kan sebelum code yang anda cari tadi tu ok :) ::-moz-selection { background:#000000; color:#FFFFFF; } ::selection { background:#000000; color:#FFFFFF; } * Ini kegunaan Mozilla Firefox dan Google Chrome saja ! * Yang warna merah di atas , korang boleh tukar kan dgn warna kesukaan korang ok? Nak cari warna , klik SINI. :) Sudah siap ? Save ok ?! Dan Lihat hasilnya :))

Tutorial : Create Read More

Today , Lyssa nak teach korang macam mana nak create Read More ok ?:) Bagi sesiapa yang teringin sangat nak tahu kan ? Lyssa ada ini untuk teach korang ! Oke :)) 1. Buat entry korang macam biasa . Lepas satu perenggan , korang click pada button insert jump break di bawah perenggan tersebut. Lihat contoh di bawah ok?

Before

After

2. Then , korang type lah entry korang macam biasa , then publish ! Pastu , lihat hasilnya ok? *Kalau korang preview , tak akan jadi taw! so , korang kenalah publish untuk lihat hasilnya :)

Tutorial : Floating Button

oke ,now! Lyssa nak teach korang , macam mana nak buat floating button ! Apa itu floating button ? Tengok kat bawah ni :)

Floating button ini , ada dekat sebelah KIRI blog Lyssa k? 1. Log in > Dashboard > Design > Add Gadget > Html/Java Script 2. Copy code dibawah ni dan paste di ruang HTML/Javascript <style type='text/css'> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style> <div style='display:scroll; position:fixed; top:140px; left:-12px;'> <a class='linkopacity' href='http://www.facebook.com/LyssaDollixious' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br /> <a class='linkopacity' href='http://twitter.com/LyssaDolly' imageanchor='1'

rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br /> <a class='linkopacity' href='http://lyssadollixiouse.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br /> </div> 3. Yuhuu ! Belum Siap lagi tuh! Then , kan yang tulisan warna PINK tu , korang tukarkan lah dgn link korang k? * Yang warna MERAH = boleh tukarkan mengikut kesesuaian blog . Left boleh tukar menjadi Right ! *Bagi yang warna BIRU pula , if korang nak kekalkan pun tak pe , kalau nak , just tukar kan je link itu ;)

Tutorial : Template And Background Yang Cute

Oke ,tanpa membuang masa , Lyssa teruskan lah dengan tuto Lyssa ni k ? Sape nak ikot , cepatan ! nanty , tertinggal ketapi lak! hik3! 1. Log in > Dashboard > Design > Template Designer 2. Lepas tuh , akan keluar macam ini ! Kalau tak jelas, klik gambar di bawah :)

3. Pilih design template yang korang suka ok . Then , Apply To Blog. 4. Dashboard > Design >Add Gadget > Html/JavaScript

5. Copy And Paste Code Background (CSS Code) anda di ruangan Htlm/JavaScript * Anda boleh dapatkan background yang comel2 kat http://www.mycutegraphics.com/backgrounds/backgrounds.html ! 6. Da siap . SAVE . And lihat hasillnya ! :) p/s : Pada sesiapa yang sudah mencuba , and menjadi , gitaw kat Lyssa ok! :) wink*

Ok ! Perhatian jugak kepada sesiapa yang menghadapi masalah sebegini : DOUBLE BACKGROUND . (Atas color lain , kat bawah ada background)

Tutorial : Cara Mengelakkan Post Menjadi Dua ( Double)

Kalau nak buang DOUBLE POST tu , boleh ikot tutorial di bawahh ye! :) 1. Log in > Design > Edit HTML 2. Tekan Ctrl F Dengan serentak , cari kod ini : <b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/> Bila dah cari akan keluar macam ini lah :

3. Korang highlight yang Lyssa tunjukkan Warna biru di atas ni haa

Then , kornag delete lah ... Tapi , pastikan atas Blog2 ada Blog 1 .. **Nanti , kalau pakai delete kanggg.. tetiba hilang semua entry pulakk kangg. haha... 4. Ok , dah delete kan ? Sekarang , cuba PREVIEW ! jangan SAVE lagi . nanti , takut tak menjadi lak ..Bila dah PREVIEW , Jadi... apalagi , SAVE cepat !! :) hehe...

Tutorial : Automatic Recent Post

Kalau korang tak tahu apa itu automatic recert post , sila lihat sebelah kanan blog Lyssa bhgian bawah .ada kan? So, korang nak tahu tak ? meh cini nak ajarkan :) 1. Log in > Dashboard > Design > Add Gadget > Html/JavaScript 2. Copy And Paste code di bawah di ruangan Html/JavaScript ok? <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> < style type="text/css" media="screen"> < !-#spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none;

height:70px; overflow: hidden; background:#fff repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> < /style> < script language='javascript'>

imgr = new Array(); imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWeCMPr8/s320/no_image.gif"; imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWeCMPr8/s320/no_image.gif"; imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWeCMPr8/s320/no_image.gif"; imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWeCMPr8/s320/no_image.gif"; imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWeCMPr8/s320/no_image.gif"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://URL BLOG.blogspot.com/"; limitspy=4 intervalspy=4000 < /script> < div id="spylist"> < script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js'

type='text/javascript'></script> < /div> *Yang warna MERAH tu ,korang letakkan URL BLOG korang ok ? 3. Da siap . Save :)

Tutorial : Sticky Post

1. Korang tulis macam biasa kat post korang tuh . Dah siap tulis . Publish Post . 2. Then , korang pergi kat edit post tadi ..( Buat macam ni)

1 . Klik Post Option. 2. Tick dekat Scheduled at 3. Type tarih yang korang nak post korang sampai bila 4. Masa korang nak post korang sampai bila 5. Da siap . Publish Post :)

Tutorial : Moving Image (Contest + GA Lyssa)

Oh , yang itu ehh ? Banner2 Contest Lyssa yang bergerak tu ker ? Oke .bolehh ! boleh ! Lyssa boleh tolong ajar kan ? Tapi , macam pening ciket cara dia . Lyssa pun hentam karoma je , buat bnda tuh , last2 jadi jgk ah (!) hehe.. 1. Log in > Dashboard > Design > Add Gadget > Html/JavaScript 2. Copy and paste code di bawah ini , di ruangan html tadi tu . <center><img style="visibility: hidden; width: 0px; height: 0px;" src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEyOTE 4OTA3ODU3NjEmcHQ9MTI5MTg5MDgwNDcwOCZwPTc2MTcxJmQ9TWFycXVlZSUy MEdlbmVyYXRvciZnPTE=.gif" border="0" height="0" width="0" /><marquee style="background-color: rgb(255, 221, 255); color: rgb(0, 0, 0); font-family: verdana;

font-size: 9pt; width: 170px; height: 68px;" direction="left" behavior="scroll" scrollamount="10"><center><img style="width: 64px; height: 67px;" src="URL BANNER CONTEST 1" /><img style="width: 64px; height: 67px;" src="URL BANNER CONTEST 2" /><img style="width: 64px; height: 67px;" src="URL BANNER CONTEST 3" /></center></marquee></center> 3. Kalau nak letak banyak2 banner , boleh repeat je cara Lyssa tu , dengan masuk kan code macam ni , di bawah nyer . (sebelum </center></marquee></center> ) < img style="width: 64px; height: 67px;" src="URL BANNER CONTEST 4" /> 4. Sudah siap . SAVE :) And Lihat hasilnya yea ! ^^ * Yang Lyssa letak warna BIRU tu , boleh ubah ikot yang anda suka , tapi size tuh , dah oke. nampak kecik n comel je ..hehe . :* (pastikan semua nye sama yea ! ,mcm Lyssa buat tu) [ klau 64px ; 67px] semua kena guna saiz yang sama , untuk mengelakkan kecatatan di ruangan itu

Tutorial : Pop-up Window

Oke , anis nak tahu yea , macam mana nak buat kotak komen tuh? Oke . oke . Meh sini sys ajarkan ! ^_^ 1. Log in > Dashboard > Setting 2. Then , Clik pada tab comment . 3. Cari Title yang ini . (Comment Form Placement ) 4. Tick kan pada Pop-up window 5. Save Settings . 6. Siap . And Lihat hasilnya ^_^

Tutorial : Letak Link Dalam Post (TAG ORANG)

Korang tahu ke cam ner nak buat letak2 "link" ni ! eehehehe!~ Ohh , dah tahu yea !:)) huhu . Ini bagi sesiapa yang tak tahu oke! :)) 1. Korang type entry korang macam biasa.. 2. Then , korang highlight kan nama yang korang nak link tu.

Macam ni :

(klik utk lebih jelas) 3. Pastu g cari and copy blog Url sapa2 yang korang nak "link kan" 4. Yang bahagian atas tuh , ada tak perkataan Link?? 5. Ada kan ? Then , korang klik link tu , akan jadi macam ini :

(klik utk lebih jelas) 6. Paste kan URL tadi di ruangan itu ! 7. Da siap . Klik OK . 8. Selesai ^_^

Tutorial : WishList
1. Dashboard > Design > Add Gadget > Html/JavaScript 2. Copy code kat bawah ni , and paste kat ruangan html/javascript tu tadi ;) <form name=myform> < input type="checkbox" name="mybox" value="satu" checked />satu <br /> < input type="checkbox" name="mybox" value="dua" checked />dua <br /> < input type="checkbox" name="mybox" value="tiga" checked />tiga <br /> < input type="checkbox" name="mybox" value="empat" disabled />empat <br /> < /form> * Tulisan warna MERAH tu , korang ubah dengan benda/barang yang korang nak . *Tulisan bewarna BIRU pula boleh di ubah dgn perkataan "checked " atau " disabled " shj . 3. Da siap . SAVE :) dan lihatlah hasilnya ^_^

Tutorial : Centerkan Header

CARA PERTAMA 1. Dashboard > Design > Edit Html 2. Tekan Crtl + F , dan cari kod kat bawah ni : #outer-wrapper { 3. Pastu , bawah kod yang korang carikan tadi tuh , ada kod ni kan ?? background:#FFFFFF; width: 1000px; *Itu pun , sebagai contoh jer~ 4. Makna nyer , outer wrapper tuh . 1000px taw ?? Korang nyer ,tak tahu lah . 5. Tapi , tak siap lagi ni . Then , korang cari pulak kod ini.. #header-wrapper {

6. Dah jumpa kan ?? Pastikan width dekat header dengan outer wrapper tu sama .So korang punya header akan jadi center la . 7 . Preview dulu . Dah jadi , baru SAVE ok ? :)

CARA KEDUA 1. Dashboard > Design > Edit Html 2. Tekan Ctrl + F , cari :
/* Content

3. Lepas tu , copy kod kat bawah ni , then paste ATAS kod yang korang carikan tadi tu .
.Header img { margin-$startSide: auto; margin-$endSide: auto; }

4. Paham ke tak ? if korang tak paham , tengok contoh ni :

.Header img { margin-$startSide: auto; margin-$endSide: auto; } /* Content ----------------------------------------------- */

5 . Preview dulu . Kalau jadi , SAVE

Tutorial : Buang Image Border

Pada sesiapa yang ada image border tuh , bg perndapat Lyssa , korang buang ler, sebab nampak semak sgt . Tambah2 kalau background hitam , .tetiba pulak , kat gambar tuh , ada border . nampak burokk oh ;) Oke , now , Lyssa nak ajarkan oke .? 1. Dashboard > Design > Edit Html > Tick Expand Widgets 2. Tekan Ctrl + F dan korang cair kod di bawah ini : .post-body img, .post-body .tr-caption-container,

3. After korang jumpa kod tuh , korang akan nampak kod yang ada kat bawah ni juga. : .BlogList .item-thumbnail img { padding: $(image.border.small.size); background: $(image.background.color); border: 1px solid $(image.border.color); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 4. No yang dimerahkan tuh , korang tukarkan dengan no 0 taw ?? 5. Lepas dah siap , SAVE .and lihat hasilnya yea! :)

Tutorial : Menu Tab (Navigation Bar)

Bila korang tengok je title post ni . korang mesti tersenyum lebar kan ?? hahahaha!!!! Tuh lah , korang mintak punya lah lama , utk Lyssa ajar , macam mana nak buat yang ini kan ??

Ada salah sorang yang Request tuto ni ! 1. Log in > Dashboard > Design > Add Gadget > Html/JavaScript 2. Copy Code kat Bawah ni , And pastekan di ruangan Html/JavaScript tu ehh ? <center><a href="LINK BLOG URL KORANG" target="_blank"><img style="width: 142px; height: 51px;" src="LETAK IMAGE URL DI SINI" border="0" /></a> <a href="LINK PAGES PERTAMA" target="_blank"><img style="width: 143px; height: 51px;" src="LETAK URL IMAGE DI SINI" border="0" /></a> <a href="LINK PAGES KEDUA" target="_blank"><img style="width: 142px; height: 51px;" src="LETAK URL IMAGE DI SINI " border="0" /></a> <a href="LINK PAGES KETIGA" target="_blank"><img style="width: 142px; height: 51px;" src="LETAK URL IMAGE DISINI" border="0" /></a> </center>

* Warna Biru = Letak Link Yang Nak Dibuka Disini (Create Page terlebih dahulu) *Warna Merah = URL Image yang sesuai dengan link korang... *Warna Oren = Kelebaran dan ketinggian mengikut kesesuaian blog korang :) ** Kan yang warna MERAH tu kan , Lyssa kata URL IMAGE ? Image tu , copy boleh lah create sendiri , guna photoshop ke .. GIMP ke.. apa2 je lah kan ? .. Then , korang upload image korang itu , dekat : http://kimag.es/ Kalau tak tahu jugak nak create macam mana .. Boleh tempah kat Lyssa RM8 je ! :) Maximum 4 @ 5 TAB . 3 . Dah siap , SAVE erkk :) 4. Jangan lupa , DRAG Gadget tu , ke bawah Header

1. Dashboard > New Post > Edit Pages

Tutorial : Create Page Untuk Menu Tab (Biasa)

2. Tekan Create Page / New Page spt gambar di bawah :

2. Then , dekat page titile , korang taip lah apa yang korang suka , ok ?

3. Ok . Contoh kat bawah ni , kalau korang nak taip terus dekat page itu . Contoh nya , macam kalau nak tulis pasal kita ker. terus je taip kat situ ok?

4. Kalau korang nak letak link dalam page tu , pulak , macam in . Korang taip dulu tajuk yang korang suka . taip tajuk yang berkenaan yer .. Contoh kt bwh:

5. Then , korang pergi dekat Blog korang . Make Sure , korang ada post pasal "something" dulu .. post macam biasa)>new post untuk korang letak kan dalam page. Contoh kat bawah .. Then . boleh lah korang nak copy pula nanti , link itu ..

6. Sudah copy kan , link korang ? Then , pergi dekat page tadi .. Korang highlight pulak , tajuk yang berkenaan tu. BUKAN "Title pages" tapi , tajuk kat dalam entry , yang Lyssa suruh taip kan tadi tau ?

7. Then , dekat atas tuh , ada tulis perkataan link kan ? Atau , kalau tak de. Dia ada bulat warna hijau , (hyperlink) . adakan ? Korang klik kat situ ;) Ia akan keluar macam dekat bawah ni :

8. Dah tu , apa lagi ..? Paste lah link tadi , yang Lyssa suruh copy tadi tuu.. HEHE . Tekan ok ! Kan dah siap ! Senang kan ? hee~ 9. Ha ! kejap .. kejapp ! Nanti dulu ! jangan Hepi sangat ! tak abis lagii lah .hehe ;) Sekarag , korang pergi CEPAT , tekan Publish Post kat bawah yang warna oren tuu . 10. Dia ada keluar macam ini takk ?

11. Then , korang TICK macam yang Lyssa tunjuk kan tu . SAVE . And Lihat lah hasil nya ;)

12. Menjadi tak ? hehe ! Ini untuk TAB yang ringkas je lah ! . Kalau nak TAB Macam MENU TAB Lyssa tu , nanti , tengok Entry yang seterusya , ok ?:) 13 . Kalau korang rasa TAB tu ,tak bape lawa , korang boleh tukar warna TAB dekat .: Design > Template Designer > Advance > Tab Text .