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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
26 Oktober 2013
PAPARAN HALAMAN PAGES
PAPARAN HALAMAN COMMENTS
8/13/2019 nota blog17022014 (2)
9/34
Kursus Pendek Pembinaan Blog
26 Oktober 2013
PAPARAN HALAMAN GOOGLE ++
PAPARAN HALAMAN STATS
8/13/2019 nota blog17022014 (2)
10/34
Kursus Pendek Pembinaan Blog
26 Oktober 2013
PAPARAN HALAMAN EARNINGS
8/13/2019 nota blog17022014 (2)
11/34
Kursus Pendek Pembinaan Blog
26 Oktober 2013
PAPARAN HALAMAN LAYOUT
8/13/2019 nota blog17022014 (2)
12/34
Kursus Pendek Pembinaan Blog
26 Oktober 2013
PAPARAN HALAMAN TEMPLATE
PAPARAN HALAMAN SETTINGS
8/13/2019 nota blog17022014 (2)
13/34
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
26 Oktober 2013
Laman
utama
Kenali kami
8/13/2019 nota blog17022014 (2)
22/34
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Kursus Pendek Pembinaan Blog
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
Top Related