TUTORIAL BUAT BLOG

Pernahkah anda terpikir 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.skjs2u.blogspot.com')">skjs2u</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
var displaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<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 :
-skjs2u: Gantikan dengan nama yang anda mahu
-http://skjs2u.blogspot.com: Gantikan dengan website yang anda mahu

Nota:sebelum anda mengedit template adalah disarankan supaya membuat salinan template terlebih dahulu dengan mengklik Download Full Template pada halaman Layout--- Edit HTML
Pindahkan widget yang ada pada footer pada mana mana side bar atau bahagian yang lain.

1.Pada tetingkap Layout pilih edit HTML
2.cari kod berikut

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

(Nota:pada sesetengah template selain dari footer-wrapper anda mungkin jumpa footer atau footer-section)



1.Tukarkan kesemua bermula dari <div> ke </div> dengan kod berikut:

<div id='footer'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

2.Kemudian save template anda.

Ini adalah cara yang ringkas untuk meletak menu bar melintang pada blog.Kebanyakkan menu bar diletakkan dengan kita perlu mengubahsuai pada template dengan meletakkan kod padanya.Tapi untuk menu bar ini cukup meletakkannya pada add gadget.




Daripada paparan blog anda klik pada customize - Page Elements - Add a gadget - HTML/JAVASCRIPT

| <a href= "http://namabloganda.blogspot.com/pagename">label </a> |




kod ini adalah sebagai mana cara anda masuk masukkan link pada blog.Tanda garis menegak yang ada
pada link tu terletak sekali dengan butang pada butang backslash(\) pada keyboard.
Tujuan nya adalah untuk meletak pembahagi antara ruang seperti: HOME | CONTACT |

setelah meletak kod tadi,jangan lupa save terlebih dahulu.selepas itu seret dan letakkan dibawah header



Cara diatas cuma teks sahaja dan tidak nampak macam butang navigasi.untuk lebih menarik sedikit kita boleh gunakan dalam bentuk table.Cara membuat table ini ada saya terangkan dalam entri sebelum ini.
contohnya seperti dibawah ini.

(boleh ditambah dibawah ini jika ada lagi link hendak dimasukkan)

Home

Blog Tutorial

Pautan Kawan-kawan

Masukkan kod ini

<table border="1" style="width: 300px;"><tbody>
<tr bgcolor="#e0f8e0">
<td align="center" ><a href="URL 1">tab 1</a></td>
<td align="center"><a href="URL 2">tab 2</a></td>
<td align="center"><a href="URL 3">tab 3</a></td>
(boleh ditambah dibawah ini jika ada lagi link hendak dimasukkan)
</tr></tbody></table>


bg color #e0f8e0 adalah kod warna boleh tukar mengikut kehendak anda dan kod boleh disemak disini.
width:300px adalah lebar column--tukarkan mengikut kesesuaian anda.
URL 1 hingga URL 3--masukkan url anda
tab1 hingga tab 3 teks yang akan dipaparkan pada jadual.

Selamat mencuba.

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 http://www.linkwithin.com/learn

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

Untuk mengingati kod2 HTML bukannya mudah...Jika kita ingin membina blog kita sendiri, kita mesti berusaha untuk mengenal dan mengingatinya... Cara yang mudah kita 'copy' dan 'paste' sahaja kod2 yang kita perlukan..
Sedikit sebanyak tutorial ini dapat membantu anda..

1. Membuat kutipan teks

<blockquote>Masukkan teks anda di sini</blockquote>

Hasil:

Masukkan teks anda di sini

2. Membuat teks teletype (untuk membezakan tulisan biasa dengan kode html)

<tt>Masukkan teks anda di sini</tt>

Hasil:

Masukkan teks anda di sini



3. Membuat teks serong

<i>Masukkan teks anda di sini</i>

Hasil:

Masukkan teks anda di sini

4. Membuat teks tebal

<b>Masukkan teks anda di sini</b>

Hasil:

Masukkan teks anda di sini

5. Membuat garisan di tengah tulisan

<strike>Masukkan teks anda di sini</strike>

Hasil:

Masukkan teks anda di sini

6. Membuat garisan di bawah tulisan

<u>Masukkan teks anda di sini</u>

Hasil:

Masukkan teks anda di sini

7. Membuat teks ke kiri

<left>Masukkan teks anda disini</left>

Hasil:

Left

8.Membuat teks ke tengah

<center>Masukkan teks anda disini</center>

Hasil:

Center

9. Membuat teks ke kanan

<right>Masukkan teks anda disini</right>

Hasil:

Right

10. Membuat Bullet Numberring

<li>Masukkan teks anda di sini</li>

Hasil:

Masukkan teks anda di sini

Supaya permulaan tulisan ke tengah sikit

<ul><li>Bullet</li></ul>

Hasil:

• Bullet

11. Membuat teks lebih besar

<big>Masukkan teks anda di sini</big>

Hasil:

Masukkan teks anda di sini

12. Membuat teks lebih ke kecil

<small>Masukkan teks anda di sini</small>

Hasil:

Masukkan teks anda di sini

13. Membuat teks agak ke bawah

_{Masukkan teks anda di sini}

Hasil:

_{Masukkan teks anda di sini}

Gunakan kode di bawah ini untuk merubah warna tulisan posting.

<font color="#00FFFF">Merubah Warna Tulisan Pada Blogger</font>

Jika ingin mengganti dengan kode warna yang lain, KAU tinggal ganti kode warnanya (tulisan yang saya cetak tebal). Hasil dari contoh di atas adalah seperti ini...

Merubah Warna Tulisan Pada Blogger

Perkataan Read more atau baca seterusnya adalah biasa terdapat pada mana blog dan web.Read more ,tapi kali ini agak berbeza dengan yang terdahulu kerana sistem auto Read more kali ini,kita tidak perlu lagi menulis kod sebelum posting seperti <div class="fullpost"> dan sebahagian lagi setelah <div class="fullpost"> kerana dengan sistem auto read more ini semua posting kita akan terpotong dengan sendirinya. Selain itu juga sekiranya terdapat gambar dalam posting,ia terpapar dalam bentuk thumbnail pada halaman hadapan secara Automatik,tanpa perlu menukar apa apa setting lagi.Dibawah ini adalah contoh paparan Auto read more ini:

Nota : Jika anda pernah memasang read more sebelum ini ,anda perlu kembalikan ia seperti asal.Caranya ialah dengan Klik menu Layout dan pilih Edit HTML.Tandakan pada Expand Template Widget.Setelah itu delete kod read more lama anda yang berwarna merah seperti dibawah ini :

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




<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>

</b:if>

<div style='clear: both;'/>



Seterusnya ikuti langkah berikut:

1. Setelah anda login ke blogger, seterusnya masuk kemenu Layout dan pilih Edit HTML. Klik pada kotak"expand widget template" dan cari kod </head>.

2. Copy dan paste kod dibawah ini tepat di atas kod </head> yang anda cari tadi.



<script type='text/javascript'>

var thumbnail_mode = "float";

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>


<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>


3. kemudian anda cari kod <data:post.body/>. bila anda jumpa kod tersebut. gantikan, kod <data:post.body/> dengan kod dibawah ini.


<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE- <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


4.Kemudian klik save
5. Selesai.


Nota: : Kod yang mempuyai cetak tebal(bold) dan berwarna hijau, pada kod diatas mempunyai maksud seperti berikut.


var thumbnail_mode = "float"; (menunujukkan posisi gambar thumbnail pada kedudukan di sebelah kiri.

summary_noimg = 250; (menunjukkan berapa banyak huruf yang akan dipaparkan dalam posting anda tanpa gambar)gantikan mengikut keinginan anda)

summary_img = 250; (menunjukkan berapa banyak huruf yang akan dipaparkan dalam posting anda yangtanpa terdapat gambar) gantikan mengikut keinginan anda)

img_thumb_height = 120; (ukuran tinggi gambar yang akan dipaparkan)
img_thumb_width = 120; (ukuran lebar gambar yang akan dipaparkan)
READ MORE = gantikan dengan perkataan seperti baca seterus nya,baca lagi,seterunya dll.

Membuat "read more" atau baca seterusnya pada blogger baru

Caranya:

* klik link Layout kemudian masuk ke Edit HTML

* Untuk mengedit template secara keseluruhan, anda harus aktifkan Expand Widget Templates

* Masukkan kod berikut sebelum tag </head> atau tepat sesudah kod
} ]]>seperti ini:

<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>


Seterusnya supaya posting terpotong, cari kod <p><data:post.body/></p> dalam template anda dan tambahkan kod berikut tepat dibawahnya:

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

upaya terpotong, setiap kali anda posting, klik pada bahagian teks pada posting dimana anda ingin tulisan Read More.. muncul, dan taipbaki posting sampai penghujung dan taip .
Untuk menambahkan kod ini, ketika posting anda mestilah dalam mod Edit HTML bukan Compose

Sebelum ini saya ada memuatkan artikel bagaimana membuat teks berkelip.Kali ini saya akan tunjukkan pula cara bagaimana hendak membuat teks berjalan atau pun marquee text pada blog.

Berikut adalah kod yang kita gunakan:

<marquee>Teks bergerak</marquee>

Teks bergerak



Marquee yang biasa(standard) bergerak dari kanan ke kiri,kita boleh mengubahnya kepada beberapa bentuk gerakan dan keadaan dengan tambahan kod seperti dibawah


bgcolor=warna latar belakang
direction=arah gerakan (left,right,up.down)
behavior=karekter pergerakan (scroll,slide,alternate)
scroll(teks berputar)
slide(teks bergerak sekali dan berhenti)
alternate(teks bergerak dari kiri ke kanan dan berpatah balik)
Title=perkataan muncul semasa mouse berada di atas teks
Scrollamount=meletak kecepatan gerakan
Scrolldelay=mengatur tempoh masa
Loop=mengatur jumlah

Dari arah kiri ke kanan

<marquee behavior="alternate" >Arah kiri dan kekanan kemudian berpatah balik</marquee>

Arah kiri dan kekanan kemudian berpatah balik

Dari kiri ke kanan dengan tempoh masa "11"


<marquee direction="right" scrollamount="11" >dari kiri ke kanan dengan tempoh masa 11</marquee>

dari kiri ke kanan dengan tempoh masa 11

Halakan pointer mouse pada teks dan ia berhenti

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">arahkankan mouse pada teks,berhenti</marquee>

arahkankan mouse pada teks,berhenti

Jika ingin buat turun atau naik gantikan direction="down" atau "up"

<marquee bgcolor="#0000FF" direction="down" height="80" width="70%">dari atas ke bawah</marquee>

dari atas ke bawah

<marquee width="70%" bgcolor="#DF01D7">dari kanan ke kiri</marquee>

dari kanan ke kiri

Tulisan yang berkelip pada blog banyak digunakan bagi menarik minat pengunjung untuk melihat dan klik link pada tulisan tersebut.
cara nya amat mudah cuma letakkan kod blink pada depan dan belakang teks yang hendak
contohnya:

<blink> Selamat Datang ke SK Ijok</blink>;

HASILNYA:

Selamat Datang ke SK Ijok



Untuk meletakkan link pada teks:

<blink><a href="http://skjs2u.blogspot.com/2010/04/membuat-teks-berkelipblink.html"target="_blank">Selamat Datang ke SK Ijok</a></blink>


HASILNYA:

Selamat Datang ke SK Ijok

Nota:Hanya sesuai untuk browser tertentu sahaja:Netscape(sesetengah version sahaja)dan Mozilla Firefox .Internet Explorer tidak support tags ini.

Memasang scroll bar pada blog tujuannya yang utama adalah bagi menjimat kan ruangan.Cara membuat nya amat mudah dengan hanya mengikut langkah dibawah ini.

1.Masuk ke dashboard,kemudian pilih design-->>Page elements
2.Kemudian pilih add gadget--->>HTML/JAVASCRIPT
Masukkan kod berikut:

<div style="overflow:auto; padding:5px; width:170px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">masukkan teks atau kod yang dikehendakki disini</div>



Saiz kotak scroll boleh ditukar pada width(lebar)dan height)tinggi.


Untuk membuat menu scroll seperti pada blog ini:
kod nya adalah seperti dibawah ini :

<div class="widget-content">
<ul style="width: 145px; height: 180px; background-color: 000080; color: ffa000; font-family: verdana; font-size: 10px; font-weight: bold; text-align: left; border: 0px; overflow: auto;">

<li><a href="http://teknikbuatblog.blogspot.com/2010/03/cara-membuat-blog.html" target="_blank">Cara membuat blog</a></li>

masukkan link seterusnya....

</li></ul></div>


Jika hendak letakkan nombor dihadapan senarai gantikan ul kepada ol
ul akan memaparkan bullet dihadapan

Kod warna oren untuk kod scroll
Kod warna hijau adalah link dan senarai kandungan yang hendak paparkan

3.kemudian save untuk melihat hasilnya.

Template yang standard kebiasaanya tidak meletakkan add widget pada bahagian header yang mana menyebabkan kita tidak boleh memasang gambar sebagai header.Untuk membolehkan gambar dipasang sebagai header kita perlu membuat perubahan pada kod template.




Untuk membuatnya:

Cari kod ini pada template anda


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>

gantikan kod diatas menjadi seperti dibawah ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>

Nota: maxwidgets boleh anda gantikan bilangan yang diperlukan.kemudian klik save template.

Untuk meletakkan gambar upload dulu ke photobucket.com dan salin kod HTML nya.
Kemudian masuk pada dashboard=>design=>page elements.pilih add a HTML/javascript dan masukkan kod dari photobucket tadi atau pada add a gadget pilih picture=>image=> from your computer.klik pada browse=>pilih lokasi imej disimpan.
Sesudah dimasukkan klik butang save.

Kode warna yang terpilih :

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





Anda letak background ke, ubah colour ke, letak fungsi 'read more' atau pape, kebanyakkannya adalah di template.
Oleh itu adalah perlu untuk seseorang blogger akan backup dahulu template blog sebelum melakukan sebarang pengubahsuaian ataupun sebelum menukar template baru.
Tujuan backup template adalah untuk backup jika sebarang perubahan kod yang diaplikasikan tidak menjadi.

Tutorial untuk backup template bagi blog adalah seperti berikut.


1)Login seperti biasa. Kemudian dari dashboard klik layout



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

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.




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)

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

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



2)Setelah anda klik 'layout', 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.:).

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

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



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 samada video tersebut sudah boleh dimainkan atau tidak.

Entri anda nampak menarik jika anda memasukkan gambar.Pengunjung sesebuah blog suka membaca entri sesebuah blog yang juga mempunyai gambar walaupun sekeping

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

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

Post entri dalam blog merupakan perkara yang paling asas bagi seorang blogger.

Dalam entri anda akan menaip apa yang anda mahu sampaikan samada 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 link www.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)

Ikuti langkah-langkah tersebut....

Sebelum memulakan pendaftaran untuk akaun blogspot, anda mestilah mempunyai akaun google dahulu. Akaun lain pun boleh, tetapi untuk jangka masa panjang, ada akaun google akan lebih memudahkan memandangkan blogger.com adalah produk dari google.

Jika anda sudah mempunyai akaun google, boleh sign dahulu atau klik disini.http://mail.google.com/mail/?hl=en&tab=im.

Jika anda masih belum mempunyai akaun google, sila daftarkan dahulu disini untuk memudahkan proses pendaftaran akaun blogspot.

Berikut adalah langkah-langkah yang diperlukan untuk mendaftar akaun blogspot.

1. Buka link www.blogger.com

2. Apabila paparan sudah keluar, klik pada 'create a blog'

3. Seterusnya masukkan maklumat yang dikehendaki kemudian klik 'continue'.

4. Kemudian masukkan blogname dan juga blog address

* Blog name lebih merujuk kepada trademark sesebuah blog
* Blog address adalah digunakan oleh pengunjung untuk membuka blog anda. Blog address antara perkara paling penting bagi sesebuah blog. Untuk memudahkan pemahaman, sila rujuk Tips Pemilihan URL Untuk Blog.

5. Pilih template yang anda rasa sesuai, kemudian klik 'continue'

6. Siap. Anda sudah mempunyai akaun blogspot anda sendiri ada boleh mula untuk menaip entri pertama anda.:)