SlideShare a Scribd company logo
1 of 78
Download to read offline
PANDUAN LENGKAP
MEMBUAT BLOG


                          ZULKIFLY AB HAMID
                          FT 17
                          SMK.TAMAN SEJESA JAYA 2,
                          JALAN SILAT HARIMAU 33,
                          BANDAR SELESA JAYA,81300,SKUDAI,JOHOR
HASIL KERJA OLEH BLOGGER:

esoftwaresource.blogspot.com

tutorialuntukblog.blogspot.com

   teknikbuatblog.blogspot.com

          sembangkomputer.com
ISI KANDUNGAN
BAB 1: Buat Blog Percuma Dengan Blogspot ................................................................................................ 3
BAB 2 :Post Entri Dalam Blog ...................................................................................................................... 10
BAB 3:Upload Gambar Dalam Blog ............................................................................................................. 12
BAB 4 :Upload Video Dalam Blog ................................................................................................................ 15
BAB 5 : Letak Video Dari Youtube Dalam Blog ............................................................................................ 17
BAB 6: Bagaimana Letak Kod HTML/javascript ........................................................................................... 19
BAB 7: Setting Asas Yang Perlu Diketahui Oleh Blogger ............................................................................. 21
BAB 8 : Backup Template Blog .................................................................................................................... 25
BAB 9 : Website untuk download template blog........................................................................................ 28
BAB 10 : Tukar template blog ..................................................................................................................... 30
BAB 11: Buka Link Baru Apabila Klik Pada Gambar..................................................................................... 32
BAB 12 : Ketahui Komen Pada Entri Melalui Email ..................................................................................... 34
BAB 13 : Link Dalam Blog Warna-Warni ( Rainbow Link ) ........................................................................... 36
BAB 14: Cara Buat Gambar Bergerak (Scrolling Image) .............................................................................. 37
BAB 15 : Image Magnify .............................................................................................................................. 38
BAB 16 : Disable Right Click......................................................................................................................... 40
BAB 17 : Background Dalam Sesebuah Entri .............................................................................................. 42
BAB 18 : Letak Icon Pada URL Blog ............................................................................................................. 43
BAB 19 : Daftar dan letak ............................................................................................................................ 48
shoutbox pada blog..................................................................................................................................... 48
BAB 20 : Cara Buat Read More pada blog................................................................................................... 51
BAB 21 : Letak Signature Dalam Blog .......................................................................................................... 54
BAB 22 : Letak Website Lain Dalam Blog .................................................................................................... 57
BAB 23 : Cara Letak Linkwithin Dalam Blog ................................................................................................ 60
BAB 24 : Tukar Ayat Asal Linkwithin ........................................................................................................... 63
BAB 25 : Ketahui Bilangan Pengunjung Online Dalam Blog ........................................................................ 65
BAB 26 :Ubah Lebar Ruangan Komen ......................................................................................................... 66
BAB 27 : Cara Buat Dropdown Menu .......................................................................................................... 68
BAB 28 : Letak Website Lain Dalam Entri.................................................................................................... 69
BAB 29 : Membuat teks bergerak seperti kiosk .......................................................................................... 71
BAB 30 : Jadikan video dari youtube sebagai mp3 ..................................................................................... 74
BAB 31 : Letak Facebook Share Button dalam Blog .................................................................................... 75
BAB 32: Membuat title bergerak ................................................................................................................ 77
-TAMAT- ........................................................................................................................................................ 77
BAB 1: Buat Blog Percuma Dengan Blogspot
Daftar di Blogspot

Untuk menggunakan Blogspot, anda haruslah mempunyai satu akaun Google terlebih dahulu
(contohnya Gmail). Jika anda mempunyai akaun Google, anda boleh terus sign in pada laman
web Blogspot.
Jika tidak, anda perlu terlebih dahulu, mendaftar di Blogspot. Pergi ke laman web Blogspot dan
klik pada butang “Create Your Blog Now“. Kemudian, ikuti 3 langkah mudah berikut:

   1. Buat satu akaun Google. Isikan borang yang diberi dengan maklumat-maklumat yang
       berkenaan. Setelah siap, tekan butang “Continue”.




       Namakan blog anda. Berikan nama bagi blog anda. Jangan risau kerana nama ini boleh
       diubah di kemudian hari jika anda mahu. Apa yang penting adalah tentukan alamat URL
       bagi blog tersebut. Alamat inilah yang akan ditaip pada Internet Explorer untuk pergi ke
       blog anda. Alamat URL ini akan kekal, dan tak boleh diubah lagi selepas ini.
2. Pilih template. Pilih mana-mana template, iaitu rupa bagi blog anda. Template ini juga
   boleh diubah pada bila-bila masa.




3. Setelah ketiga-tiga langkah tersebut berjaya, mesej seperti di bawah ini akan dipaparkan,
   menandakan blog anda telah berjaya dibina:
Paparan dashboard lama vs. dashboard baru dalam Blogspot.com

Terdapat 2 paparan ruangan dashboard bagi Blogspot iaitu paparan dashboard lama dan paparan
dashboard yang baru.Anda bebas memilih untuk menggunakan fungsi dashboard lama atau baru
mengikut keselesaan anda.Jika anda ingin menggunakan paparan dashboard yang baru, anda
boleh ikuti langkah mudah di bawah.

1. Sign in menggunakan emel anda di www.blogger.com .

2. Klik pada Try the updated Blogger interface. Lihat gambar di bawah.




3. Selesai. Anda akan melihat paparan dashboard yang baru. Anda boleh membiasakan diri
dengan paparan yang baru ini dan mencuba setiap butang yang disediakan.
4. Jika anda ingin kembali ke paparan yang lama, mudah sahaja. Klik pada butang Blogger
options dan pilih Old Blogger Interface. Anda akan di bawa ke paparan dashboard blogspot
yang lama.
Mulakan Menulis

Kini blog anda telah sedia dibina. Anda boleh mula menulis entri baru di bahagian “Posting >
Create”.




Sekarang, tulislah apa sahaja yang anda mahu. Setelah selesai, klik pada “Publish post” dan entri
tersebut akan dipaparkan pada blog anda.




Berikut adalah contoh blog yang dihasilkan. Mudahkan?
Ubahsuai Rupa Blog Anda
Dalam Blogspot, bahagian sidebar biasanya digunakan untuk meletakkan profil anda, arkib, link
ke blog atau laman web lain, dan sebagainya. Untuk mengubahsuai bahagian sidebar ini, pergi
kepada “Layout > Page Elements”




  Klik pada “Add a Page Element” untuk menambahkan elemen baru pada sidebar anda. Klik
 “Edit” pada mana-mana elemen untuk mengubahsuai bahagian tersebut. Setelah siap, klik pada
                    butang “Save” dan ia akan dipaparkan pada blog anda.
Contoh sidebar yang dihasilkan:
BAB 2 :Post Entri Dalam Blog

Post entri dalam blog merupakan perkara yang paling asas bagi seorang blogger.
Dalam entri anda akan menaip apa yang anda mahu sampaikan sama ada luahan rasa,
perkongsian, info dan apa-apa sahaja yang anda mahu.
Berikut adalah cara bagaimana anda hendak memulakan langkah untuk menaip dalam blog anda.



1. Buka linkwww.blogger.com (link ini diperlukan setiap kali anda hendak login kepada akaun
blogger). Masukkan email dan password anda.




2. Pada paparan muka depan, klik pada 'new post'




3. Masukkan tajuk untuk entri anda dan juga isi kandungan entri anda.(biasa bab ini mengambil
masa untuk menaip entri).
Kemudian apabila sudah siap, klik pada button 'publish'




4. Apabila sudah tekan button publish, siap untuk sebuah entri dalam blog anda.:)




      jika anda hendak tengok 'rupa' entri anda itu, klik pada 'view post'
      jika anda rasa masih ada kekurangan dan hendak edit, klik pada 'edit post'
      jika anda hendak menaip entri baru, klik pada 'create a new post' (anda juga boleh
       mulakan dari awal dengan klik pada 'dashboard' pada bahagian atas-kanan)
BAB 3:Upload Gambar Dalam Blog

Meletakkan gambar dalam sesebuah entri dalam sesebuah blog dapat 'merancakkan' lagi
kandungan sesebuah entri.

Kebiasaannya gambar yang diletakkan adalah berkaitan dengan entri yang ditaip.
dan adalah biasa pengunjung sesebuah blog suka membaca entri sesebuah blog yang juga
mempunyai gambar walaupun sekeping.:)


Tutorial untuk upload gambar dalam blog adalah seperti berikut.


1.Login seperti biasa, klik pada 'new post'




2.Pada paparan, klik pada icon upload picture seperti yang ditunjukkan dibawah.
-Kedudukan berbeza bagi keadaan 'html' dan juga 'compose' tetapi simbolnya tetap sama.




ATAU
3.Klik 'browse'.




4.Pilih gambar yang anda hendak letakkan dari komputer anda.




4.1. Jika hendak letak lebih daripada satu gambar pada satu masa(maksimum 5), klik pada 'add
more image'.




5.Pilih kedudukan dan size yang anda mahu untuk gambar tersebut, kemudian klik 'upload'.
6. Tunggu sehingga gambar siap diupload kemudian klik 'done'




Nota: Jika anda hendak upload lebih daripada 5 gambar, cuma ulang semula langkah 1
hingga 5.
BAB 4 :Upload Video Dalam Blog

Selain gambar, video juga memainkan peranan yang penting untuk seseorang blogger untuk
mempelbagaikan kandungan entri dalam blog.

Video boleh merangkumi samada aktiviti peribadi, video klik lagu kegemaran, video klip
percutian, tutorial dan apa sahaja yang dilihat lebih memudahkan untuk disampaikan kepada
pengunjung ataupun untuk tatapan pemilik blog sahaja.




Untuk mengupload video menggunakan kaedah yang tersedia untuk blogger adalah seperti
berikut.

1. Login ke dalam akaun blogger anda, kemudian klik pada new post.




2. Pada paparan yang muncul, klik pada icon video seperti yang ditunjukkan.
3. Langkah seterusnya, browse video yang hendak diupload, masukkan title dan juga tick pada
ruangan seperti yang ditunjukkan. Kemudian klik pada upload video




4. Untuk sesebuah video, masa diperlukan untuk memproses video tersebut sehingga dapat
dipublishkan. Bergantung kepada saiz video.



Anda boleh save dahulu hasil kerja anda dan kembali selepas beberapa ketika untuk pastikan sama ada video
tersebut sudah boleh dimainkan atau tidak.
BAB 5 : Letak Video Dari Youtube Dalam Blog

Youtube, sebuah laman web yang tidak perlu diperkenalkan lagi kepada pelayar maya. Laman
web yang mempunyai begitu banyak video dan menjadi rujukan kepada sesiapa sahaja untuk
mencari video tidak kira untuk hiburan, pelajaran, berkongsi pengalam dan sebagainya.




Youtube juga menjadi platform bagi seseorang blogger untuk berkongsi sesebuah video kepada
pengunjung blog mereka.

Tutorial ini akan menerangkan bagaimana untuk meletakkan video yang terdapat dalam youtube
ke dalam blog.

1.Login akaun blogger anda, kemudian klik pada new post.




2.Buka video dari youtube yang anda hendak post, kemudian lihat sebelah kanan untuk ruangan
embed.




3. Klik customize untuk melakukan sedikit ubahan pada video anda. Anda boleh pilih option
yang ada seperti border dan juga saiz video yang hendak dipaparkan.
4.Setelah selesai,copy code dari bahagian embed dan paste dalam ruangan blog anda.(klik
preview untuk tengok keadaan video anda)




5. Selesai.
BAB 6: Bagaimana Letak Kod HTML/javascript

Apabila memasuki dunia blogging, antara perkara yang tidak dapat dielakkan adalah untuk
menghias blog sendiri. Terdapat beberapa cara untuk menghias blog samada menukar template,
memasang widget yang telah disediakan oleh blogger.com ataupun meletakkan sumber² lain dari
luar yang biasanya melibatkan kod html/javascript.Selain untuk menghias blog, kod
html/javascript juga mempunyai fungsi² lain bergantung kepada tujuan apa kod itu dihasilkan.

Penambahan yang ingin dilakukan biasanya akan melalui perkara yang sama iaitu kod yang
diperolehi perlu di 'paste'kan di ruangan html/java script.


Tutorial ini akan menunjukkan bagaimana hendak meletakkan kod html/javascript bagi sesebuah
blog.



1) Login ke dalam blog anda seperti biasa. Kemudian dari 'dashboard', klik 'Design'
UPDATE: untuk template terbaru, klik pada DESIGN




2)Setelah anda klik 'design', dia akan auto masuk bahagian 'page element'. Kemudian pada 'page
element' anda itu, klik pada 'add a gadget'
3)Selepas itu anda akan lihat banyak senarai yang ada, cari "HTML/javascript", kemudian klik
pada "+"




4)Satu   paparan kosong akan dibuka, kemudian paste code yang anda mahu letak dalam blog ke
dalam ruangan kosong. kemudian tekan "save"




5)Siap. Anda boleh lihat hasilnya dengan klik preview. Anda juga boleh mengubah kedudukan
code itu dengan hanya drag pada mana² kawasan page element itu.Apabila anda sudah puas
hati, klik 'save' untuk kekalkan kedudukan.
BAB 7: Setting Asas Yang Perlu Diketahui Oleh Blogger

Bagi sesebuah blog, setting merupakan antara perkara penting untuk menentukan bagaimana
paparan, dan perlakuan-perlakuan lain yang berkaitan dengan blog.

Antara perkara yang berkaitan dengan setting bagi sesebuah blog adalah tajuk blog, berapa
bilangan entri, siapa yang boleh komen, dan lain² yang akan diterangkan di bawah.

Paparan untuk setting bagi sesebuah blog adalah seperti berikut.




Untuk entri ini, setting merangkumi basic, formatting dan publishing. Ini kerana 3 perkara ini
boleh dianggap bahagian setting yang paling utama bagi sesebuah blog. Beberapa setting asas
yang perlu diketahui oleh seorang blogger adalah seperti berikut.

BASIC:




Title : Title akan ditunjukkan pada bahagian atas browser apabila sesebuah blog dibuka.



Description : Berkaitan dengan apa kandungan sesebuah blog. Boleh dimasukkan sehingga 500
huruf. Contoh tutorial blog, tutorial blog dalam bahasa melayu, tutorial untuk semua dan lain²
yang berkaitan. Kalau blog peribadi hampir boleh diabaikan ataupun letak sahaja seperti
perjalanan hidupku, inilah kisah aku dan lain².
FORMATTING




Show : bilangan entri untuk paparan muka depan. jangan terlalu banyak. Biasanya antara 5
hingga 10 untuk mempercepatkan loading keseluruhan blog.

Date header format : Kurang penting, boleh pilih mana yang dirasakan sesuai.

Archive index date format : Format yang akan ditunjukkan untuk apa yang ditaip dalam sesebuah
blog dalam jangka sebulan

Timestamp format : Kurang penting, boleh pilih mana yang dirasakan sesuai.

Time zone : Penting untuk pastikan kedudukan untuk masa adalah betul. Jika yang berada dalam
negara Malaysia, sila pilih (GMT +8.00) Kuala Lumpur. Jika berada ditempat lain boleh pilih
yang yang sepatutnya.

Language : English (Boleh juga pilih malay, tetapi dicadangkan english untuk memudahkan
memandangkan kebanyakan sudah biasa dengan perkataan² english dalam dunia blogging)
COMMENTS




Comments : Show - Jika ada pengunjung yang menghantar komen, komen akan dipaparkan
dibawah entri.

Who can comments : Bahagian ini bergantung kepada pemilik blog. Kalau pilih anyone, sesiapa
sahaja boleh komen. Kalau pilih registered user, hanya orang yang mempunyai blog/id lain yang
boleh komen.

Comment form placement : Kedudukan ruangan komen untuk sesebuah entri. Kebiasaan blogger
akan pilih samada pop-up window atau embedded below post. Walau bagaimanapun, tidak
semua template boleh gunakan embeded below post.
Comment moderation : Bergantung kepada pemilik blog. Jika mahu komen pengunjung terus
dipaparkan,pilih never. Tetapi jika mahu komen dari pengunjung 'ditapis' dahulu oleh pemilik
blog, pilih always.

Show word verification for comment : Pilih No. Kerana kehadiran word verificationbiasanya
akan menyusahan pengunjung. Kecuali untuk kes² tertentu jika terlalu banyak spam (di Malaysia
perkara ni jarang berlaku)
BAB 8 : Backup Template Blog

Template bagi sesebuah blog boleh diibaratkan sebagai tulang belakang blog kerana template
yang menyimpan semua maklumat berkaitan rupa bentuk blog anda, fungsi blog dan juga
kebanyakan trick untuk sesebuah blog akan dilakukan di template (edit html).




Sama ada anda letak background , ubah colour, letak fungsi 'read more' atau apa-apa sahaja,
kebanyakannya 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




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




3)Keluar paparan, klik save..Siap.:)
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.:)
BAB 9 : Website untuk download template blog
Sebelum menukar template sesebuah blog, perkara yang diperlukan adalah template yang hendak
ditukar. Seseorang pemilik blog mesti mengetahu template bagaimana yang hendak digunakan
untuk blognya.


Jika anda seorang pemilik blog dan masih belum lagi mempunyai template yang hendak
digunakan, anda boleh mendapatkan pelbagai jenis template secara percuma dan pelbagai jenis
yang dirasakan sesuai untuk blog anda.




Template sesebuah blog adalah dalam format .xml (oleh itu pastikan jika anda download file
dalam bentuk zip/rar, anda extract dahulu file tersebut.)




Berikut adalah antara laman web yang menyediakan pelbagai jenis template untuk blogger secara
percuma.

http://btemplates.com/




http://www.ourblogtemplates.com/
http://www.deluxetemplates.net/




http://blogtemplate4u.com/




http://www.bloggertemplatesfree.com/




http://www.btheme.info/




http://www.blogspottemplate.com/




http://www.freebloggertemplate.org/




http://www.bloggertemplateplace.com/
BAB 10 : Tukar template blog

Menukar template blog dapat mengubah rupa blog asal kepada paparan yang lebih menarik.
Adalah biasa bagi seseorang pemilik blog inginkan blognya tampil menarik berbanding template
asal.




Tutorial ini akan menerangkan dengan ringkas cara-cara untuk menukar template sesebuah blog.

Sebelum menukar template blog, pastikan anda sudah mempunyai template yang dikehendaki.
Jika anda masih belum lagi mempunyai template, sila rujuk kepada entri ini.
website untuk mencari template blog.

Berikut adalah langkah-langkah untuk menukar template blog.

1. Login akaun kemudian daripada dashboard klik layout > edit html




2. Baca penerangan berdasarkan gambar di bawah.
1. Klik browse
       2. Pilih template yang anda telah download
       3. Klik open
       4. Klik upload

3. Apabila klik upload, paparan berikut akan keluar, klik pada 'keep widget'




4. Setelah selesai anda boleh view blog anda.
BAB 11: Buka Link Baru Apabila Klik Pada Gambar

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

Ada ketikanya ia 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 di klik.

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

1)Gambar 1




2)Gambar 2




Gambar pertama tidak memberi kesan apa², tetapi gambar kedua membawa anda ke yahoo.com
.(tekan butang ctrl pada keybord dan klik pada imej.Anda akan dibawa ke yahoo).



<a href="Letakkan link untuk dibuka disini" target="_blank" >
<imgsrc="Letakkan url gambar disini"/></a>
Sebagai contoh, untuk kod gambar kedua adalah seperti ini

<a href="http://www.yahoo.com" target="_blank" >
<img src="http://www.google.com.my/intl/en_com/images/logo_plain.png"/></a>




       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.
BAB 12 : Ketahui Komen Pada Entri Melalui Email

Mengetahui siapa yang komen pada sesebuah entri adalah penting bagi seseorang blogger sama
ada untuk mengetahui respond daripada pengunjung ataupun memberi maklum balas jika ada
perkara yang ditanya oleh pengunjung kepada pemilik.

Contohnya begini. Anda ada blog kan. dan sudah tentu anda ada entri yang banyak dalam blog
anda. Katakan anda ada entri bertarikh 12 Februari 2009, bagaimana anda hendak tahu jika ada
orang komen pada entri tersebut pada hari ini.? Takkan anda hendak periksa semua entri anda
untuk pastikan sama ada komen baru atau tidak. Bukankah itu menyusahkan dan begitu
membuang masa.:)

Oleh itu, terdapat cara mudah untuk para blogger untuk ketahui sama ada entri anda baru sahaja
dikomen oleh seseorang.Dan anda akan dapat tahu melalui email.

1)Login akaun anda, dan dari dashboard, klik pada setting




2)Selepas itu klik pada comments




3)Apabila paparan sudah dibuka, scroll sampai bawah sehingga anda jumpa 'comment
notification email'. Masukkan email anda. anda juga boleh masukkan lebih dari satu email,
kemudian save.
Apabila ada seseorang yang komen pada entri anda, contoh yang keluar pada email yahoo adalah
seperti berikut.,




Jadi, senang untuk anda ketahui bila dan entri apakah yang mempunyai komen terbaru.
BAB 13 : Link Dalam Blog Warna-Warni ( Rainbow Link )

Rainbow link merupakan salah satu trick yang diaplikasikan kepada link yang ada dalam
sesebuah blog. asalkan cursor mouse dilalukan pada sesuatu link, link tersebut akan berubah
menjadi warna-warni dengan warna yang tertentu.

Tutorial untuk menjadikan blog anda juga mempunyai link berwarna-warni adalah seperti
berikut.

1.) Copy code di bawah ini.

<script src="https://sites.google.com/site/unwanted86/javascript/rainbowlink.js" type="text/javascript">
</script>



2) Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget




3) Cari HTML/javascript. Kemudian apabila sudah buka, paste code kat situ.




4) Siap dan save.
BAB 14: Cara Buat Gambar Bergerak (Scrolling Image)

Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan
gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang
mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada
blogger lain.

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.


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




<a href="link untuk dibuka" target="_blank"><imgsrc="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><imgsrc="url gambar" /></a>


</marquee>


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
BAB 15 : Image Magnify

Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost
dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah²
yang melihat gambar yang lain.

Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image Magnify - Test
Mode




Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada
untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang
menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan.

Berikut adalah tutorial untuk image magnify ini.


1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )
Jika masih tidak jelas lagi, klik sini.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


<script src="
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">
/***********************************************
* Kod telah di'edit' oleh unwanted
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
* -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
***********************************************/
</script>



2) Apabila sudah letak code tu, save sahaja seperti biasa..

Siap untuk bahagian letakkan kod asas..

Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak
post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat
kesan tersebut pada gambar.)



<imgsrc="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor:
url(magnify.cur), -moz-zoom-in; " />



Keterangan :

           url gambar disini : Masukkan url gambar.
           2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan
            membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5
           200 : Masukkan lebar gambar yang anda rasakan bersesuaian
           150 : Masukkan tinggi gambar yang anda rasakan bersesuaian
BAB 16 : Disable Right Click

Adakah anda tidak suka orang lain mengambil apa sahaja kandungan dalam blog anda.?
Dan pada masa yang sama anda tidak suka dengan kod² yang berserabut yang perlu di edit dalam
'edit html'. Kini ada cara mudah untuk realisasikan hasrat anda.:)

Kenapa Perlu Disable Right Click.?
Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk megelakkan orang
lain mengambil apa yang ada dalam blog mereka. Samada tidak senang ayat mereka ditiru bulat²
(copy paste), ataupun untuk mengelakkan bandwidth habis digunakan. Kebiasaan alasan yang
aku selalu baca adalah kerana ada orang yang copy entri mereka bulat².

Berikut adalah contoh msg yang akan keluar apabila anda aktifkan disable right click




Berikut adalah cara yang mudah untuk menggunakan fungsi ini.


1. Copy kod ini.


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



2. Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Layout>Add a Page element >html/javascript. Kalau masih kurang jelas, klik sini.




Apabila sudah siap, save dan lihat kesannya pada blog anda.
BAB 17 : Background Dalam Sesebuah Entri

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

<div style="background:url(Link gambar disini) no-repeat;">
Taip segala entri untuk blog anda disini.
</div>



- 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 </div>


Itu sahaja.
Apabila anda post anda akan lihat kesannya.


p/s:
-pastikan anda pilih background yang bersesuaian agar pengunjung blog anda tidak pening
membaca.
BAB 18 : Letak Icon Pada URL Blog

Mempunyai icon di sebelah url sesebuah blog dapat menunjukkan treadmark sesebuah blog.
Pengunjung tetap juga biasanya akan dapat mengingati icon yang unik berbanding icon blogger
yang biasa dilihat.

Ini kerana, default untuk icon bagi sesebuah blog adalah icon blogger yang berwarna jingga. Dan
kini anda berpeluang untuk mengubahnya mengikut kesukaan anda dengan mengaplikasikan
beberapa langkah di bawah.

                                Jika sebelum ini iconnya begini.




                            Apa kata kalau tukar menjadi seperti ini.




                                         ataupun lain².:)




Sila pastikan anda mengikuti langkah yang diberi satu-persatu untuk memastikan
semuanya berjalan lancar.:).


1) Cari Icon Kesukaan Anda.
Sebagai permulaan, pastikan anda mempunyai icon untuk dijadikan icon untuk blog anda.
Jika yang sudah ada, tiada masalah.
Jika masih mencari² icon yang sesuai, boleh juga lihat² dalam web berikut

http://www.freeiconsweb.com/index.html
http://www.gifanimations.com/
Atau jika masih tidak berkenan, cari dalam google.

untuk icon ini, biasanya file gambar adalah format gif, jpg, jpeg, png. Anda boleh cari samada
gambar yang static atau animated. Biasanya size (pixel) icon adalah 32x32 atau 34x34 atau
128x128. Untuk tutorial ini, jangan ambil file yang jenis .ico



Katakanlah, sudah ada icon, dan icon yang suka adalah ini.

2) Upload icon anda ke imageshack.us
Langkah seterusnya anda perlu uplaodkan gambar anda. Boleh gunakan apa² web
hosting,imageshack atau photobucket atau lain². Tapi aku cadangkan imageshack sbb tak
perlukan pendaftaran untuk upload.




Selepas upload sila pastikan anda ada direct link untuk gambar anda untuk dimasukkan dalam
kod nanti.




Langkah seterusnya,adalah untuk letakkan code ke dalam blog anda. Oleh itu, pastikan
anda login dahulu ke blog anda.

Langkah²nya adalah seperti berikut.
1)Dari dashboard blog, klik pada layout




2)Klik pada 'edit html' kemudian tick pada 'expand widget templates'




3)Seterusnya, anda hendaklah backup dahulu template anda dengan klik pada 'download
full template'. Jika masih tidak faham bagaimana dan kenapa hendak buat backup ni, sila
rujuk sinibackup template blog.
4)Daripada paparan skrin anda, klik edit, kemudian find. Dalam bahagian kotak dibawah,
taipkan < /head>
5)Buka link dibawah untuk lihat code, selepas itu copy code yang diberi kemudian paste
sebelum < /head>, selepas itu, gantikan dengan direct link icon anda dari imageshack yang
anda upload.
Seterusnya klik preview untuk lihat icon anda menjadi atau tidak, kalau menjadi, apa lagi,
SAVE..:)
BAB 19 : Daftar dan letak


shoutbox pada blog

Meletakkan sesebuah shoutbox dalam menggalakkan interaksi antara pemilik blog dengan
pengunjung sesebuah blog. Interaksi ini mudah kerana ianya tidak melibatkan komen pad aentri,
tetapi pesanan yang ditinggalkan pada gadjetshoutbox yang di'pasang' oleh pemilik blog.




Terdapat pelbagai jenis shoutbox yang ada untuk diletakkan dalam sesebuah blog. Antara yang
dicadangkan untuk diletakkan dalam sesebuah blog adalah shoutbox daripada shoutmix.com.

Tutorial ringkas ini akan menerangkan cara untuk mendaftar shoutmix, dapatkan kod html dan
letakkan pada blog.

1. Buka www.shoutmix.com

2. Klik pada create shoutbox




3. Masukkan maklumat yang dikehendaki.(maklumat akan dihantar ke email untuk simpanan)
4. Masukkan setting yang berkaitan. Biasanya melibatkan style & color dan date & time.




5. Setelah selesai memasukkan setting yang dikehendaki dalam langkah 4,klik pada 'get codes'




6. Masukkan lebar dan tinggi yang dikehendaki didalam blog anda. Kemudian copy code
berkenaan.
7. Setelah copy code, paste pada html/javascript dalam blog anda ( Dashboard>layout>add a
gadget>html/javascript)
-Jika masih tidak faham dimana perlu paste code, sila rujuk disini.


Nota: setting untuk shoutbox boleh diubah bila-bila masa dengan login kembali ke dalam akaun
shoutmix.
-----------
Contoh shoutbox yang diletakkan dalam blog.
BAB 20 : Cara Buat Read More pada blog

Mempunyai fungsi 'read more' adalah antara perkara yang perlu diaplikasikan pada sesebuah
blog. Ini kerana rata-rata pemilik blog akan menaip entri yang boleh dikategorikan sebagai
'panjang'. Dengan mempunyai fungsi read more, keseluruhan entri dapat diringkaskan supaya
ianya lebih memudahkan.




Berikut merupakan langkah yang perlu dilakukan untuk menggunakan fungsi 'read more' pada
blog.


1. Login, daripada dashboard klik layout > edit html.




2. Pastikan anda backup template dahulu dengan klik 'Download Full Template' kemudian klik
pada 'expand widget templates'.

3. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian taip
<data:post.body/>
4. Letakkan kod ini di atas <data:post.body/>


<b:ifcond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>



5. Kemudian letakkan kod ini di bawah <data:post.body/>



<b:ifcond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>



Nota: kod anda sepatutnya kelihatan seperti ini.
6. Selepas selesai letak code, Save Template.

7. Kemudian, daripada paparan dashboard, klik pada Setting > Formatting kemudian scroll ke
bawah sehingga jumpa Post Template.

8. Copy code berikut ke dalam Post Template


<span class="fullpost">
</span>


9. Save Setting

10. Pergi kepada paparan untuk post entri, dalam ruangan post entri klik pada 'edit html' dan
akan anda jumpa code tadi. Kandungan yang ingin diletakkan dalam ruanagn read more perlu
terletak antara <span class="fullpost"> dan </span>




11. Apabila siap menaip, klik publish..
BAB 21 : Letak Signature Dalam Blog

Mempunyai signature dapat menambahkan lagi trademark bagi seseorang blogger. Signature
terletak pada bahagian akhir untuk sesuatu entri yang di post oleh blogger.




Signature boleh jadi apa sahaja sama ada 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.




Nota: pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this
signature'.
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/jC8qDqdmR7
8/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

<p><data:post.body/></p>
3. Copy code ini dan paste di bawah kod tadi.


<p><div align="left"><imgsrc="URL gambar/signature anda"/></div></p>


kod anda sepatutnya kelihatan seperti ini.(contoh)




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.
BAB 22 : Letak Website Lain Dalam Blog

Pernahkah anda terfikir untuk meletakkan satu ruangan website lain dalam blog anda.?
Seperti anda meletakkan website google, yahoo dan pelbagai lagi dalam blog anda.
Ini membolehkan pengunjung blog anda melayari web lain tanpa meninggalkan blog anda.




Meletakkan website dalam blog masih boleh dilakukan dengan hanya menggunakan kod
html/javascript

Klik disini untuk lihat demo website yang diletakkan dalam blog.

Berikut adalah langkah-langkah untuk tutorial ini.

1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget
2. selepas klik pada add a gadget, pilih HTML/javascript




3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript



<!--CHANGE LINKS BELOW TO YOUR OWN-->
<a href="javascript:jumpto('http://www.google.com')">Google</a> |
<a href="javascript:jumpto('http://www.yahoo.com')">Yahoo</a> |


<script language="javascript">
<!--




//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window
vardisplaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
variframecode='<iframe id="external" style="width:99%;height:400px" src="http://www.google.com"></iframe>'


/////NO NEED TO EDIT BELOW HERE////////////


if (displaymode==0)
document.write(iframecode)


function jumpto(inputurl){
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=inputurl
else if (document.all&&displaymode==0)
document.all.external.src=inputurl
else{
if (!window.win2||win2.closed)
win2=window.open(inputurl)
//else if win2 already exists
else{
win2.location=inputurl
win2.focus()
}
}
}
//-->
</script>




Penerangan :
-Google: Gantikan dengan nama yang anda mahu
-www.google.com: Gantikan dengan website yang anda mahu


4. Save, klik preview dan jika berpuas hari, klik save.
BAB 23 : Cara Letak Linkwithin Dalam Blog

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




4. Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik
add widget
5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)
BAB 24 : Tukar Ayat Asal Linkwithin

Bagi sesiapa yang menggunakan linkwithin pada blog, sememangnya akan muncul satu ayat
yang telah di'set'kan secara automatik semasa meletakkan gadget tersebut.

Bagi bahasa melayu, akan keluar ayat, "Anda mungkin juga meminati" dan bagi english "You
may also like these stories"..

Ini adalah yang biasa,




Dan ini pula yang agak kurang biasa.:)




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
3. Daripada kod yang dipaparkan, tambah kod ini dibahagian atasnya


<script>linkwithin_text='AYAT ANDA DISINI'</script>


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

Kod anda sepatutnya kelihatan seperti ini.




4. Selepas selesai, klik save untuk lihat kesannya..
BAB 25 : Ketahui Bilangan Pengunjung Online Dalam Blog

Berapakah bilangan pelawat yang berada dalam blog anda ketika ini.?Mungkin amat sukar untuk
anda menjangkakannya.Kalau anda mempunyai statistik blog, mungkin anda tahu mengikut hari
ataupun jam, tetapi anda tidak tahu berapa bilangan pengunjung dalam keadaan masa sebenar.

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




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.




4. Save, dan lihat hasilnya.
BAB 26 :Ubah Lebar Ruangan Komen

Mengubah lebar ruangan komen bagi sesebuah blog dapat memberi ruang yang lebih banyak
kepada pengunjung (yang suka komen panjang²) dan juga dapat membuatkan ruangan komen
kelihatan sama besar dengan ruangan entri.

Tutorial ini akan menunjukkan cara untuk melebarkan ruangan komen, dan tutorial ini hanya
untuk blog yang menggunakan embedded comment (komen yang terletak pada bahagian
bawah entri)
.
Sebelum




Selepas
Berikut adalah langkah-langkah yang diperlukan untuk mengubah lebar ruangan komen pada
blog.

1. Login akaun blogger anda, dari dashboard > layout > edit html, kemudian klik pada expand
widget templates.

2. Pda keyboard anda, klik ctrl + f untuk menghidupkan fungsi find kemudian cari kod berikut.

<iframeallowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor'
scrolling='no' src='' width='100%'/>



Penerangan : Tukar nilai 100% kepada nilai pixel untuk lebar yang anda kehendaki.
contoh, jika anda mahu lebar 500px, kodnya adalah

<iframeallowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor'
scrolling='no' src='' width='500px'/>



3. Save hasil kerja anda dan lihat hasilnya.
BAB 27 : Cara Buat Dropdown Menu

Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk
meletakkan pelbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link
kawan², link rujukan, link tips dan pelbagai lagi.
Contoh dropdown menu adalah seperti berikut :




Tutorial untuk membuat dropdown menu ini adalah seperti berikut.

1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget >
HTML/javascript

2. Copy code berikut ke dalam ruangan html/javascript. (jika tidak faham rujuk sini)


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


penerangan :
Link 1: Masukkan link untuk dibuka
Text 1: Masukkan perkataan/ayat untuk link

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

TAMBAHAN:
Untuk kod di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada
page/window yang berlainan, sila tukarkan kod:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">


kepada kod ini.
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
BAB 28 : Letak Website Lain Dalam Entri
Sebelum ini sudah terdapat tutorial yang menerangkan bagaimana untuk meletakkan website
dalam blog. Untuk tutorial tersebut memerlukan anda untuk copy paste code dalam ruangan
html/javascript. Tutorial tersebut sesuai untuk meletakkan website lain secara kekal di dalam
blog yang akan dilihat setiap masa walau page mana yang dibuka dalam blog tersebut.




Tutorial ini pula akan menunjukkan cara untuk meletakkan website lain dalam entri blog dengan
cara paling mudah..


1. Ketika sedang menaip sesuatu artikel, anda ingin memasukkan link sebagai rujukan pembaca.
Highlight pada ayat yang anda ingin kan,dan klik button link pada menu yang di atas.Contoh
seperti gambar di bawah.
2.Paparan berikut akan keluar,copy url yang ingin dimasukkan dan paste pada web address




3. Klik publish
BAB 29 : Membuat teks bergerak seperti kiosk




1.Pergi laman web http://www.textspace.net/lcd_text




                                      -Pilih salah satu-




    2. Tulis ayat yang diinginkan dan pilih apa yang anda mahukan pada font
 option,speed untuk kelajuan teks,frame width untuk lebar dan frame option,klik
                                  make my text
3. Hasilnya seperti diatas



4. Klik get the code dan copy salah satu code yang diberikan
5. Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget




6. Cari HTML/javascript. Kemudian apabila sudah buka, paste code di situ.




7. Siap dan save.
BAB 30 : Jadikan video dari youtube sebagai mp3
Youtube memainkan peranan penting untuk seseorang blogger untuk memaparkan video yang
tertentu. Bagi kategori muzik, video dapat menambahkan lagi seri sesebuah lagu. Walau
bagaimanapun, ada ketikanya paparan videonya tidak diperlukan, samada disebabkan video
tersebut memaparkan gambar statik atau mungkin juga pemilik blog hanya ingin
mempersembahkan 'lagu' sahaja kepada pengunjung.

1. Dapatkan link video (URL) dari youtube.

Contoh :
http://www.youtube.com/watch?v=_eYj0B5LwOo

2. Buang 'watch?' dan gantikan '=' kepada '/'

Contoh :
http://www.youtube.com/watch?v=_eYj0B5LwOo kepada
http://www.youtube.com/v/_eYj0B5LwOo

3.Masukkan link yang anda telah ubah ke dalam kod berikut.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-
flash" src="LINK DISINI"></embed>


contoh untuk kod di atas.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-
flash" src="http://www.youtube.com/v/_eYj0B5LwOo"></embed>
BAB 31 : Letak Facebook Share Button dalam Blog

Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para
pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook.




Dengan hanya beberapa klik sahaja, ianya sudah siap sedia untuk dikongsi di profile facebook.
selain itu penggunaan facebook share button ini dapat manarik lebih ramai pelawat ke sesebuah
                                            blog.

     Contoh penggunaan facebook share button (selain blog ini) adalah di unwanted86 dan
                                      juga ohbest.

            Cara untuk memasukkan facebook share button ini adalah seperti berikut.

   1. Pilih jenis facebook share button yang anda kehendaki, kemudian copy code yang diberi.




                                       Code untuk Full :


<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>
Code untuk Compact :


<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>


2. Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates
(Jangan lupa backup template)

3. Menggunakan fungsi find (ctrl + F), cari kod ini.


<div class='post-header-line-1'/>


jika tidak jumpa, cari kod ini.


<div class='post-header-line-1'>


4. Selepas itu paste kod share button (langkah 1) DIBAWAH kod yang anda cari (langkah 3)

5. Save template dan lihat hasilnya.
BAB 32: Membuat title bergerak




1. Dari dashboard > Design > Add a gadget > Html/Javascript
2. Copy dan paste code berikut dalam ruangan HTML/Javascript

<script language=javascript>
msg = "Title Blog Anda";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>




Note: Tukarkan 'Title Blog Anda' dengan apa sahaja yang anda mahu.
3. Save dan lihat hasilnya.




                          -TAMAT-

More Related Content

What's hot

Bab7 video dalam pendidikan
Bab7 video dalam pendidikanBab7 video dalam pendidikan
Bab7 video dalam pendidikanSiti Zulaikha
 
Kaedah & teknik pengajaran
Kaedah & teknik pengajaranKaedah & teknik pengajaran
Kaedah & teknik pengajaranzaini mustaffa
 
Bab 1 penyiasatan saintifik
Bab 1 penyiasatan saintifikBab 1 penyiasatan saintifik
Bab 1 penyiasatan saintifiksipiahmuhi
 
Konsep dan definisi kurikulum
Konsep dan definisi kurikulumKonsep dan definisi kurikulum
Konsep dan definisi kurikulumAziyan Bakar
 
Penggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukie
Penggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukiePenggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukie
Penggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukieMohd Dasuki
 
Dokumentasi Inovasi Masakan RBT
Dokumentasi Inovasi Masakan RBTDokumentasi Inovasi Masakan RBT
Dokumentasi Inovasi Masakan RBTSherly Jewinly
 
Jenis jenis item soalan
Jenis jenis item soalanJenis jenis item soalan
Jenis jenis item soalangrace_tyler12
 
Penjagaan tanaman ting 1
Penjagaan tanaman   ting 1Penjagaan tanaman   ting 1
Penjagaan tanaman ting 1Sabri Zain
 
ciri-ciri ujian bermutu tinggi
ciri-ciri ujian bermutu tinggi ciri-ciri ujian bermutu tinggi
ciri-ciri ujian bermutu tinggi Is Fakarizam
 
Definisi usahawan dan keusahawanan
Definisi usahawan dan keusahawananDefinisi usahawan dan keusahawanan
Definisi usahawan dan keusahawananNaveen Segaran
 
Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1
Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1
Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1Anasz Nazri
 
Kajian tindakan kaedah pengumpulan data kajian tindakan
Kajian tindakan  kaedah pengumpulan data kajian tindakanKajian tindakan  kaedah pengumpulan data kajian tindakan
Kajian tindakan kaedah pengumpulan data kajian tindakannym_namrod
 
Kaedah penyelesaian masalah
Kaedah penyelesaian masalahKaedah penyelesaian masalah
Kaedah penyelesaian masalahMaizatul Malik
 

What's hot (20)

Bab7 video dalam pendidikan
Bab7 video dalam pendidikanBab7 video dalam pendidikan
Bab7 video dalam pendidikan
 
Refleksi bergrid
Refleksi bergridRefleksi bergrid
Refleksi bergrid
 
Kaedah & teknik pengajaran
Kaedah & teknik pengajaranKaedah & teknik pengajaran
Kaedah & teknik pengajaran
 
Bab 1 penyiasatan saintifik
Bab 1 penyiasatan saintifikBab 1 penyiasatan saintifik
Bab 1 penyiasatan saintifik
 
Konsep dan definisi kurikulum
Konsep dan definisi kurikulumKonsep dan definisi kurikulum
Konsep dan definisi kurikulum
 
Penggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukie
Penggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukiePenggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukie
Penggunaan Teknologi Maklumat Dalam Pengajaran dan Pembalajaran By sukie
 
Minggu 8
Minggu 8Minggu 8
Minggu 8
 
Dokumentasi Inovasi Masakan RBT
Dokumentasi Inovasi Masakan RBTDokumentasi Inovasi Masakan RBT
Dokumentasi Inovasi Masakan RBT
 
4. panduan penulisan ilmiah
4. panduan penulisan ilmiah4. panduan penulisan ilmiah
4. panduan penulisan ilmiah
 
Jenis jenis item soalan
Jenis jenis item soalanJenis jenis item soalan
Jenis jenis item soalan
 
Penjagaan tanaman ting 1
Penjagaan tanaman   ting 1Penjagaan tanaman   ting 1
Penjagaan tanaman ting 1
 
ciri-ciri ujian bermutu tinggi
ciri-ciri ujian bermutu tinggi ciri-ciri ujian bermutu tinggi
ciri-ciri ujian bermutu tinggi
 
Definisi usahawan dan keusahawanan
Definisi usahawan dan keusahawananDefinisi usahawan dan keusahawanan
Definisi usahawan dan keusahawanan
 
TEORI KEPELBAGAIAN KECERDASAN GARDNER
TEORI KEPELBAGAIAN KECERDASAN GARDNERTEORI KEPELBAGAIAN KECERDASAN GARDNER
TEORI KEPELBAGAIAN KECERDASAN GARDNER
 
Penggubalan Item/Soalan Ujian
Penggubalan Item/Soalan UjianPenggubalan Item/Soalan Ujian
Penggubalan Item/Soalan Ujian
 
Analisis pelajar
Analisis pelajarAnalisis pelajar
Analisis pelajar
 
LAPORAN
LAPORANLAPORAN
LAPORAN
 
Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1
Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1
Pm pentaksiran kursus (arahan & rubrik e folio&pembentangan)1
 
Kajian tindakan kaedah pengumpulan data kajian tindakan
Kajian tindakan  kaedah pengumpulan data kajian tindakanKajian tindakan  kaedah pengumpulan data kajian tindakan
Kajian tindakan kaedah pengumpulan data kajian tindakan
 
Kaedah penyelesaian masalah
Kaedah penyelesaian masalahKaedah penyelesaian masalah
Kaedah penyelesaian masalah
 

Viewers also liked (7)

Cara membuat blog di www.blogspot.com
Cara membuat blog di www.blogspot.comCara membuat blog di www.blogspot.com
Cara membuat blog di www.blogspot.com
 
Cara membuat blog ppt
Cara membuat blog ppt Cara membuat blog ppt
Cara membuat blog ppt
 
Troubleshoot : Yes Dongle
Troubleshoot : Yes DongleTroubleshoot : Yes Dongle
Troubleshoot : Yes Dongle
 
Langkah membuat blogspot
Langkah membuat blogspotLangkah membuat blogspot
Langkah membuat blogspot
 
Auto reply mail
Auto reply mailAuto reply mail
Auto reply mail
 
Cara Membuat Blog Tugas TIK Kelas 9
Cara Membuat Blog Tugas TIK Kelas 9Cara Membuat Blog Tugas TIK Kelas 9
Cara Membuat Blog Tugas TIK Kelas 9
 
Cara membuat blog
Cara membuat blogCara membuat blog
Cara membuat blog
 

Similar to GAMBAR DI BLOG

Membuat website (blog) dengan blogspot
Membuat website (blog) dengan blogspotMembuat website (blog) dengan blogspot
Membuat website (blog) dengan blogspotas3pupun
 
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.PdBELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.PdRhiEa Chinnie
 
Cara membuat blog gratis
Cara membuat blog gratisCara membuat blog gratis
Cara membuat blog gratisIlham Ajjd
 
Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017bagus9958
 
Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012bagus9958
 
Power point blogger1
Power point blogger1Power point blogger1
Power point blogger1bki-2
 
Presentasi Tentang Blog (Armadodi, SE)
Presentasi Tentang Blog (Armadodi, SE)Presentasi Tentang Blog (Armadodi, SE)
Presentasi Tentang Blog (Armadodi, SE)LP2MP Gema Nurani
 
Bagaimana membina blog di blogspot.com
Bagaimana membina blog di blogspot.comBagaimana membina blog di blogspot.com
Bagaimana membina blog di blogspot.comnotarazi
 
Pelatihan pembuatan blog
Pelatihan pembuatan blogPelatihan pembuatan blog
Pelatihan pembuatan blogP. Irfan syah
 
Tutorial Blogger
Tutorial BloggerTutorial Blogger
Tutorial BloggerMusa Amin
 
presentasi mengenai Blogging SMP
presentasi mengenai Blogging SMPpresentasi mengenai Blogging SMP
presentasi mengenai Blogging SMPGilang Surur
 

Similar to GAMBAR DI BLOG (20)

Blog tampilan baru
Blog tampilan baruBlog tampilan baru
Blog tampilan baru
 
ASAS MEMBINA BLOG
ASAS MEMBINA BLOGASAS MEMBINA BLOG
ASAS MEMBINA BLOG
 
Membuat website (blog) dengan blogspot
Membuat website (blog) dengan blogspotMembuat website (blog) dengan blogspot
Membuat website (blog) dengan blogspot
 
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.PdBELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
 
Panduan membuat-blog
Panduan membuat-blogPanduan membuat-blog
Panduan membuat-blog
 
PPT PMP DEDEH
PPT PMP DEDEHPPT PMP DEDEH
PPT PMP DEDEH
 
Cara membuat blog gratis
Cara membuat blog gratisCara membuat blog gratis
Cara membuat blog gratis
 
Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017
 
Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012
 
Power point blogger1
Power point blogger1Power point blogger1
Power point blogger1
 
Presentasi Tentang Blog (Armadodi, SE)
Presentasi Tentang Blog (Armadodi, SE)Presentasi Tentang Blog (Armadodi, SE)
Presentasi Tentang Blog (Armadodi, SE)
 
Modul weblog
Modul weblog Modul weblog
Modul weblog
 
Tgs komputer
Tgs komputerTgs komputer
Tgs komputer
 
Bagaimana membina blog di blogspot.com
Bagaimana membina blog di blogspot.comBagaimana membina blog di blogspot.com
Bagaimana membina blog di blogspot.com
 
Pelatihan pembuatan blog
Pelatihan pembuatan blogPelatihan pembuatan blog
Pelatihan pembuatan blog
 
Tutorial Blogger
Tutorial BloggerTutorial Blogger
Tutorial Blogger
 
presentasi mengenai Blogging SMP
presentasi mengenai Blogging SMPpresentasi mengenai Blogging SMP
presentasi mengenai Blogging SMP
 
Mudahnya bina blog
Mudahnya bina blogMudahnya bina blog
Mudahnya bina blog
 
Materi blog
Materi blogMateri blog
Materi blog
 
Materi blog
Materi blogMateri blog
Materi blog
 

More from ذولکيفلي عبدالحميد (8)

Manual pemasangan dan troubleshoot presmark 2014
Manual pemasangan dan troubleshoot presmark 2014Manual pemasangan dan troubleshoot presmark 2014
Manual pemasangan dan troubleshoot presmark 2014
 
Manual e-rekod
Manual e-rekodManual e-rekod
Manual e-rekod
 
PANDUAN MENGERJAKAN SOLAT KHAS
PANDUAN MENGERJAKAN SOLAT KHASPANDUAN MENGERJAKAN SOLAT KHAS
PANDUAN MENGERJAKAN SOLAT KHAS
 
Manual pemasangan dongle
Manual pemasangan dongleManual pemasangan dongle
Manual pemasangan dongle
 
Ayat ruqyah syariah
Ayat ruqyah syariahAyat ruqyah syariah
Ayat ruqyah syariah
 
Menu Hidangan Berbuka
Menu Hidangan BerbukaMenu Hidangan Berbuka
Menu Hidangan Berbuka
 
Step by step to create a simple teaching and learning site using vle frog
Step by step to create a simple teaching and learning site using vle frogStep by step to create a simple teaching and learning site using vle frog
Step by step to create a simple teaching and learning site using vle frog
 
Apa ertinya saya menganut islam karangan dr.fathi yakan
Apa ertinya saya menganut islam karangan dr.fathi yakanApa ertinya saya menganut islam karangan dr.fathi yakan
Apa ertinya saya menganut islam karangan dr.fathi yakan
 

GAMBAR DI BLOG

  • 1. PANDUAN LENGKAP MEMBUAT BLOG ZULKIFLY AB HAMID FT 17 SMK.TAMAN SEJESA JAYA 2, JALAN SILAT HARIMAU 33, BANDAR SELESA JAYA,81300,SKUDAI,JOHOR HASIL KERJA OLEH BLOGGER: esoftwaresource.blogspot.com tutorialuntukblog.blogspot.com teknikbuatblog.blogspot.com sembangkomputer.com
  • 2. ISI KANDUNGAN BAB 1: Buat Blog Percuma Dengan Blogspot ................................................................................................ 3 BAB 2 :Post Entri Dalam Blog ...................................................................................................................... 10 BAB 3:Upload Gambar Dalam Blog ............................................................................................................. 12 BAB 4 :Upload Video Dalam Blog ................................................................................................................ 15 BAB 5 : Letak Video Dari Youtube Dalam Blog ............................................................................................ 17 BAB 6: Bagaimana Letak Kod HTML/javascript ........................................................................................... 19 BAB 7: Setting Asas Yang Perlu Diketahui Oleh Blogger ............................................................................. 21 BAB 8 : Backup Template Blog .................................................................................................................... 25 BAB 9 : Website untuk download template blog........................................................................................ 28 BAB 10 : Tukar template blog ..................................................................................................................... 30 BAB 11: Buka Link Baru Apabila Klik Pada Gambar..................................................................................... 32 BAB 12 : Ketahui Komen Pada Entri Melalui Email ..................................................................................... 34 BAB 13 : Link Dalam Blog Warna-Warni ( Rainbow Link ) ........................................................................... 36 BAB 14: Cara Buat Gambar Bergerak (Scrolling Image) .............................................................................. 37 BAB 15 : Image Magnify .............................................................................................................................. 38 BAB 16 : Disable Right Click......................................................................................................................... 40 BAB 17 : Background Dalam Sesebuah Entri .............................................................................................. 42 BAB 18 : Letak Icon Pada URL Blog ............................................................................................................. 43 BAB 19 : Daftar dan letak ............................................................................................................................ 48 shoutbox pada blog..................................................................................................................................... 48 BAB 20 : Cara Buat Read More pada blog................................................................................................... 51 BAB 21 : Letak Signature Dalam Blog .......................................................................................................... 54 BAB 22 : Letak Website Lain Dalam Blog .................................................................................................... 57 BAB 23 : Cara Letak Linkwithin Dalam Blog ................................................................................................ 60 BAB 24 : Tukar Ayat Asal Linkwithin ........................................................................................................... 63 BAB 25 : Ketahui Bilangan Pengunjung Online Dalam Blog ........................................................................ 65 BAB 26 :Ubah Lebar Ruangan Komen ......................................................................................................... 66 BAB 27 : Cara Buat Dropdown Menu .......................................................................................................... 68 BAB 28 : Letak Website Lain Dalam Entri.................................................................................................... 69 BAB 29 : Membuat teks bergerak seperti kiosk .......................................................................................... 71 BAB 30 : Jadikan video dari youtube sebagai mp3 ..................................................................................... 74
  • 3. BAB 31 : Letak Facebook Share Button dalam Blog .................................................................................... 75 BAB 32: Membuat title bergerak ................................................................................................................ 77 -TAMAT- ........................................................................................................................................................ 77
  • 4. BAB 1: Buat Blog Percuma Dengan Blogspot Daftar di Blogspot Untuk menggunakan Blogspot, anda haruslah mempunyai satu akaun Google terlebih dahulu (contohnya Gmail). Jika anda mempunyai akaun Google, anda boleh terus sign in pada laman web Blogspot. Jika tidak, anda perlu terlebih dahulu, mendaftar di Blogspot. Pergi ke laman web Blogspot dan klik pada butang “Create Your Blog Now“. Kemudian, ikuti 3 langkah mudah berikut: 1. Buat satu akaun Google. Isikan borang yang diberi dengan maklumat-maklumat yang berkenaan. Setelah siap, tekan butang “Continue”. Namakan blog anda. Berikan nama bagi blog anda. Jangan risau kerana nama ini boleh diubah di kemudian hari jika anda mahu. Apa yang penting adalah tentukan alamat URL bagi blog tersebut. Alamat inilah yang akan ditaip pada Internet Explorer untuk pergi ke blog anda. Alamat URL ini akan kekal, dan tak boleh diubah lagi selepas ini.
  • 5. 2. Pilih template. Pilih mana-mana template, iaitu rupa bagi blog anda. Template ini juga boleh diubah pada bila-bila masa. 3. Setelah ketiga-tiga langkah tersebut berjaya, mesej seperti di bawah ini akan dipaparkan, menandakan blog anda telah berjaya dibina:
  • 6. Paparan dashboard lama vs. dashboard baru dalam Blogspot.com Terdapat 2 paparan ruangan dashboard bagi Blogspot iaitu paparan dashboard lama dan paparan dashboard yang baru.Anda bebas memilih untuk menggunakan fungsi dashboard lama atau baru mengikut keselesaan anda.Jika anda ingin menggunakan paparan dashboard yang baru, anda boleh ikuti langkah mudah di bawah. 1. Sign in menggunakan emel anda di www.blogger.com . 2. Klik pada Try the updated Blogger interface. Lihat gambar di bawah. 3. Selesai. Anda akan melihat paparan dashboard yang baru. Anda boleh membiasakan diri dengan paparan yang baru ini dan mencuba setiap butang yang disediakan.
  • 7. 4. Jika anda ingin kembali ke paparan yang lama, mudah sahaja. Klik pada butang Blogger options dan pilih Old Blogger Interface. Anda akan di bawa ke paparan dashboard blogspot yang lama.
  • 8. Mulakan Menulis Kini blog anda telah sedia dibina. Anda boleh mula menulis entri baru di bahagian “Posting > Create”. Sekarang, tulislah apa sahaja yang anda mahu. Setelah selesai, klik pada “Publish post” dan entri tersebut akan dipaparkan pada blog anda. Berikut adalah contoh blog yang dihasilkan. Mudahkan?
  • 9. Ubahsuai Rupa Blog Anda Dalam Blogspot, bahagian sidebar biasanya digunakan untuk meletakkan profil anda, arkib, link ke blog atau laman web lain, dan sebagainya. Untuk mengubahsuai bahagian sidebar ini, pergi kepada “Layout > Page Elements” Klik pada “Add a Page Element” untuk menambahkan elemen baru pada sidebar anda. Klik “Edit” pada mana-mana elemen untuk mengubahsuai bahagian tersebut. Setelah siap, klik pada butang “Save” dan ia akan dipaparkan pada blog anda.
  • 10. Contoh sidebar yang dihasilkan:
  • 11. BAB 2 :Post Entri Dalam Blog Post entri dalam blog merupakan perkara yang paling asas bagi seorang blogger. Dalam entri anda akan menaip apa yang anda mahu sampaikan sama ada luahan rasa, perkongsian, info dan apa-apa sahaja yang anda mahu. Berikut adalah cara bagaimana anda hendak memulakan langkah untuk menaip dalam blog anda. 1. Buka linkwww.blogger.com (link ini diperlukan setiap kali anda hendak login kepada akaun blogger). Masukkan email dan password anda. 2. Pada paparan muka depan, klik pada 'new post' 3. Masukkan tajuk untuk entri anda dan juga isi kandungan entri anda.(biasa bab ini mengambil masa untuk menaip entri).
  • 12. Kemudian apabila sudah siap, klik pada button 'publish' 4. Apabila sudah tekan button publish, siap untuk sebuah entri dalam blog anda.:)  jika anda hendak tengok 'rupa' entri anda itu, klik pada 'view post'  jika anda rasa masih ada kekurangan dan hendak edit, klik pada 'edit post'  jika anda hendak menaip entri baru, klik pada 'create a new post' (anda juga boleh mulakan dari awal dengan klik pada 'dashboard' pada bahagian atas-kanan)
  • 13. BAB 3:Upload Gambar Dalam Blog Meletakkan gambar dalam sesebuah entri dalam sesebuah blog dapat 'merancakkan' lagi kandungan sesebuah entri. Kebiasaannya gambar yang diletakkan adalah berkaitan dengan entri yang ditaip. dan adalah biasa pengunjung sesebuah blog suka membaca entri sesebuah blog yang juga mempunyai gambar walaupun sekeping.:) Tutorial untuk upload gambar dalam blog adalah seperti berikut. 1.Login seperti biasa, klik pada 'new post' 2.Pada paparan, klik pada icon upload picture seperti yang ditunjukkan dibawah. -Kedudukan berbeza bagi keadaan 'html' dan juga 'compose' tetapi simbolnya tetap sama. ATAU
  • 14. 3.Klik 'browse'. 4.Pilih gambar yang anda hendak letakkan dari komputer anda. 4.1. Jika hendak letak lebih daripada satu gambar pada satu masa(maksimum 5), klik pada 'add more image'. 5.Pilih kedudukan dan size yang anda mahu untuk gambar tersebut, kemudian klik 'upload'.
  • 15. 6. Tunggu sehingga gambar siap diupload kemudian klik 'done' Nota: Jika anda hendak upload lebih daripada 5 gambar, cuma ulang semula langkah 1 hingga 5.
  • 16. BAB 4 :Upload Video Dalam Blog Selain gambar, video juga memainkan peranan yang penting untuk seseorang blogger untuk mempelbagaikan kandungan entri dalam blog. Video boleh merangkumi samada aktiviti peribadi, video klik lagu kegemaran, video klip percutian, tutorial dan apa sahaja yang dilihat lebih memudahkan untuk disampaikan kepada pengunjung ataupun untuk tatapan pemilik blog sahaja. Untuk mengupload video menggunakan kaedah yang tersedia untuk blogger adalah seperti berikut. 1. Login ke dalam akaun blogger anda, kemudian klik pada new post. 2. Pada paparan yang muncul, klik pada icon video seperti yang ditunjukkan.
  • 17. 3. Langkah seterusnya, browse video yang hendak diupload, masukkan title dan juga tick pada ruangan seperti yang ditunjukkan. Kemudian klik pada upload video 4. Untuk sesebuah video, masa diperlukan untuk memproses video tersebut sehingga dapat dipublishkan. Bergantung kepada saiz video. Anda boleh save dahulu hasil kerja anda dan kembali selepas beberapa ketika untuk pastikan sama ada video tersebut sudah boleh dimainkan atau tidak.
  • 18. BAB 5 : Letak Video Dari Youtube Dalam Blog Youtube, sebuah laman web yang tidak perlu diperkenalkan lagi kepada pelayar maya. Laman web yang mempunyai begitu banyak video dan menjadi rujukan kepada sesiapa sahaja untuk mencari video tidak kira untuk hiburan, pelajaran, berkongsi pengalam dan sebagainya. Youtube juga menjadi platform bagi seseorang blogger untuk berkongsi sesebuah video kepada pengunjung blog mereka. Tutorial ini akan menerangkan bagaimana untuk meletakkan video yang terdapat dalam youtube ke dalam blog. 1.Login akaun blogger anda, kemudian klik pada new post. 2.Buka video dari youtube yang anda hendak post, kemudian lihat sebelah kanan untuk ruangan embed. 3. Klik customize untuk melakukan sedikit ubahan pada video anda. Anda boleh pilih option yang ada seperti border dan juga saiz video yang hendak dipaparkan.
  • 19. 4.Setelah selesai,copy code dari bahagian embed dan paste dalam ruangan blog anda.(klik preview untuk tengok keadaan video anda) 5. Selesai.
  • 20. BAB 6: Bagaimana Letak Kod HTML/javascript Apabila memasuki dunia blogging, antara perkara yang tidak dapat dielakkan adalah untuk menghias blog sendiri. Terdapat beberapa cara untuk menghias blog samada menukar template, memasang widget yang telah disediakan oleh blogger.com ataupun meletakkan sumber² lain dari luar yang biasanya melibatkan kod html/javascript.Selain untuk menghias blog, kod html/javascript juga mempunyai fungsi² lain bergantung kepada tujuan apa kod itu dihasilkan. Penambahan yang ingin dilakukan biasanya akan melalui perkara yang sama iaitu kod yang diperolehi perlu di 'paste'kan di ruangan html/java script. Tutorial ini akan menunjukkan bagaimana hendak meletakkan kod html/javascript bagi sesebuah blog. 1) Login ke dalam blog anda seperti biasa. Kemudian dari 'dashboard', klik 'Design' UPDATE: untuk template terbaru, klik pada DESIGN 2)Setelah anda klik 'design', dia akan auto masuk bahagian 'page element'. Kemudian pada 'page element' anda itu, klik pada 'add a gadget'
  • 21. 3)Selepas itu anda akan lihat banyak senarai yang ada, cari "HTML/javascript", kemudian klik pada "+" 4)Satu paparan kosong akan dibuka, kemudian paste code yang anda mahu letak dalam blog ke dalam ruangan kosong. kemudian tekan "save" 5)Siap. Anda boleh lihat hasilnya dengan klik preview. Anda juga boleh mengubah kedudukan code itu dengan hanya drag pada mana² kawasan page element itu.Apabila anda sudah puas hati, klik 'save' untuk kekalkan kedudukan.
  • 22. BAB 7: Setting Asas Yang Perlu Diketahui Oleh Blogger Bagi sesebuah blog, setting merupakan antara perkara penting untuk menentukan bagaimana paparan, dan perlakuan-perlakuan lain yang berkaitan dengan blog. Antara perkara yang berkaitan dengan setting bagi sesebuah blog adalah tajuk blog, berapa bilangan entri, siapa yang boleh komen, dan lain² yang akan diterangkan di bawah. Paparan untuk setting bagi sesebuah blog adalah seperti berikut. Untuk entri ini, setting merangkumi basic, formatting dan publishing. Ini kerana 3 perkara ini boleh dianggap bahagian setting yang paling utama bagi sesebuah blog. Beberapa setting asas yang perlu diketahui oleh seorang blogger adalah seperti berikut. BASIC: Title : Title akan ditunjukkan pada bahagian atas browser apabila sesebuah blog dibuka. Description : Berkaitan dengan apa kandungan sesebuah blog. Boleh dimasukkan sehingga 500 huruf. Contoh tutorial blog, tutorial blog dalam bahasa melayu, tutorial untuk semua dan lain² yang berkaitan. Kalau blog peribadi hampir boleh diabaikan ataupun letak sahaja seperti perjalanan hidupku, inilah kisah aku dan lain².
  • 23. FORMATTING Show : bilangan entri untuk paparan muka depan. jangan terlalu banyak. Biasanya antara 5 hingga 10 untuk mempercepatkan loading keseluruhan blog. Date header format : Kurang penting, boleh pilih mana yang dirasakan sesuai. Archive index date format : Format yang akan ditunjukkan untuk apa yang ditaip dalam sesebuah blog dalam jangka sebulan Timestamp format : Kurang penting, boleh pilih mana yang dirasakan sesuai. Time zone : Penting untuk pastikan kedudukan untuk masa adalah betul. Jika yang berada dalam negara Malaysia, sila pilih (GMT +8.00) Kuala Lumpur. Jika berada ditempat lain boleh pilih yang yang sepatutnya. Language : English (Boleh juga pilih malay, tetapi dicadangkan english untuk memudahkan memandangkan kebanyakan sudah biasa dengan perkataan² english dalam dunia blogging)
  • 24. COMMENTS Comments : Show - Jika ada pengunjung yang menghantar komen, komen akan dipaparkan dibawah entri. Who can comments : Bahagian ini bergantung kepada pemilik blog. Kalau pilih anyone, sesiapa sahaja boleh komen. Kalau pilih registered user, hanya orang yang mempunyai blog/id lain yang boleh komen. Comment form placement : Kedudukan ruangan komen untuk sesebuah entri. Kebiasaan blogger akan pilih samada pop-up window atau embedded below post. Walau bagaimanapun, tidak semua template boleh gunakan embeded below post.
  • 25. Comment moderation : Bergantung kepada pemilik blog. Jika mahu komen pengunjung terus dipaparkan,pilih never. Tetapi jika mahu komen dari pengunjung 'ditapis' dahulu oleh pemilik blog, pilih always. Show word verification for comment : Pilih No. Kerana kehadiran word verificationbiasanya akan menyusahan pengunjung. Kecuali untuk kes² tertentu jika terlalu banyak spam (di Malaysia perkara ni jarang berlaku)
  • 26. BAB 8 : Backup Template Blog Template bagi sesebuah blog boleh diibaratkan sebagai tulang belakang blog kerana template yang menyimpan semua maklumat berkaitan rupa bentuk blog anda, fungsi blog dan juga kebanyakan trick untuk sesebuah blog akan dilakukan di template (edit html). Sama ada anda letak background , ubah colour, letak fungsi 'read more' atau apa-apa sahaja, kebanyakannya adalah di template.Oleh itu adalah perlu untuk seseorang blogger akan backup dahulu template blog sebelum melakukan sebarang pengubahsuaian ataupun sebelum menukar template baru.
  • 27. 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 2) Dari layout, klik edit html dan dibawah sedikit anda akan jumpa 'download full template' 3)Keluar paparan, klik save..Siap.:)
  • 28. 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.:)
  • 29. BAB 9 : Website untuk download template blog Sebelum menukar template sesebuah blog, perkara yang diperlukan adalah template yang hendak ditukar. Seseorang pemilik blog mesti mengetahu template bagaimana yang hendak digunakan untuk blognya. Jika anda seorang pemilik blog dan masih belum lagi mempunyai template yang hendak digunakan, anda boleh mendapatkan pelbagai jenis template secara percuma dan pelbagai jenis yang dirasakan sesuai untuk blog anda. Template sesebuah blog adalah dalam format .xml (oleh itu pastikan jika anda download file dalam bentuk zip/rar, anda extract dahulu file tersebut.) Berikut adalah antara laman web yang menyediakan pelbagai jenis template untuk blogger secara percuma. http://btemplates.com/ http://www.ourblogtemplates.com/
  • 31. BAB 10 : Tukar template blog Menukar template blog dapat mengubah rupa blog asal kepada paparan yang lebih menarik. Adalah biasa bagi seseorang pemilik blog inginkan blognya tampil menarik berbanding template asal. Tutorial ini akan menerangkan dengan ringkas cara-cara untuk menukar template sesebuah blog. Sebelum menukar template blog, pastikan anda sudah mempunyai template yang dikehendaki. Jika anda masih belum lagi mempunyai template, sila rujuk kepada entri ini. website untuk mencari template blog. Berikut adalah langkah-langkah untuk menukar template blog. 1. Login akaun kemudian daripada dashboard klik layout > edit html 2. Baca penerangan berdasarkan gambar di bawah.
  • 32. 1. Klik browse 2. Pilih template yang anda telah download 3. Klik open 4. Klik upload 3. Apabila klik upload, paparan berikut akan keluar, klik pada 'keep widget' 4. Setelah selesai anda boleh view blog anda.
  • 33. BAB 11: Buka Link Baru Apabila Klik Pada Gambar Apabila upload gambar menggunakan kaedah yang telah tersedia oleh blogger.com, secara default gambar tersebut akan dibuka pada page yang sama. Ada ketikanya ia 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 di klik. Perhatikan kedua-dua gambar ini, sila klik pada keduanya. 1)Gambar 1 2)Gambar 2 Gambar pertama tidak memberi kesan apa², tetapi gambar kedua membawa anda ke yahoo.com .(tekan butang ctrl pada keybord dan klik pada imej.Anda akan dibawa ke yahoo). <a href="Letakkan link untuk dibuka disini" target="_blank" > <imgsrc="Letakkan url gambar disini"/></a>
  • 34. Sebagai contoh, untuk kod gambar kedua adalah seperti ini <a href="http://www.yahoo.com" target="_blank" > <img src="http://www.google.com.my/intl/en_com/images/logo_plain.png"/></a>  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.
  • 35. BAB 12 : Ketahui Komen Pada Entri Melalui Email Mengetahui siapa yang komen pada sesebuah entri adalah penting bagi seseorang blogger sama ada untuk mengetahui respond daripada pengunjung ataupun memberi maklum balas jika ada perkara yang ditanya oleh pengunjung kepada pemilik. Contohnya begini. Anda ada blog kan. dan sudah tentu anda ada entri yang banyak dalam blog anda. Katakan anda ada entri bertarikh 12 Februari 2009, bagaimana anda hendak tahu jika ada orang komen pada entri tersebut pada hari ini.? Takkan anda hendak periksa semua entri anda untuk pastikan sama ada komen baru atau tidak. Bukankah itu menyusahkan dan begitu membuang masa.:) Oleh itu, terdapat cara mudah untuk para blogger untuk ketahui sama ada entri anda baru sahaja dikomen oleh seseorang.Dan anda akan dapat tahu melalui email. 1)Login akaun anda, dan dari dashboard, klik pada setting 2)Selepas itu klik pada comments 3)Apabila paparan sudah dibuka, scroll sampai bawah sehingga anda jumpa 'comment notification email'. Masukkan email anda. anda juga boleh masukkan lebih dari satu email, kemudian save.
  • 36. Apabila ada seseorang yang komen pada entri anda, contoh yang keluar pada email yahoo adalah seperti berikut., Jadi, senang untuk anda ketahui bila dan entri apakah yang mempunyai komen terbaru.
  • 37. BAB 13 : Link Dalam Blog Warna-Warni ( Rainbow Link ) Rainbow link merupakan salah satu trick yang diaplikasikan kepada link yang ada dalam sesebuah blog. asalkan cursor mouse dilalukan pada sesuatu link, link tersebut akan berubah menjadi warna-warni dengan warna yang tertentu. Tutorial untuk menjadikan blog anda juga mempunyai link berwarna-warni adalah seperti berikut. 1.) Copy code di bawah ini. <script src="https://sites.google.com/site/unwanted86/javascript/rainbowlink.js" type="text/javascript"> </script> 2) Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget 3) Cari HTML/javascript. Kemudian apabila sudah buka, paste code kat situ. 4) Siap dan save.
  • 38. BAB 14: Cara Buat Gambar Bergerak (Scrolling Image) Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada blogger lain. 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. <marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200"> <a href="link untuk dibuka" target="_blank"><imgsrc="url gambar" /></a> <a href="link untuk dibuka" target="_blank"><imgsrc="url gambar" /></a> </marquee> 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
  • 39. BAB 15 : Image Magnify Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah² yang melihat gambar yang lain. Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image Magnify - Test Mode Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan. Berikut adalah tutorial untuk image magnify ini. 1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda. (Dashboard > layout > add page element > HTML/javascript ) Jika masih tidak jelas lagi, klik sini. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src=" http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">
  • 40. /*********************************************** * Kod telah di'edit' oleh unwanted * Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted * -- Sharing Is Caring -- http://www.unwanted86.blogspot.com -- ***********************************************/ </script> 2) Apabila sudah letak code tu, save sahaja seperti biasa.. Siap untuk bahagian letakkan kod asas.. Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.) <imgsrc="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " /> Keterangan :  url gambar disini : Masukkan url gambar.  2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5  200 : Masukkan lebar gambar yang anda rasakan bersesuaian  150 : Masukkan tinggi gambar yang anda rasakan bersesuaian
  • 41. BAB 16 : Disable Right Click Adakah anda tidak suka orang lain mengambil apa sahaja kandungan dalam blog anda.? Dan pada masa yang sama anda tidak suka dengan kod² yang berserabut yang perlu di edit dalam 'edit html'. Kini ada cara mudah untuk realisasikan hasrat anda.:) Kenapa Perlu Disable Right Click.? Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk megelakkan orang lain mengambil apa yang ada dalam blog mereka. Samada tidak senang ayat mereka ditiru bulat² (copy paste), ataupun untuk mengelakkan bandwidth habis digunakan. Kebiasaan alasan yang aku selalu baca adalah kerana ada orang yang copy entri mereka bulat². Berikut adalah contoh msg yang akan keluar apabila anda aktifkan disable right click Berikut adalah cara yang mudah untuk menggunakan fungsi ini. 1. Copy kod ini. <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){
  • 42. 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> 2. Paste pada "HTML/javascript" dalam blog anda. Dashboard >Layout>Add a Page element >html/javascript. Kalau masih kurang jelas, klik sini. Apabila sudah siap, save dan lihat kesannya pada blog anda.
  • 43. BAB 17 : Background Dalam Sesebuah Entri 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.:) <div style="background:url(Link gambar disini) no-repeat;"> Taip segala entri untuk blog anda disini. </div> - 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 </div> Itu sahaja. Apabila anda post anda akan lihat kesannya. p/s: -pastikan anda pilih background yang bersesuaian agar pengunjung blog anda tidak pening membaca.
  • 44. BAB 18 : Letak Icon Pada URL Blog Mempunyai icon di sebelah url sesebuah blog dapat menunjukkan treadmark sesebuah blog. Pengunjung tetap juga biasanya akan dapat mengingati icon yang unik berbanding icon blogger yang biasa dilihat. Ini kerana, default untuk icon bagi sesebuah blog adalah icon blogger yang berwarna jingga. Dan kini anda berpeluang untuk mengubahnya mengikut kesukaan anda dengan mengaplikasikan beberapa langkah di bawah. Jika sebelum ini iconnya begini. Apa kata kalau tukar menjadi seperti ini. ataupun lain².:) Sila pastikan anda mengikuti langkah yang diberi satu-persatu untuk memastikan semuanya berjalan lancar.:). 1) Cari Icon Kesukaan Anda. Sebagai permulaan, pastikan anda mempunyai icon untuk dijadikan icon untuk blog anda. Jika yang sudah ada, tiada masalah. Jika masih mencari² icon yang sesuai, boleh juga lihat² dalam web berikut http://www.freeiconsweb.com/index.html http://www.gifanimations.com/ Atau jika masih tidak berkenan, cari dalam google. untuk icon ini, biasanya file gambar adalah format gif, jpg, jpeg, png. Anda boleh cari samada
  • 45. gambar yang static atau animated. Biasanya size (pixel) icon adalah 32x32 atau 34x34 atau 128x128. Untuk tutorial ini, jangan ambil file yang jenis .ico Katakanlah, sudah ada icon, dan icon yang suka adalah ini. 2) Upload icon anda ke imageshack.us Langkah seterusnya anda perlu uplaodkan gambar anda. Boleh gunakan apa² web hosting,imageshack atau photobucket atau lain². Tapi aku cadangkan imageshack sbb tak perlukan pendaftaran untuk upload. Selepas upload sila pastikan anda ada direct link untuk gambar anda untuk dimasukkan dalam kod nanti. Langkah seterusnya,adalah untuk letakkan code ke dalam blog anda. Oleh itu, pastikan anda login dahulu ke blog anda. Langkah²nya adalah seperti berikut.
  • 46. 1)Dari dashboard blog, klik pada layout 2)Klik pada 'edit html' kemudian tick pada 'expand widget templates' 3)Seterusnya, anda hendaklah backup dahulu template anda dengan klik pada 'download full template'. Jika masih tidak faham bagaimana dan kenapa hendak buat backup ni, sila rujuk sinibackup template blog. 4)Daripada paparan skrin anda, klik edit, kemudian find. Dalam bahagian kotak dibawah, taipkan < /head>
  • 47. 5)Buka link dibawah untuk lihat code, selepas itu copy code yang diberi kemudian paste sebelum < /head>, selepas itu, gantikan dengan direct link icon anda dari imageshack yang anda upload.
  • 48. Seterusnya klik preview untuk lihat icon anda menjadi atau tidak, kalau menjadi, apa lagi, SAVE..:)
  • 49. BAB 19 : Daftar dan letak shoutbox pada blog Meletakkan sesebuah shoutbox dalam menggalakkan interaksi antara pemilik blog dengan pengunjung sesebuah blog. Interaksi ini mudah kerana ianya tidak melibatkan komen pad aentri, tetapi pesanan yang ditinggalkan pada gadjetshoutbox yang di'pasang' oleh pemilik blog. Terdapat pelbagai jenis shoutbox yang ada untuk diletakkan dalam sesebuah blog. Antara yang dicadangkan untuk diletakkan dalam sesebuah blog adalah shoutbox daripada shoutmix.com. Tutorial ringkas ini akan menerangkan cara untuk mendaftar shoutmix, dapatkan kod html dan letakkan pada blog. 1. Buka www.shoutmix.com 2. Klik pada create shoutbox 3. Masukkan maklumat yang dikehendaki.(maklumat akan dihantar ke email untuk simpanan)
  • 50. 4. Masukkan setting yang berkaitan. Biasanya melibatkan style & color dan date & time. 5. Setelah selesai memasukkan setting yang dikehendaki dalam langkah 4,klik pada 'get codes' 6. Masukkan lebar dan tinggi yang dikehendaki didalam blog anda. Kemudian copy code berkenaan.
  • 51. 7. Setelah copy code, paste pada html/javascript dalam blog anda ( Dashboard>layout>add a gadget>html/javascript) -Jika masih tidak faham dimana perlu paste code, sila rujuk disini. Nota: setting untuk shoutbox boleh diubah bila-bila masa dengan login kembali ke dalam akaun shoutmix. ----------- Contoh shoutbox yang diletakkan dalam blog.
  • 52. BAB 20 : Cara Buat Read More pada blog Mempunyai fungsi 'read more' adalah antara perkara yang perlu diaplikasikan pada sesebuah blog. Ini kerana rata-rata pemilik blog akan menaip entri yang boleh dikategorikan sebagai 'panjang'. Dengan mempunyai fungsi read more, keseluruhan entri dapat diringkaskan supaya ianya lebih memudahkan. Berikut merupakan langkah yang perlu dilakukan untuk menggunakan fungsi 'read more' pada blog. 1. Login, daripada dashboard klik layout > edit html. 2. Pastikan anda backup template dahulu dengan klik 'Download Full Template' kemudian klik pada 'expand widget templates'. 3. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian taip <data:post.body/>
  • 53. 4. Letakkan kod ini di atas <data:post.body/> <b:ifcond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> 5. Kemudian letakkan kod ini di bawah <data:post.body/> <b:ifcond='data:blog.pageType != "item"'><br /> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if> Nota: kod anda sepatutnya kelihatan seperti ini.
  • 54. 6. Selepas selesai letak code, Save Template. 7. Kemudian, daripada paparan dashboard, klik pada Setting > Formatting kemudian scroll ke bawah sehingga jumpa Post Template. 8. Copy code berikut ke dalam Post Template <span class="fullpost"> </span> 9. Save Setting 10. Pergi kepada paparan untuk post entri, dalam ruangan post entri klik pada 'edit html' dan akan anda jumpa code tadi. Kandungan yang ingin diletakkan dalam ruanagn read more perlu terletak antara <span class="fullpost"> dan </span> 11. Apabila siap menaip, klik publish..
  • 55. BAB 21 : Letak Signature Dalam Blog Mempunyai signature dapat menambahkan lagi trademark bagi seseorang blogger. Signature terletak pada bahagian akhir untuk sesuatu entri yang di post oleh blogger. Signature boleh jadi apa sahaja sama ada 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. Nota: pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'.
  • 56. 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/jC8qDqdmR7 8/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 <p><data:post.body/></p>
  • 57. 3. Copy code ini dan paste di bawah kod tadi. <p><div align="left"><imgsrc="URL gambar/signature anda"/></div></p> kod anda sepatutnya kelihatan seperti ini.(contoh) 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.
  • 58. BAB 22 : Letak Website Lain Dalam Blog Pernahkah anda terfikir untuk meletakkan satu ruangan website lain dalam blog anda.? Seperti anda meletakkan website google, yahoo dan pelbagai lagi dalam blog anda. Ini membolehkan pengunjung blog anda melayari web lain tanpa meninggalkan blog anda. Meletakkan website dalam blog masih boleh dilakukan dengan hanya menggunakan kod html/javascript Klik disini untuk lihat demo website yang diletakkan dalam blog. Berikut adalah langkah-langkah untuk tutorial ini. 1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget
  • 59. 2. selepas klik pada add a gadget, pilih HTML/javascript 3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript <!--CHANGE LINKS BELOW TO YOUR OWN--> <a href="javascript:jumpto('http://www.google.com')">Google</a> | <a href="javascript:jumpto('http://www.yahoo.com')">Yahoo</a> | <script language="javascript"> <!-- //Specify display mode (0 or 1) //0 causes document to be displayed in an inline frame, while 1 in a new browser window vardisplaymode=0 //if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown variframecode='<iframe id="external" style="width:99%;height:400px" src="http://www.google.com"></iframe>' /////NO NEED TO EDIT BELOW HERE//////////// if (displaymode==0) document.write(iframecode) function jumpto(inputurl){ if (document.getElementById&&displaymode==0) document.getElementById("external").src=inputurl else if (document.all&&displaymode==0) document.all.external.src=inputurl else{ if (!window.win2||win2.closed)
  • 60. win2=window.open(inputurl) //else if win2 already exists else{ win2.location=inputurl win2.focus() } } } //--> </script> Penerangan : -Google: Gantikan dengan nama yang anda mahu -www.google.com: Gantikan dengan website yang anda mahu 4. Save, klik preview dan jika berpuas hari, klik save.
  • 61. BAB 23 : Cara Letak Linkwithin Dalam Blog 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.
  • 62. 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 4. Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik add widget
  • 63. 5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)
  • 64. BAB 24 : Tukar Ayat Asal Linkwithin Bagi sesiapa yang menggunakan linkwithin pada blog, sememangnya akan muncul satu ayat yang telah di'set'kan secara automatik semasa meletakkan gadget tersebut. Bagi bahasa melayu, akan keluar ayat, "Anda mungkin juga meminati" dan bagi english "You may also like these stories".. Ini adalah yang biasa, Dan ini pula yang agak kurang biasa.:) 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
  • 65. 3. Daripada kod yang dipaparkan, tambah kod ini dibahagian atasnya <script>linkwithin_text='AYAT ANDA DISINI'</script> Penerangan : Tukarkan "AYAT ANDA DISINI" dengan apa-apa yang anda kehendaki.:) Kod anda sepatutnya kelihatan seperti ini. 4. Selepas selesai, klik save untuk lihat kesannya..
  • 66. BAB 25 : Ketahui Bilangan Pengunjung Online Dalam Blog Berapakah bilangan pelawat yang berada dalam blog anda ketika ini.?Mungkin amat sukar untuk anda menjangkakannya.Kalau anda mempunyai statistik blog, mungkin anda tahu mengikut hari ataupun jam, tetapi anda tidak tahu berapa bilangan pengunjung dalam keadaan masa sebenar. 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 log, 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. 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. 4. Save, dan lihat hasilnya.
  • 67. BAB 26 :Ubah Lebar Ruangan Komen Mengubah lebar ruangan komen bagi sesebuah blog dapat memberi ruang yang lebih banyak kepada pengunjung (yang suka komen panjang²) dan juga dapat membuatkan ruangan komen kelihatan sama besar dengan ruangan entri. Tutorial ini akan menunjukkan cara untuk melebarkan ruangan komen, dan tutorial ini hanya untuk blog yang menggunakan embedded comment (komen yang terletak pada bahagian bawah entri) . Sebelum Selepas
  • 68. Berikut adalah langkah-langkah yang diperlukan untuk mengubah lebar ruangan komen pada blog. 1. Login akaun blogger anda, dari dashboard > layout > edit html, kemudian klik pada expand widget templates. 2. Pda keyboard anda, klik ctrl + f untuk menghidupkan fungsi find kemudian cari kod berikut. <iframeallowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/> Penerangan : Tukar nilai 100% kepada nilai pixel untuk lebar yang anda kehendaki. contoh, jika anda mahu lebar 500px, kodnya adalah <iframeallowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='500px'/> 3. Save hasil kerja anda dan lihat hasilnya.
  • 69. BAB 27 : Cara Buat Dropdown Menu Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk meletakkan pelbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link kawan², link rujukan, link tips dan pelbagai lagi. Contoh dropdown menu adalah seperti berikut : Tutorial untuk membuat dropdown menu ini adalah seperti berikut. 1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget > HTML/javascript 2. Copy code berikut ke dalam ruangan html/javascript. (jika tidak faham rujuk sini) <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> penerangan : Link 1: Masukkan link untuk dibuka Text 1: Masukkan perkataan/ayat untuk link Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select> 3. Apabila selesai, save hasil kerja anda.:) TAMBAHAN: Untuk kod di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada page/window yang berlainan, sila tukarkan kod: <select onChange="document.location.href=this.options[this.selectedIndex].value;"> kepada kod ini. <select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
  • 70. BAB 28 : Letak Website Lain Dalam Entri Sebelum ini sudah terdapat tutorial yang menerangkan bagaimana untuk meletakkan website dalam blog. Untuk tutorial tersebut memerlukan anda untuk copy paste code dalam ruangan html/javascript. Tutorial tersebut sesuai untuk meletakkan website lain secara kekal di dalam blog yang akan dilihat setiap masa walau page mana yang dibuka dalam blog tersebut. Tutorial ini pula akan menunjukkan cara untuk meletakkan website lain dalam entri blog dengan cara paling mudah.. 1. Ketika sedang menaip sesuatu artikel, anda ingin memasukkan link sebagai rujukan pembaca. Highlight pada ayat yang anda ingin kan,dan klik button link pada menu yang di atas.Contoh seperti gambar di bawah.
  • 71. 2.Paparan berikut akan keluar,copy url yang ingin dimasukkan dan paste pada web address 3. Klik publish
  • 72. BAB 29 : Membuat teks bergerak seperti kiosk 1.Pergi laman web http://www.textspace.net/lcd_text -Pilih salah satu- 2. Tulis ayat yang diinginkan dan pilih apa yang anda mahukan pada font option,speed untuk kelajuan teks,frame width untuk lebar dan frame option,klik make my text
  • 73. 3. Hasilnya seperti diatas 4. Klik get the code dan copy salah satu code yang diberikan
  • 74. 5. Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget 6. Cari HTML/javascript. Kemudian apabila sudah buka, paste code di situ. 7. Siap dan save.
  • 75. BAB 30 : Jadikan video dari youtube sebagai mp3 Youtube memainkan peranan penting untuk seseorang blogger untuk memaparkan video yang tertentu. Bagi kategori muzik, video dapat menambahkan lagi seri sesebuah lagu. Walau bagaimanapun, ada ketikanya paparan videonya tidak diperlukan, samada disebabkan video tersebut memaparkan gambar statik atau mungkin juga pemilik blog hanya ingin mempersembahkan 'lagu' sahaja kepada pengunjung. 1. Dapatkan link video (URL) dari youtube. Contoh : http://www.youtube.com/watch?v=_eYj0B5LwOo 2. Buang 'watch?' dan gantikan '=' kepada '/' Contoh : http://www.youtube.com/watch?v=_eYj0B5LwOo kepada http://www.youtube.com/v/_eYj0B5LwOo 3.Masukkan link yang anda telah ubah ke dalam kod berikut. <embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave- flash" src="LINK DISINI"></embed> contoh untuk kod di atas. <embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave- flash" src="http://www.youtube.com/v/_eYj0B5LwOo"></embed>
  • 76. BAB 31 : Letak Facebook Share Button dalam Blog Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook. Dengan hanya beberapa klik sahaja, ianya sudah siap sedia untuk dikongsi di profile facebook. selain itu penggunaan facebook share button ini dapat manarik lebih ramai pelawat ke sesebuah blog. Contoh penggunaan facebook share button (selain blog ini) adalah di unwanted86 dan juga ohbest. Cara untuk memasukkan facebook share button ini adalah seperti berikut. 1. Pilih jenis facebook share button yang anda kehendaki, kemudian copy code yang diberi. Code untuk Full : <div style="float:right;padding:4px;"> <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/> </div>
  • 77. Code untuk Compact : <div style="float:right;padding:4px;"> <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/> </div> 2. Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template) 3. Menggunakan fungsi find (ctrl + F), cari kod ini. <div class='post-header-line-1'/> jika tidak jumpa, cari kod ini. <div class='post-header-line-1'> 4. Selepas itu paste kod share button (langkah 1) DIBAWAH kod yang anda cari (langkah 3) 5. Save template dan lihat hasilnya.
  • 78. BAB 32: Membuat title bergerak 1. Dari dashboard > Design > Add a gadget > Html/Javascript 2. Copy dan paste code berikut dalam ruangan HTML/Javascript <script language=javascript> msg = "Title Blog Anda"; msg = "..." + msg;pos = 0; function scrollMSG() { document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++; if (pos > msg.length) pos = 0 window.setTimeout("scrollMSG()",200); } scrollMSG(); </script> Note: Tukarkan 'Title Blog Anda' dengan apa sahaja yang anda mahu. 3. Save dan lihat hasilnya. -TAMAT-