nota blog17022014 (2)

8/13/2019 nota blog17022014 (2)

1/3426 Oktober 2013

TUTORIAL PEMBINAAN BLOG

KURSUS ASAS PEMBINAAN BLOG 5S

17 FEBRUARI 2014 (ISNIN)

8/13/2019 nota blog17022014 (2)

2/34

Kursus Pendek Pembinaan Blog

26 Oktober 2013

PEMBINAAN BLOG

1. Melalui google, taip eblogger dan klik search2. Klik padawww.blogger.com

Untuk pengguna yang tidak mempunyai akaun

gmail,hendaklah klik pada butang SIGN UP

Jika anda mempunyai akaun gmail, anda boleh

mendaftar masuk secara terus. Isi email danpassword kemudian klik Sign In
http://www.blogger.com/http://www.blogger.com/http://www.blogger.com/http://www.blogger.com/

8/13/2019 nota blog17022014 (2)

3/34


26 Oktober 2013

3. Jika anda tidak mempunyai akaun google(gmail) dan anda klik butang Sign insepertirajah sebelum ini, paparan di bawah akan dipaparkan.

Isi semu

makluma

yang

diperluk

dan klik

Next ste

8/13/2019 nota blog17022014 (2)

4/34


26 Oktober 2013

4. Langkah seterusnya, anda dikehendaki memilih gambar profil anda. Langkah ini bolehdilangkau dengan mengklik butang Next step. Jika anda memilih untuk memuatnaik

gambar, klik Add a photo

Klik Next step

untuk meneruskan

langkah berikutnya

Untuk

mengemaskini

gambar, klik Edi

photo

8/13/2019 nota blog17022014 (2)

5/34


26 Oktober 2013

5. Paparan di bawah akan dipaparkan sekiranya anda berjaya mendaftar akaun gmail andadan mengemaskini gambar profil anda.

Untuk meneruskan langkah berikutnya, klik

Continue to Blogger

8/13/2019 nota blog17022014 (2)

6/34


26 Oktober 2013

6. Klik New Blog untuk membuat blog baru

7. Seterusnya paparan di bawah akan dipaparkan.8. Pengguna hendaklah mengisi title(merujuk pada Header blog ), address(url yang dipilih)

dan template.9. Klik Create bloguntuk meneruskan langkah seterusnya.

8/13/2019 nota blog17022014 (2)

7/34


26 Oktober 2013

10.Rajah dibawah merupakan dashboard dimana ia merupakan titik permulaan blog. Disinisemua blog anda disenaraikan, dan anda boleh klik pada ikon di dalam halaman ini untuk

melaksanakan pelbagai tindakan ke atas blog seperti:

PAPARAN HALAMAN POSTS

Klik pada ikon

pensil oren untuk

menulis post baru

Klik New

Blog

untuk

membuat

blog baru

Untuk meliha

blog, klik Vi

blog

Ikon ini merupakan

capaian pantas dashboard

blog

8/13/2019 nota blog17022014 (2)

8/34


26 Oktober 2013

PAPARAN HALAMAN PAGES

PAPARAN HALAMAN COMMENTS

8/13/2019 nota blog17022014 (2)

9/34


26 Oktober 2013

PAPARAN HALAMAN GOOGLE ++

PAPARAN HALAMAN STATS

8/13/2019 nota blog17022014 (2)

10/34


26 Oktober 2013

PAPARAN HALAMAN EARNINGS

8/13/2019 nota blog17022014 (2)

11/34


26 Oktober 2013

PAPARAN HALAMAN LAYOUT

8/13/2019 nota blog17022014 (2)

12/34


26 Oktober 2013

PAPARAN HALAMAN TEMPLATE

PAPARAN HALAMAN SETTINGS

8/13/2019 nota blog17022014 (2)

13/34


26 Oktober 2013

TULIS CATATAN (POST) ANDA

1. Klik ikon pensil oren untuk menulis post baru.

2. Paparan post baru seperti gambar di bawah.Isikan tajuk post anda

Ruang bekerja post

What you see

is what you

get toolbar

Klik butang butang

Publish untuk

menerbitkan post

Klik butang

Previewuntuk

melihat post anda

Untuk kembali

ke menu utama,

klik butang

8/13/2019 nota blog17022014 (2)

14/34


26 Oktober 2013

PENAMBAHAN IMEJ

1. Klik ikon Insert image.

2. Popup pemilihan fail akan dipaparkan seperti gambar di bawah.

Klik butangChoose files

8/13/2019 nota blog17022014 (2)

15/34


26 Oktober 2013

3. Setelah anda memilih gambar,paparan di bawah dipaparkan, pilih gambar tersebutdengan mengklik gambar dan klik butang Add selected untuk menambah gambar di

ruang bekerja post.

4. Paparan di bawah menunjukkan muatnaik gambar berjaya

Klik butang Cancel untuk

membatalkan muatnaik gambar

Untuk membuang gambar

Menambah keterangan

gambar

Menentukan

kedudukan

gambar

Menentukan

saiz gambar

8/13/2019 nota blog17022014 (2)

16/34


26 Oktober 2013

PENAMBAHAN VIDEO

1. Klik ikon Insert a video

2. Paparan di bawah dipaparkan apabila anda klik ikon Insert a video

Hanya video yang berformat AVI, MPEG, QuickTime, Real dan Windows Media sahajadan saiz video kurang daripada 100MB sahaja diterima.

Bergantung kepada saiz video, ia akan mengambil masa kira-kira lima minit. Apabila iaselesai, video tersebut akan muncul ruang bekerja post.

8/13/2019 nota blog17022014 (2)

17/34


26 Oktober 2013

3. Jika anda berjaya memuatnaik video, video tersebut akan dipaparkan di ruang bekerja postseperti rajah di bawah.

8/13/2019 nota blog17022014 (2)

18/34


26 Oktober 2013

PEMILIHAN WARNA

1. Layari http://html-color-codes.info/2. Paparan laman tersebut seperti di bawah

Untuk mendapat kod warna,

anda boleh menyalin kod

tersebut di sini

8/13/2019 nota blog17022014 (2)

19/34


26 Oktober 2013

MEMBUAT MENU DROP DOWN BLOG

1. Layari http://cssmenumaker.com/2. Paparan laman tersebut seperti di bawah

Klik Get

Started for free

untuk mula

membuat menu

dropdown

Pilih type:

dropdown

Setelah membua

pilihan, klik pad

gambar tersebut

8/13/2019 nota blog17022014 (2)

20/34


26 Oktober 2013

3. Paparan di bawah dipaparkan setelah anda mengklik gambar dropdown menu

Klik

Customize/

Download

Senarai menu

dropdown yang

ingin dipaparkan

Untuk menambah menu, isikan nama menu

di ruangan kosong dan klik +

Untuk mengubah nama menu dropdown, isi ruangan Title

dan link untuk menghubungkan halaman tersebut

Klik Previewuntuk

mendapatkan gambaran

sebenar menu dropdown

8/13/2019 nota blog17022014 (2)

21/34


26 Oktober 2013

Laman

utama

Kenali kami

8/13/2019 nota blog17022014 (2)

22/34


26 Oktober 2013

4. Dengan menggunakan salinan kod pengaturcaraan HTML, letakkan ia di bawah header( klik Template > Edit HTML > Search : header)

5. Salin kod CSS

Klik CSS untuk mendapatkan

rekabentuk dan kod menu dropdown

8/13/2019 nota blog17022014 (2)

23/34


26 Oktober 2013

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul {

background: url(highlight-bg.png) repeat; background-color: #3D192B;padding-bottom: 3px;

font-family: 'Open Sans', sans-serif;font-weight: 600; font-weight: 500;

}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,

#cssmenu > ul:after {content: '';display: table;

}#cssmenu:after,

#cssmenu > ul:after {clear: both;

}#cssmenu {

width: auto;zoom: 1;}#cssmenu > ul {

background: url(menu-bg.png) repeat; background-color: #d8bfcc;margin: 0;

padding: 0;position: relative;

}#cssmenu > ul li {

margin: 0;padding: 0;

list-style: none;

}#cssmenu > ul > li {

float: left;position: relative;

}#cssmenu > ul > li > a {padding: 23px 26px; padding: 15px 15px;

display: block;color: white;font-size: 13px;text-decoration: none;

text-transform: uppercase;text-shadow: 0 -1px 0 #0d0d0d;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);line-height: 18px;

}

#cssmenu > ul > li:hover > a {

background: url(highlight-bg.png) repeat; background-color: #EBDAE3;

text-shadow: 0 -1px 0 #97321f;

text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);}#cssmenu > ul > li > a > span {

line-height: 18px;

}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active {background: url(hover.png) repeat; background-color: #d65b99;

}

color : #66444b;font-size:15px;

font-family: schoolbell;

line-height: 10px;

8/13/2019 nota blog17022014 (2)

24/34

8/13/2019 nota blog17022014 (2)

25/34


26 Oktober 2013

4. Dengan menggunakan salinan kod CSS, letakkan ia sebelum penutup skin( klik Template > Edit HTML > Search : skin)

Klik Save Template Klik Preview Template

Klik View blog

8/13/2019 nota blog17022014 (2)

26/34


26 Oktober 2013

PENAMBAHAN HALAMAN DI DALAM MENU DROPDOWN

1. Bina post baru dan paparkan ia di dalam blog anda.2. Layari blog anda dan klik pada post tersebut.3. Salin URL post tersebut.

4. Dalam dashboard blog anda, klik Template > Edit HTML

8/13/2019 nota blog17022014 (2)

27/34


26 Oktober 2013

5. Cari lokasi menu css di dalam kod html (berada di bawah )

6. Letakkan URL tersebut di dalam menu yang dikehendaki( gantikan # di dalam dengan URL post)

Klik Save Template Klik Preview Template

Klik View blog

8/13/2019 nota blog17022014 (2)

28/34


26 Oktober 2013

MENAMBAH LINK (CAPAIAN PAUTAN) DI DALAM BLOG

1. Klik Layout > Add a Gadget

2. Klik Link List

3. Isikan Title, New Site Name( tajuk pautan tersebut) dan New Site URL(URL laman webpautan) dan klik Save

Untuk membuat lebih dari

satu pautan, anda boleh

mengklik Add Link dan

mengisi semula ruangan

New Site Name dan New

Site Url

8/13/2019 nota blog17022014 (2)

29/34


26 Oktober 2013

MENUKAR REKABENTUK BLOG

1. Di dalam dashboard, klik Template.

2. Kemudian klik Edit HTML

8/13/2019 nota blog17022014 (2)

30/34


26 Oktober 2013

2. Untuk memulakan dengan Blogger Template Designer, pilih template untuk blog anda darisalah satu template profesional yang direka.

3. Setiap template muncul sebagai thumbnail besar yang apabila diklik dan paparannya bolehdilihat di bawahnya.

Apabila anda mengklik template baru , ia akan memadam apa-apa penyesuaian yanganda buat pada template sebelumnya.

4. Walaupun anda telah memilih template, anda masih boleh mengubahnya dengan mengklikBackground.

Klik Remove image untuk membuang

gambar latarbelakang dan memilih warn

latar belakang yang baru

Edit kedudukan gambar

latarbelakan

8/13/2019 nota blog17022014 (2)

31/34


26 Oktober 2013

5. Seterusnya, anda boleh mengklik Adjust widths untuk mengubah saiz layout blog anda

Anda boleh memilih latarbelakang yang lain

dengan mengklik bahagian ini

Pilih latarbelakang yangdikehendaki dan klik

Done

8/13/2019 nota blog17022014 (2)

32/34


26 Oktober 2013

6. Melalui Layout, anda boleh menyusun kedudukan ikon dan kandungan blog anda.

Keseluruhan rekebentuk blog kedudukan bahagian bawah blog

7. Rajah di bawah merupakan platform untuk anda mengubah rekabentuk blog anda mengikutkreativiti sendiri.

8/13/2019 nota blog17022014 (2)

33/34


26 Oktober 2013

MENAMBAH APLIKASI JAM WIDGET

1. Layari http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html

Pilih jenis jam dikehendaki

Isikan tajuk widget, tinggi dan lebar widget

yang dikehendaki

Klik pada butang "Generate"

Salin kod tersebut

8/13/2019 nota blog17022014 (2)

34/34

nota blog17022014 (2)

Documents