Showing posts with label TUTORIAL BLOG. Show all posts
Showing posts with label TUTORIAL BLOG. Show all posts
Membuat perkataan yang bergerak dapat menarik minat pengunjung terhadap pergerakan tersebut seterusnya menarik minat pengunjung apa yang ingin disampaikan oleh pemilik blog. Selain dikenali sebagai scrolling text, ianya juga dikenali sebagai marquee text.




Cara Buat Perkataan Bergerak

Walaupun pergerakan ini menarik minat, tetapi tidak digalakkan untuk diletakkan terlalu banyak di dalam blog kerana dibimbangi keadaan 'menarik' bertukar 'menyerabutkan'.:)

Berikut adalah tutorial untuk membuat perkataan bergerak.
Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.

1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah

Contoh scrolling text


Output untuk kod ini seperti berikut:
Contoh scrolling text

2. Ubah pergerakan perkataan 
Penambahan kod berikut diperlukan dalam kod asal.
direction="left"
direction="right"
direction="up"
direction="down"

Berikut contoh kod untuk pegerakan dari kanan ke kiri




Output untuk kod ini adalah
Contoh scrolling text

3.Ubah warna background 
Untuk ubah background, perlu diletakkan kod berikut
bgcolor="#kod warna"

Senarai kod warna boleh didapati disini.
Contoh kod yang diletakkan background,

Contoh scrolling text


Output untuk kod ini adalah
Contoh scrolling text

4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.
behavior="alternate"
contoh kod yang diletakkan trick ini.

Contoh scrolling text

Output untuk kod ini
Contoh scrolling text

5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut
scrollamount="2


Contoh kod dengan trick ini.

Contoh scrolling text

Output:
Scrollamount :2
Contoh scrolling text

Scrollamount :4
Contoh scrolling text

6. Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.

Penambahan kod yang perlu dilakukan adalah
onmouseover="this.stop()" onmouseout="this.start()"
Contoh kod dengan trick ini.
Contoh scrolling text

output untuk trick ini.
Contoh scrolling text


Kebiasaannya, apabila sesebuah blog menggunakan fungsi readmore, perkataan yang keluar adalah samada 'read more', 'baca lagi', 'klik untuk teruskan pembacaan' dan lain-lain tanpa melibatkan tajuk sesebuah entri.

Tutorial ini akan menerangkan bagaimana untuk menambah sedikit kod daripada tutorial readmore sebelum ini untuk membolehkan tajuk entri keluar secara automatic selepas perkataan 'readmore' (atau perkataan lain berkaitan'.

Sebelum

Letak Tajuk Entri Pada Read More


Selepas
Letak Tajuk Entri Pada Read More


Cara-cara untuk meletakkan kod untuk trick ini adalah seperti berikut.

1. Login akaun blogger dari dashboard > layout > edit HTML > expand widget templates

2. Klik ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut


3. Dibawah kod , ada beberapa kod yang berkaitan dengan readmore, dan buat penambahan kod dibawah selepas perkataan 'readmore'(atau perkataan lain yang berkaitan)
-pastikan kod ini terletak sebelum


Lihat contoh dibawah untuk memudahkan.
Letak Tajuk Entri Pada Read More


4.Apabila selesai anda boleh save dan lihat hasilnya.:)
Berapakah bilangan pelawat yang berada dalam blog anda ketika ini.?
Mungkin amat sukar untuk anda menjangkakannya (tidak boleh rasanya.:)
Kalau anda mempunyai statistik blog, mungkin anda tahu mengikut hari ataupun jam,
tetapi anda tidak tahu berapa bilangan pengunjung dalam keadaan masa sebenar.
Bilangan Pengunjung Online Dalam Blog


whous.amung.us menawarkan widget yang dapat menunjukkan bilangan pengunjung yang online pada masa sebenar.
Antara kelebihan menggunakan widget ini adalah paparan yang menarik, dan juga cara pasang pada blog dengan mudah. Boleh lihat demo widget ini dipasang di blog, DISINI.

Berikut adalah langkah yang diperlukan untuk meletakkan widget ini didalam blog anda.


1. Buka web http://whos.amung.us/

2. Pilih kedudukan widget yang dikehendaki (widget akan berada dalam keadaan statik dalam blog anda), selepas itu copy code yang tersedia.
Bilangan Pengunjung Online Dalam Blog


3. Setelah copy code, pastekan di dalam html/javascript yang terdapat dalam page element blog anda.
Dashboard > layout > page element > add a gadget > html/javascript.
Bilangan Pengunjung Online Dalam Blog

Jika masih tidak faham, sila rujuk disini.

4. Save, dan lihat hasilnya..:)
Bagi bahasa melayu, akan keluar ayat, "Anda mungkin juga meminati" dan bagi english "You may also like these stories"..

Ini adalah yang biasa,


Tukar Ayat Asal Linkwithin

Dan ini pula yang agak kurang biasa.:)
Tukar Ayat Asal Linkwithin


Anda ingin tukar ayat ini mengikut kehendak anda.?

Ikuti tutorial yang sangat mudah ini.:)


1. Login akaun anda, kemudian dari dashboard > layout

2.Dari page element yang dipaparkan, cari element untuk Linkwithin kemudian klik edit
Tukar Ayat Asal Linkwithin

3. Daripada kod yang dipaparkan, tambah kod ini dibahagian atasnya

Penerangan : Tukarkan "AYAT ANDA DISINI" dengan apa-apa yang anda kehendaki.:)

Kod anda sepatutnya kelihatan seperti ini.
Tukar Ayat Asal Linkwithin


4. Selepas selesai, klik save untuk lihat kesannya..

Senang bukan.:)
Linkwithin antara blog yang berguna untuk memaparkan post yang berkaitan dalam sesebuah blog. Link within ini berbeza dengan 'related post' biasa kerana linkwithin memaparkan thumbnail bagi entri yang berkaitan.

Contoh:

Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.

Berikut adalah cara ringkas untuk meletakkan linkwithin dalam blog.

1. Buka web www.linkwithin.com

2. Pada paparan yang muncul, masukkan maklumat yang berkaitan.
Cara Letak linkwithin Dalam Blog

Jika background anda gelap,tick pada kotak kosong kecil tu, dan pastikan anda masukkan bilangan yang sesuai dengan lebar blog anda.

3. Klik pada install widget
Cara Letak Linkwithin Dalam Blog


4. Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik add widget
Cara Letak Linkwithin Dalam Blog


5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)
Cara Letak Linkwithin Dalam Blog
Mempunyai signature dapat menambahkan lagi trademark bagi seseorang blogger. Signature terletak pada bahagian akhir untuk sesuatu entri yang di post oleh blogger.

Letak Signature Dalam Blog


Signature boleh jadi apa sahaja samada gambar, icon, dan juga nama anda dengan font yang dirasakan sesuai untuk signature.

Tutorial ini akan menerangkan cara-cara meletakkan signature pada blog dengan menggunakan signature yang di'generate' daripada kaedah online.

Laman web yang paling sesuai untuk create signature online adalahhttp://www.mylivesignature.com/.Laman web ini dicadangkan kerana ianya dapat menghasilkan signature yang anda mahu dengan lebih senang. Masa anda pun jimat.:)


CREATE SIGNATURE.

1.Buka web http://www.mylivesignature.com/ untuk create signature anda.
Letak Signature Dalam Blog


Nota:pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'.
tutorial Letak Signature Dalam Blog


2.Setelah selesai signature anda, uploadkan untuk dapat url, (boleh guna imageshack.us atau upload pada blog anda sendiri)
contoh url:http://2.bp.blogspot.com/_CEj8AwvwSNM/S4PotCOwq7I/AAAAAAAAD9A/jC8qDqdmR78/signature.png


CARA LETAK DALAM BLOG.

1. Login kepada blog anda, kemudian dari dashboard, Layout > Edit Html > Expand Widget Templates (Backup template anda untuk langkah keselematan)

2. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi find kemudian cari kod dibawah


Cara Letak Signature Dalam Blog


3. Copy code ini dan paste di bawah kod tadi.

left">URL gambar/signature anda"/>



kod anda sepatutnya kelihatan seperti ini.(contoh)
Cara Letak Signature Dalam Blog


Penerangan :
left : kedudukan signature boleh ditukar kepada center ataupun right
URL gambar/signature anda : Masukkan url gambar/signature


4. Selepas selesai letak code, klik preview dan jika anda berpuas hati, klik save.:)
Background sesebuah post biasanya akan mengikut default yang telah ditetapkan dalam setting blogger. Tetapi ada satu trick yang boleh digunakan untuk menjadikan background yang berbeza untuk entri yang dikehendaki sahaja.

Contohnya entri ini yang menggunakan background bercorak bunga-bungaan, tidak seperti entri lain yang berlatar belakangkan warna putih sahaja.



Tutorial untuk membuat background untuk post adalah begitu senang.

Apa yang bagusnya adalah, anda boleh pilih gambar apa sahaja yang anda mahu untuk background, dan anda boleh pilih untuk hendak letakkan dalam post yang mana satu untuk blog anda.

Apabila anda login pada blog anda, letakkan kod ini dalam new post anda. (pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' bukan 'compose'- ini untuk mengelakkan code warna dicopy sekali.:)


Link gambar disini) no-repeat;">
Taip segala entri untuk blog anda disini.


- Letakkan link gambar pada tulisan biru (kalau anda upload dalam blog kemudian copy url gambar lagi bagus.:)
- 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


Itu sahaja.

Apabila anda post anda akan lihat kesannya.

p/s:
-pastikan anda pilih backgdround yang bersesuainya agar pengunjung blog anda tidak pening membaca.
1. Login akaun Nuffnang untuk pastikan kod iklan Nuffnang untuk Skyscraper



2. Copy kod di bawah, kemudian letakkan di HTML/javascript dalam blog anda
( Dashboard > Layout > Page elements > Add a gadget > HTML/javascript )
Kalau masih tak faham rujuk sini.


Letak Kod Nuffnang Sini


Penerangan :
i.) Nilai 5px boleh diubah. Nilai ini menentukan jarak dari bawah dan jarak dari kanan.
ii.) Masukkan kod iklan Nuffnang yang diambil dari step 1. (pastikan kod adalah untuk Skyscraper)


UPDATE: Jika anda hendak kod bersama tulisan kelip² "aik, takkan tengok je" kodnya adalah seperti dibawah.


Ai, takkan tengok je.:)Letak Kod Nuffnang Sini

3. Save, kemudian lihat kesannya dalam blog anda.:)

Bagaimana, senang bukan..:)

Contoh scrolling image adalah berikut.





Pergerakan setiap gambar dapat diubah samada dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat dikawal.


Contoh kod bagi scrolling image adalah seperti berikut.

left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


link untuk dibuka" target="_blank">url gambar" />
link untuk dibuka" target="_blank">url gambar" />


Penerangan:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahagian gambar
2. Kod-kod ini dapat digunakan di dalam post entri ataupun pada bahagian gadget
Tutorial untuk menjadikan blog anda juga mempunyai link berwarna-warni adalah seperti berikut.




1.) Copy code di bawah ini.




2) Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget
Bagaimana Letak Kod HTML pada blog


3) Cari HTML/javascript. Kemudian apabila sudah buka, paste code kat situ.
Bagaimana Letak Kod HTML pada blog


4) Siap dan save. Itu sahaja. Senang bukan.:)


Apabila upload gambar menggunakan kaedah yang telah tersedia oleh blogger.com, secara default gambar tersebut akan dibuka pada page yang sama.

Ada ketikanya ianya bagus apabila merujuk kepada blog yang sama, tetapi kurang bagus apabila seorang blogger hendak merujuk kepada tempat lain. ini kerana apabila buka pada page yang sama, pengunjung terpaksa menekan button back untuk kembali kepada blog asal.

Tutorial ini akan menerangkan bagaimana untuk menjadikan gambar yang mempunyai link akan dibuka pada tab yang baru apabila diklik.

Perhatikan kedua-dua gambar ini, sila klik pada keduanya.

1)Gambar 1

Buka Link Baru Apabila Klik Pada Gambar


2)Gambar 2

Buka Link Baru Apabila Klik Pada Gambar


Gambar pertama tidak memberi kesan apa², tetapi gambar kedua membawa anda ke yahoo.com .(memang sengaja di'link'kan kepada yahoo).

Jangan terkejut jika tutorial ini sangat mudah.:)


Sebagai contoh, untuk kod gambar kedua adalah seperti ini

  • Untuk gambar kedua, link akan dibuka pada tab baru. Jika anda ingin link dibuka pada page yang sama, buang target="_blank"
  • Kaedah lain untuk buka link dalam page yang sama boleh guna terus aplikasi upload gambar dan letak link yang ada masa buat new post.:)

Anda letak background ke, ubah colour ke, letak fungsi 'read more' atau pape, kebanyakkannya adalah di template.

Oleh itu adalah perlu untuk seseorang blogger akan backup dahulu template blog sebelum melakukan sebarang pengubahsuaian ataupun sebelum menukar template baru.

Tujuan backup template adalah untuk backup jika sebarang perubahan kod yang diaplikasikan tidak menjadi.

Tutorial untuk backup template bagi blog adalah seperti berikut.


1)Login seperti biasa. Kemudian dari dashboard klik layout

Tutorial Backup Template Blog


2) Dari layout, klik edit html dan dibawah sedikit anda akan jumpa 'download full template'

Tutorial Backup Template Blog


3)Keluar paparan, klik save..Siap.:)

Tutorial Backup Template Blog


Tips: anda boleh rename template yang anda download dengan tarikh anda download. seperti 29julai2009.xml. Ini untuk memudahkan anda kenalpasti tarikh anda buat backup untuk template blog anda.:)
Tutorial Backup Template Blog


Tutorial untuk hilangkan navbar adalah seperti berikut. 
Terdapat 2 cara, anda boleh pilih mana yang bersesuaian dengan blog anda.

CARA 1:

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find ( ctrl + F), cari 'navbar'
(hasil cari biasanya samada navbar-iframe atau navbar sahaja)

3. Dari kod yang ada di bawah navbar,
Tukarkan 'display:block' kepada 'display:none'

contoh:



4. Save dan lihat hasilnya.


CARA 2:

Nota: Cara kedua digunakan jika anda tidak mempunyai 'navbar' dalam 'edit HTML' blog anda.

1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi find ( ctrl + F), cari kod body {


3. Copy dan paste code berikut SEBELUM code body {
#navbar-iframe {
display: none ;
}

contoh:



4. Save dan lihat hasilnya.:)

Tutorial di bawah.

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.
(tidak faham.?)


3. Save dan lihat hasilnya. TAMBAHAN. i) Bagi sesiapa yang tukar warna objek tersebut, boleh tukar pada kod ini. (mencari kod warna.?)
var xCol = "#FF0000"; var yCol = "#FFFF00"; var zCol = "#0000FF";
ii) Kod ini memerlukan anda menggunakan layout template.
Step 1

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste code di bawah ke dalam ruangan HTML/javascript dan ubah seperti yang dinyatakan dalam nota di bawah.




Penting !!!

 * Sila LETAK URL PAGE FB anda pada URL PAGE dalam coding kat atas tu. Seperti gambar di bawah:

 * Nak cari ID PAGE ?  , sila bukak page fb anda tu, pastu amik nombor je pada URL page blog anda. Sila tengok gambar di bawah:
amik nombor seperti yang diwarnakan je.


Step 2

Preview dulu, kalo sempurna klik save.
Step 1
  • Pertama sekali, korang mesti ade page (fan page) blog memasing kat FB. 
  • Kalau belum ade, korang kene create dulu. Klik link kat ni fan page blog Bingkisan Hati (kalo suke klik like, takde paksaan). Pastu scroll sampai bawah dan akan jumpe ni (footer FB). 
  • Then, klik 'create a page' kat footer tu.




Step 2
  • Pilih 'Artist, Band or Public Figure' dan isikan soalan yang diberikan. Pastu, klik 'get started' .
  • Then, upload profile picture untuk fan page korang. Seterusnya, 'get fans' dan 'basic info'. 
  • Edit maklumat page korang dan fan page blog korang da ciap... 
  • kat fan page tu, scroll bawah sikit sampai jumpe no.5, seperti kat bawah ni :



  • pastu akan keluar camni




STEP 3
  • Pada kotak Facebook Page URL, isikan dengan URL fanpage korang. Untuk dapatkan URL tu, buka fanpage yang korang da buat tadi dan amik URL (highlighted)  *seperti dalam gambar bawah ni*



  • Apabila URL yang sebenar dimasukkan. Korang punya fan page facebook akan bertukar nama kepada nama fan page blog korang. 
  • width, color scheme, show faces, border color, stream dan header, sila adjust mengikut kesukaan korang.

“width”=lebar box fan page

“color sheme”=warna box fan page

“show faces”=akan memaparkan jumlah pemilik fb yang like di depan box fan page

“show stream”= nak tunjukkan aktiviti latest dalam fan page atau tidak.

“show header”=nak tunjukkan header “Find us on facebook” atau tidak.
  • Segala apa yang korang adjust akan di preview di kotak sebelah tu.
  • Sila klik “Get Code“, kalau da puas hati.



Step 4
Code akan keluar (seperti dalam gambar) apabila 'Get Code' diklik.

  • Anak panah yang berwarna biru tu, pilih 'iframe'.
  • Pastu korang pergi pada blogger dashboard>design>page element>add a gadget> HTML/Javascript ,copy code didalam ruangan tu.
  • Save dan preview blog.