>Tutorial : membuat text area & marquee (image & text bergerak)

Februari 21, 2011 at 8:00 pm | Dikirim dalam tutorial | Tinggalkan komen

>Salam bahagia,

1. membuat text area untuk banner

kodnya :

<textarea cols=”60″ rows=”3″> kod image @ banner & link url </textarea>

cols = lebar text area
rows = tinggi text area

cols & rows ni buleh ditukor ikut kesesuaian yang diinginkan.

contoh :

<center><textarea cols=”60″ rows=”3″; <a href=”http://www.kakyong.com/2011/01/ga-3rd-blog-besday.html” target=”_blank”><img src=”http://lh4.ggpht.com/_MGsM4k7cdkU/TStBKc-zouI/AAAAAAAAMXQ/Yv2ZAqdT6H8/3rd-besday-300px.jpg” title=”due 11 Feb 2011″ width=”280″ /></a> </textarea> </center>

hasilnya :

note :
selalunya kita gunakan kaedah ini untuk banner exchange, dan juga untuk kod banner contest/giveaway

2. membuat text bergerak (marquee)

Ibu tak ingat siapa yang bertanya, tapi memang ade rakan blogger yang bertanya..

kod asas

<marquee> text </marquee>

contoh :

<marquee> tutorial marquee </marquee>

tutorial marque

jika ingan letakkan link

<marquee> text & link </marquee>

contoh & hasilnya

<marquee> <a href=”http://kakyongshoppe.blogspot.com/search/label/coolababy”>Cloth diapers Coolababy</a> </marquee>

Cloth diapers Coolababy

sila hala kan cursor ke perkataan yang bergerak.. baru leh nampak ia ber’link’

Kod untuk tambah jenis gerakan

ini untuk gerakan berpatah-balik

<marquee behavior=”alternate” > text & link url </marque>

ini gerakan yang lain

<marquee direction=”left” > text & link url </marque>

direction lain “down”, “up” & “right”

contoh

<marquee behavior=”alternate” > <a href=”http://kakyongshoppe.blogspot.com/2011/02/promosi-untuk-cloth-diapers-coolababy.html” target=”_blank”>Jualan menghabiskan stok untuk Cloth diapers Coolababy printed</a> </marque>
 

hasilnya

Jualan menghabiskan stok untuk Cloth diapers Coolababy printed

contoh hasil gerakan yang lain

direction=”left”

direction=”right”

tutorial marque

direction=”up”

tutorial marque

direction=”down”

tutorial marque

sumber tutorial dari SINI, tapi ibu tambah sedikit berdasarkan apa yang ibu tahu.

Jika nak buat image/foto/banner yang bergerak.. tukor ajer text dengan kod foto/banner/image.. kaedahnya masih sama. Kalo tak pasti.. len kali ibu tunjuk cara untuk buat banner bergerak @ macam slide show tu…

salam kasih sayang,
.

>Tutorial : Sorok Kotak Jerit @ Hidden shoutbox

Februari 20, 2011 at 9:14 pm | Dikirim dalam sembunyi kotak jerit, tutorial | Tinggalkan komen

>Salam bahagia,

Ni sebab Ayu yang request, maka ibu kongsikan di sini. Jadi mana2 yang belum tahu, buleh refer kat sini.. Winking smile

Caranya :

dashboard > Page elements > Add a Gadget

dan masukkan kod dibawah ni.

<style type=”text/css”>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:90px;

float:left;
cursor:pointer;
background:url(‘https://lh5.googleusercontent.com/_MGsM4k7cdkU/TWEQcbfmdhI/AAAAAAAANFE/FYCDhHXcyBk/jeritsini-1.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 KOD KOTAK JERIT KOME 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>

image untuk ikon tab kotak jerit ni, kome buleh tukor dengan image kome sendiri, yang ibu highlight warna pink itu.

dan jangan lupa untuk tukor height & width tab (yang warna hijo tu), ikut saiz ikon tab kome.

bila dah puashati, tekan save. Begitu mudah sekali… Winking smile  Selamat mencuba.

Jualan penghabisan stok – cloth diapers Coolababy printed

Pakej blog make-over

Salam kasih sayang,
.

>Tips SEO : ubah meta tag tajuk blog & pasang breadcrumb

Februari 17, 2011 at 10:21 am | Dikirim dalam blogging tips, seo, tutorial | Tinggalkan komen

>Salam bahagia,

Rata-rata ramai dah tahu apa itu SEO ? Kome tanya ajer pakcik Google, sure melambak2 link yang kome akan jumpa berkaitan dengan SEO ni… 

SEO = search engine optimization

Maksudnya kalo kome taip satu2 keyword, kome akan jumpa blog @ website mana yang mucul dulu di page pertama google.. tu bermakna page tu memang betul2 mesra SEO..

Ini contoh jer lah.. ikut le carian kome.. ni sajer lah nak kabo, blog ibu buat masa ni dah mesra SEO.. tapi kan, kalo guna platform wordpress sure lagi mesra kot… hehehhe…

Okay, hari ni ibu kongsikan beberapa tips supaya template blog lebih mesra SEO.

1.  ubah tajuk blog @ page title ~ mengubah meta tag tajuk

Sebaiknya memang dianjurkan supaya mencari template yang mesra seo.. tapi kan.. la ni dengan segala kepandaian mengedit kod html.. boleh ajer di ubah kod template agar lebih mesra seo
sambil BW pagi tadi.. terus printscreen… 

cuba renung betul2 bahagian yang dikotakkan dan dianakpanah tu… ade beza tak?

Blog mesra seo >>> judul n3 akan muncul dahulu dan diikuti dengan judul blog/page title.

tajuk n3 | tajuk blog

Blog kurang mesra seo >> tajuk blog muncul dulu & diikuti dengan tajuk n3..

Cuba check blog kome.. klik jer mana2 n3.. pastu kome tengok kat browser tu, rata2 adalah macam dalam gambor di bawah ni kan

kidnap dari blog Sop

Sebaiknya macam ni

ini pun sama, kidnap dari blog SOP

Cara untuk ubah

a. LOg-in ke dashboard > Design > Edit Html

b. Cari kod dibawah

<title><data:blog.pageTitle/></title>

c. Buang kod itu, dan gantikan dengan kod dibawah ni

<b:if cond=’data:blog.pageType == “item”‘>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>

d. klik save template & siap.

2. pasang breadcrumb

Breadcrumb ni ibu tak reti nak translate kan ke bahasa melayu.. contoh nya macam gambor di bawah ni

Yang ibu kotakkan merah itu lah dipanggil breadcrumb.

Cara nak buat

a. LOg-in ke dashboard > Design > Edit Html (save dulu template)

b. Tick pada Expand widgets dan cari kod dibawah

<b:if cond=’data:post.title’>

c. copy kod yang ini dibawah kod itu (merujuk b)

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<a href=’http://www.kakyong.com/’>Home</a> »
<b:if cond=’data:post.labels’>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
<b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</b:if>

yang warna purple tu kome tukor dengan url blog kome..

c. save template.. dah siap.

sumber tutorial dari sini

updated : 1.26 pm, 17 Feb 2011

ada kawan blogger yang komplen, cuba buat breadcrumb ni, tapi tak jadi.. ibu dah betulkan kod di atas. MOhon maaf atas kesulitan



kod yang bermasalah tu adalah kod “true” , sila tukor kod ini kepada yang ibu highlight biru dalam gambor atas ni.. &quot;true&quot;

yang asal (sebelum edit kod)  adalah macam ni…

Lain kali, ibu kongsikan lagi tips2 seo yang lain…

p/s
si Aliya dah jerit2 kat dapur… huhuuu.. ni ler susah bila tak sempat nak buat autopublish n3..

salam kasih sayang,
.

>Pakej untuk make-over blog & kaedah lain nak letak signature dalam blog

Januari 31, 2011 at 8:54 am | Dikirim dalam design servis, design signature, tutorial | Tinggalkan komen

>.

Salam bahagia,

Jika kome berminat untuk make-over blog or nak kasi comel blog.. boleh la roger2 ibu yer… email kakyong72@gmail.com
Untuk pakej permulaan, which merupakan pakej promosi… hanya untuk blogspot ajer yer…

Pakej RM15
~ meliputi customize header + background template + signature
~ insert header + background + signature ke blog



Pakej RM20
~ meliputi customize header + background template + footer banner + signature
~ insert header + background + footer banner + signature ke blog

note :
Sekiranya nak letak extra2 function @ widget diblog dan susun atur widget, caj tambahan akan dikenakan..

contoh widget :
  • widget top commentator
  • create page
  • widget shoutbot ditepi blog (tersembunyi)
  • Letak icon FB, twitter
  • create blog badge
  • widget related post (macam linkwithin)
  • adjust ads nuffnang terapung
  • kotak komen dengan reply button
  • dan sebagainya, atas permintaan kome

Promosi akan ON sehingga 27 Februari 2011 (tarikh ni birthday Fikri yang ke 5)..  Winking smile  Selepas tarikh ni, mulai 28 Februari 2011, harga akan naik sekali ganda.

lastly nak tunjuk signature  (hadiah untuk kawan2 blog) yang dah siap Open-mouthed smile

Note :

Anne masih belum claim hadiah signature.

Tutorial ringkas letak signature 

Actually boleh refer di n3

Cara meletak signature dalam blog @ n3

Buat kawan2 blog yang masih bermasalah nak masukkan signature ke blog post & tidak pasti kod nya… mai sini ibu tolong permudahkan :

guna kod ini :

<img src=”url-signature-kome” style=”background: transparent; border: 0 !important;” width=”300″ />
Gantikan ajer yang berwarna ungu dengan url-signature-kome. untuk dapatkan url signature.. sila upload signature kome tu ke picasaweb album @ photobucket @ flickr @ mana2 ruang simpan gambor yang kome ade.

width tu boleh kome adjust sesuka hati kome.. nak lagi kecik, then kecikkan lah nombor tu.
Untuk settingkan ada 2 kaedah :

1. Supaya signature muncul di setiap n3 baru

pergi ke dashboard > Settings > Formating

     

copy & paste kod signature kome ke ruangan ‘Post Template’.  mudah aje kan.

2. Supaya signature muncul di setiap n3 (baru & lama)

boleh guna kaedah kedua :  masukan kod ke dalam template, caranya :

  a. pergi ke dashboard > Design > Edit html
  b. tick expand widget dan cari kod
     <data:post.body/>

c. copy &  pastekan kod signature di bawah kod itu. Jika kome ade letak kod untuk ‘read more’ , sila letak kod di bawah kod ‘read more’

d. save kan template & view blog.
JIka menggunakan kaedah kedua ni, signature akan muncul di setiap n3.. tak kiralah n3 baru atau n3 lama.. sekian, harap membantu.

salam kasih sayang,
.

>Cara membuat banner menggunakan Photoscape

Januari 20, 2011 at 8:34 am | Dikirim dalam tutorial | Tinggalkan komen

>Salam bahagia,

Ibu tak ingat la sapa yang pernah request untuk buat banner. btw, hari ni kita belajar cara buat banner menggunakan software photo editing Photoscape. Yang tak ade photoscape , boleh download kat sini… FOC jer..

Kalo dah ade photoscape, jom mulakan…

Saiz banner ni, pada mula nak buat okay ajer amik ukuran besor.. puashati tengok. Bila dah siap boleh RESIZE.. takde masalah. Winking smile

Foto @ imej ni sebaiknya dalam bentuk file .PNG.. @ transparent… tak de la nampak berkotak kan… gambor2 ni buleh jer google. Open-mouthed smile


Text yang dah siap tu.. kome boleh ‘position’ kan dia ikut kesukaan kome…  nak senget banyak, nak bior lentang cam tu ker… ikut suka.. kreativiti masing2..
Kalo tak banyak pilihan font dalam lappy, boleh pilih kat sini atau sini.. dan upload la ke lappy/PC masing-masing yer…

Dah puashati dengan pilihan frame dan touch-up terakhir.. buleh la di save kan.. SIap.. dah boleh tayang kat kawan2… Winking smile

Sekian, harap membantu kawan2 blog yang baru nak belajor buat banner sendiri…

Sign up HB!Affiliate to enjoy free gift!

p/s

1. x perasan hari ni rupanya cuti umum Thaipusam.. kat rumah takde kalender… ade sapa2 yang ade extra kalendar, mai la pos 1 kat ibu… huhuuu…

2. malam tadi Fikri demam, badan panas kan main… gigih ibu lap2 badan dia.. paksa makan ubat.. sebab tak nak Fikri ponteng sekolah.. sekali cuti la hari ni… 

salam kasih sayang buat semua,
.

>Cara tampal banner dengan backlink di sidebar dan edit saiz banner

Disember 9, 2010 at 8:08 am | Dikirim dalam tutorial | Tinggalkan komen

>Salam bahagia dan salam ceria,

Rasanya ramai yang tahu cara-cara nak letakkan banner di sidebar.. terutama pada kawan2 yang gigih join contest & giveaway.. Kiranya dah expert dah bab2 masukkan banner dan back link ni..

Ibu kali ni menjawab pertanyaan seorang rakan blogger di Formspring ibu..

masukkan-banner

Kesian plak kat kawan ni kan… kang tak dapat plak nak join GA ibu or mana2 GA lain, gara2 tak dapat nak letakkan banner di sidebar.

Actually ade juga yang bertanya via email, camno nak letakkan banner berserta backlink, terutama blogger newbies. Maka, pepagi buta ni ibu buat tutorial yang agak intensif & comprehensive..

stepnya :


log-in dashboard > design > page elements > add gadget

add-gadget1

antara (1) dan (2).. dua2 pun boleh berfungsi. Thumbs up   klik pada Add a Gadget dan pilih HTML/JavaScript..

add-htmljava

Part di atas ni memang semua dah tahu.. tapi ade juga blogger newbies yang tak tahu.. jadi ibu tunjuk le step dari awal.

Kemudian pergi ke banner yang diinginkan, right klik pada image (banner) dan pilih  >> samada Copy image URL atau Copy image.

copy image

jika tak begitu mahir dengan kod html untuk tampal gambar, better guna “copy image’ jer..

copy image 1

dah klik copy image, kemudian ‘paste’ kan ajer dalam gadget html/javascript ni.

Untuk adjust saiz banner.. klik pada Edit Html.. yang dibulatkan warna biru tu. Dan akan dapat macam ni.

copy image 2

untuk laraskan saiz, masukkan kan kod width=”200” , 200 ni hanya contoh jer.. kena tahu lah saiz sidebar blog memasing. Kalo lebar sidebar hanya 180, maka sesuai letak width tu 160.

supaya banner tu nampak berada di tengah2.. tambah kod <center> dan </center>

jika nak letakkan due date @ apa2 sahaja tajuk pada banner.. tambah kod title=”due 31 Dec 2010”
maka kod banner yang baru akan jadi seperti ini :

<center><img src=”http://lh6.ggpht.com/_MGsM4k7cdkU/TOk4JD-IRDI/AAAAAAAALTw/hTn07iGz-Vs/teka%26menang-1.jpg width=”200” title=”due 31 Dec 2010” /> </center>

copy image 3

last, proses terakhir adalah untuk masukkan backlink @ url blog @ link website yang berkaitan.

Caranya : Copy link berkaitan dan Klik jer pada ikon yang ade anak panah biru turquois kat gambar atas ni.

copy image 4

Pastikan anda highlight kod banner sebelum klik ikon untuk “create link”

kod banner akan jadi seperti ini :

seterusnya, supaya bila banner diklik , link akan terbuka di tab yang lain.. kita tambah kod target=”_blank”. 


Maka kod banner yang lengkap akan jadi seperti ini :

<center><a href=”http://www.kakyong.com/2010/11/ga-teka-menang-ibu3a.html”  target=”_blank” ><img src=”http://lh6.ggpht.com/_MGsM4k7cdkU/TOk4JD-IRDI/AAAAAAAALTw/hTn07iGz-Vs/teka%26menang-1.jpg” width=”200″ title=”due 31 Dec 2010″ /></a> </center>

Bila sudah puashati, save dan adjust la dimana nak di’position’ kan banner tersebut.

secara ringkasnya :

1. kod width untuk laraskan lebar banner. Takde la banner sampai terkeluor dari garisan & akan nampak lebih kemas.
2. kod title untuk letakkan tajuk atau apa2 sahaja yang anda suka nak taip.
3. kod target untuk pastikan link terbuka di tab yang lain, maka kita masih kekal di page blog kita baca.

Tak complicated kan… mudah jer. Kalo tak faham, pelan2 belajor.. yang dah expert, kita belajor bab lain pulak.

Salam kasih sayang buat semua,

 

>Cara meletak signature dalam blog @ n3

November 4, 2010 at 4:29 pm | Dikirim dalam tutorial | Tinggalkan komen

>Salam ceria,

Memandangkan ramai kalangan kawan ibu yang masih belum tahu camana nak letakkan ‘signature’ dalam blog, maka ibu share cara nak letakkan nya..

Ibu cuba ajor cara yang mudah.. harap2 kalian faham.

Step 1st.. upload kali pertama dlm compose n3..
 
1-uploadgambar
 
Step 2nd.. dah upload file gambor tu.. pilih ‘original size’
2-pilihoriginalsize
 
Step 3rd.. tengok kod kat ‘edit html’
 
3-kodhtml

 
hanya ambil kod yang dihighlight biru (dalam gambar di atas) dan tambah kod berwarna merah (rujuk contoh kod di bawah). width pula boleh tukar ikut kelebaran yang anda suka.

 
contoh :
<img  src=”https://kakyongibu3a.files.wordpress.com/2010/11/aritgnibu1.png”    style=”background: transparent; border: 0 !important;” width=”320″ />

nota :
warna biru = url gambar/signature

warna merah = supaya signature transparent & tidak nampak berkotak.. jadi boleh letak di mana2 backgroung pun

width= panjang/lebar signature.. adjust la ikut kesukaan sendiri

Step 4th.. copy kod signature dan simpan di settings > formatting
 
4-set-format
 

scroll ke bawah sampai jumpa kotak ‘post template’, paste kan kod signature dalam kotak ‘post template’ dan tekan ‘save setting’.

 
5-post-template
 
Selepas ni Insya Allah, setiap kali mulakan post baru, signature dah sedia ade dalam ‘New Post’

Sekian, harap membantu.

>Resize foto sebelum upload ke blogger/blogspot

Oktober 21, 2010 at 12:59 pm | Dikirim dalam blogging tips, tutorial | Tinggalkan komen

>Salam bahagia

 

sila klik pada tajuk entry untuk meninggalkan komen..

Lately ni ramai ibu perasan kawan2 blogger yang heboh dok buat n3 pasal storage simpanan gambar di blogger/blogspot. Pada yang belum tahu, limit storage di Picasa web album @ blogger hanya lah 1024M=1G.

nota : semua foto yang diuploadkan ke blog melalui draft blogger @ upload melalui picasa 3 akan automatik masuk/tersimpan ke  Picasa web album

Ibu dari awal2 dulu dah tahu pasal limit storage ni dah memang sejak pertengahan tahun 2009 dah mula edit foto , edit dalam erti kata – RESIZE foto..

Ibu guna photoscape untuk kerja2 editing foto. Ibu normally resize foto dalam saiz 300px ke 500 px, which normally saiz foto akan menjadi kurang daripada 100kb.

Sekarang ni dah senang nak upload foto ke blogger.. tak cam dulu.. kena paste kod bagai.. dulu pun boleh juga upload macam ni, tapi loading nya teramat lah lambat.
Once dah uplaod foto, sila resize foto ke saiz original (dalam mode Compose).. kemudian klik kat mode Edit HTML

tengok kod gambar.. contoh macam kod kat ats.. kemudian tambah kod yang berwarna biru. width=”123″. 123 tu ikut la saiz yang berkenan, tapi jangan le sampai besor daripada saiz/kelebaran mukasurat n3 kome. Ibu selalu resize ke width=”580″

 kemudian, klik ‘preview’

Foto 1 : adalah foto yang dah di resize width (kelebaran)
Foto 2 : adalah foto yang masih dalam original size.. iaitu 500px

walaupun saiz foto kecik.. tapi lepas dah adjust width, Insya Allah, masih boleh dapat nampak foto yang besor…

Sekian.. selamat meRESIZEkan foto..

update : jam 4 petang 21 Oct 2010

cara utk semak saiz storage… untuk tahu berapa peratus dah guna.



1. log-in ke account google anda

2. lepas dah log-in.. cari tab menu “more”.. kemudian pilih “photo”

3. kemudian, anda akan “directed” ke picasa web album. kat situ semua gamabr yang anda pernah upload ke blog anda ada di situ.

4. scroll hingga ke bawah, anda akan jumpa ayat yang macam di bawah ini… 

yang ini yang ibu punya.. kiranya semua blog yg ibu ada.. ibu baru guna 26%… harap2 masih la boleh bertahan untuk 2 tahun lagi…

>Cara untuk create PAGE

September 21, 2010 at 8:12 am | Dikirim dalam blogging tips, tutorial | Tinggalkan komen

>Salam bahagia semua

sila klik pada tajuk entry untuk meninggalkan komen..

Tutorial ni kakyong buat kerana ada permintaan dari Aini dan Ummu Khaulah.. ade siapa lagi yer yang request? Rasa macam ade beberapa orang yang request, cuma ibu yang tak dapat nak recall…

Apa itu PAGES?

contoh :

ini contoh pages di sidebar – refer anakpanah merah

ini contoh pages di tabs – refer anak panah merah

link/url untuk pages?

Yang membezakan Pages dengan n3 biasa adalah huruf p .. contoh : http://www.kakyong.com/p/meh-exchange-link.html

Beberapa perkara yang perlu diambil perhatian :

1. Jika anda menggunakan template selain daripada template designer blogger.com mungkin ia hanya boleh apply di sidebar… seperti di kakyong’s shoppe – contoh pertama di atas (actually boleh juga buat.. cuma kakyong jer yang belum explore caranya)
2. Jika anda menggunakan template designer blogger.com… follow jer tutorial ini… tak perlu tambah apa2…
3. pastikan anda sign-in ke draft.blogger.com

step 1
step 2

step 3
step 4
Begitulah kaedahnya/cara untuk membuat pages…
Untuk satu-satu blog, kalian boleh create sehingga 10 pages. Untuk create page baru, follow semua step1, step 2 dan step 4. Step 3 hanya akan appear untuk pertama kali kalian nak mula create Page.

>Cara buat animated-banner

Jun 26, 2010 at 5:14 am | Dikirim dalam tutorial | Tinggalkan komen

>

.
Salam bahagia buat semua,

Susulan daripada n3 ini. Jadi hari ini ibu kongsikan cara-cara untuk membuatnya. sangat simple sebenarnya. Simple le bila dah tahu buat.. masa tak tahu buat tu.. susah bangat rasanya…

Ibu mengguna photo editor Photocsape Photoscape ni rasanya antara photo editor yang popular.. ramai yang guna. 

1. Untuk membuat animated-banner, kita guna menu AniGif.

2.  Rajah dibawah adalah bila kita berada dalam menu AniGif

klik untuk imej lebih besar

Ikut langkah2 ni, seperti dalam rajah ade no 1 hingga 3.

  1. Pilih dan drag foto yang hendak digunakan dalam banner. Sebaiknya foto biarlah yang sudah di ‘edit’ & di ‘resize’. 
  2. klik pada kotak menu “Change Effect” –> akan keluar kotak dialog.. boleh cuba & lihat effect setiap jenis. Untuk animated-banner dengan foto saling bertukar ganti, pilih “No Transit Effect”.
  3. Savekan animated-banner ke dalam folder anda.
oppsss.. ni step yang tertinggal.. sebelum save kan.. sila resize saiz banner.. lebih kecil banner lebih bagus, saiz file juga lebih kecil & mudah untuk diupload. Selalunya banner kita tak buat besar, saiz terkecil boleh jadi 125×125 (banner iklan di blog selalunya saiz ini), boleh juga buat saiz lebih besar, disesuaikan dengan keperluan masing-masing.

okey, now banner dah siap, seterusnya adalah untuk UPLOAd kan banner. Sebelum2 ni banyak kali ibu buat tak menjadi.. Ibu upload guna Picasa 3.. file tu otomatik di convert ke extension jpg, so sah-sah le tak menjadi kan…
Untuk upload, kita guna imageshack.. ibu pun jer terTAHU tentang imageshack ni.
  • kemudian (1) browse foto dari lappy/PC (boleh upload lebih daripada 1) , (2)klik “Upload Now”
  • bila dapat page macam ni.. mean photo dah berjaya di UpLoad… bahagian yang ibu tandakan dengan garisan biru (both side) adalah kod untuk banner.. jadi.. sila lah pilih kod mana yang berkenan.. jika untuk blogger, selalunya kita guna ‘Html Code‘. Dah siap.. dan banner dah boleh digunakan.
Untuk yang dah familiar dengan kod html ni, just guna direct link pun sudah memadai, lepas tu create lah kod banner sendiri.. contoh macam ibu lah.. ibu hanya guna direct link jer.. pastu buat kod banner sendiri.  

option lain untuk membuat animated-banner boleh tengok kat SINI

hopefully tuturial ringkas ni membantu. Jika ade permintaan, nanti ibu cuba buat tutorial untuk buat banner yang perkataan blinking2 tu.. macam banner utk Special Giveaway kakyong[dot]com

Kakyong’s shoppe – menjual kain lampin moden @ cloth diapers pada harga berpatutan – jenama Coolababy, QQbaby Minky & Babyland printed.

Laman Berikutnya »

Blog di WordPress.com.
Entries dan komen feeds.