You are on page 1of 34

TUTORIAL PEMBINAAN BLOG KURSUS ASAS PEMBINAAN BLOG ORGANISASI 26 OKTOBER 2013 (SABTU)

26 Oktober 2013

Kursus Pendek Pembinaan Blog

PEMBINAAN BLOG 1. Melalui google, taip eblogger dan klik search 2. Klik pada www.blogger.com

Jika anda mempunyai akaun gmail, anda boleh mendaftar masuk secara terus. Isi email dan password kemudian klik Sign In

Untuk pengguna yang tidak mempunyai akaun gmail,hendaklah klik pada butang SIGN UP

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

Isi semua maklumat yang diperlukan dan klik Next step

26 Oktober 2013

Kursus Pendek Pembinaan Blog

4. Langkah seterusnya, anda dikehendaki memilih gambar profil anda. Langkah ini boleh dilangkau 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 Edit photo

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

Untuk meneruskan langkah berikutnya, klik Continue to Blogger

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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 blog untuk meneruskan langkah seterusnya.

26 Oktober 2013

Kursus Pendek Pembinaan Blog

10. Rajah dibawah merupakan dashboard dimana ia merupakan titik permulaan blog. Disini semua blog anda disenaraikan, dan anda boleh klik pada ikon di dalam halaman ini untuk melaksanakan pelbagai tindakan ke atas blog seperti:

Klik pada ikon pensil oren untuk menulis post baru Klik New Blog untuk membuat blog baru

Ikon ini merupakan capaian pantas dashboard blog

Untuk melihat blog, klik View blog

PAPARAN HALAMAN POSTS

26 Oktober 2013

Kursus Pendek Pembinaan Blog

PAPARAN HALAMAN PAGES

PAPARAN HALAMAN COMMENTS

26 Oktober 2013

Kursus Pendek Pembinaan Blog

PAPARAN HALAMAN GOOGLE ++

PAPARAN HALAMAN STATS

26 Oktober 2013

Kursus Pendek Pembinaan Blog

PAPARAN HALAMAN EARNINGS

26 Oktober 2013

Kursus Pendek Pembinaan Blog

PAPARAN HALAMAN LAYOUT

26 Oktober 2013

Kursus Pendek Pembinaan Blog

PAPARAN HALAMAN TEMPLATE

PAPARAN HALAMAN SETTINGS

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

Ruangan bekerja post

What you see is what you get toolbar


Ruang bekerja post

Klik butang butang Publish untuk menerbitkan post anda

Untuk kembali ke menu utama, klik butang Close

Klik butang Preview untuk melihat post anda

26 Oktober 2013

Kursus Pendek Pembinaan Blog

PENAMBAHAN IMEJ 1. Klik ikon Insert image.

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

Klik butang Choose files

26 Oktober 2013

Kursus Pendek Pembinaan Blog

3. Setelah anda memilih gambar,paparan di bawah dipaparkan, pilih gambar tersebut dengan mengklik gambar dan klik butang Add selected untuk menambah gambar di ruang bekerja post.

Klik butang Cancel untuk membatalkan muatnaik gambar

4. Paparan di bawah menunjukkan muatnaik gambar berjaya

Menentukan saiz gambar

Menentukan kedudukan gambar

Untuk membuang gambar Menambah keterangan gambar

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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 sahaja dan saiz video kurang daripada 100MB sahaja diterima. Bergantung kepada saiz video, ia akan mengambil masa kira-kira lima minit. Apabila ia selesai, video tersebut akan muncul ruang bekerja post.

26 Oktober 2013

Kursus Pendek Pembinaan Blog

3.

Jika anda berjaya memuatnaik video, video tersebut akan dipaparkan di ruang bekerja post seperti rajah di bawah.

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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 membuat pilihan, klik pada gambar tersebut

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

Klik Customize/ Download

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 Preview untuk mendapatkan gambaran

Senarai menu dropdown yang ingin dipaparkan

sebenar menu dropdown

26 Oktober 2013

Kursus Pendek Pembinaan Blog

Untuk menukar saiz tulisan, klik di sini

Klik HTML untuk mendapatkan kod pengaturcaraan HTML

<div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>Laman utama</span></a></li> <li class='has-sub'><a href='#'><span>Kenali kami</span></a> <ul> <li><a href='#'><span>Siapa kami?</span></a></li> <li><a href='#'><span>Senior SMK3</span></a></li> <li class='last'><a href='#'><span>Coretcoret</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Company</span></a> <ul> <li><a href='#'><span>LA 03</span></a></li> <li class='last'><a href='#'><span>LA 04</span></a></li> </ul> </li> <li class='last'><a href='#'><span>Hubungi kami</span></a></li> </ul> </div>

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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 tersebut

26 Oktober 2013

Kursus Pendek Pembinaan Blog

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu > ul { background: url(highlight-bg.png) repeat; padding-bottom: 3px; font-family: 'Open Sans', sans-serif; font-weight: 600; } #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; 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; 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; 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: # 3D192B;

font-weight: 500;

background-color: #d8bfcc;

padding: 15px 15px; color : #66444b; font-size:15px; font-family: schoolbell; line-height: 10px;

background-color: # EBDAE3;

background-color: #d65b99;

26 Oktober 2013

Kursus Pendek Pembinaan Blog

/* Childs */ #cssmenu > ul ul { opacity: 0; visibility: hidden; position: absolute; top: 120px; background: url(menu-bg.png) repeat; margin: 0; padding: 0; z-index: -1; } #cssmenu > ul li:hover ul { opacity: 1; visibility: visible; margin: 0; color: #000; z-index: 2; top: 64px; left: 0; } #cssmenu > ul ul:before { content: ''; position: absolute; top: -10px; width: 100%; height: 20px; background: transparent; } #cssmenu > ul ul li { list-style: none; padding: 0; margin: 0; width: 100%; } #cssmenu > ul ul li a { padding: 18px 26px; display: block; color: white; font-size: 13px; text-decoration: none; text-transform: uppercase; width: 150px; border-left: 4px solid transparent; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } #cssmenu > ul ul li a:hover { border-left: 4px solid #d64e34; background: url(hover.png) repeat; } #cssmenu > ul ul li a:active { background: url(menu-bg.png) repeat; }

background-color: #d8bfcc;

top: 52px;

color: #393939; font-size: 15px; font-family: schoolbell;

border-left: 4px solid #551133; text-shadow: 0 -1px 0 #97321f; text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64); background-color: #EBDAE3; background-color: #d65b99; text-shadow: 0 -1px 0 #97321f; text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

Klik Save Template

Klik Preview Template

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

26 Oktober 2013

Kursus Pendek Pembinaan Blog

5. Cari lokasi menu css di dalam kod html (berada di bawah </header>)

6. Letakkan URL tersebut di dalam menu yang dikehendaki( gantikan # di dalam <a href= #> dengan URL post)
Klik View blog

Klik Save Template

Klik Preview Template

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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 web pautan) 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

26 Oktober 2013

Kursus Pendek Pembinaan Blog

MENUKAR REKABENTUK BLOG 1. Di dalam dashboard, klik Template.

2. Kemudian klik Edit HTML

26 Oktober 2013

Kursus Pendek Pembinaan Blog

2. Untuk memulakan dengan Blogger Template Designer, pilih template untuk blog anda dari salah satu template profesional yang direka. 3. Setiap template muncul sebagai thumbnail besar yang apabila diklik dan paparannya boleh dilihat di bawahnya. Apabila anda mengklik template baru , ia akan memadam apa-apa penyesuaian yang anda buat pada template sebelumnya.

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

Edit kedudukan gambar latarbelakang

Klik Remove image untuk membuang gambar latarbelakang dan memilih warna latar belakang yang baru

26 Oktober 2013

Kursus Pendek Pembinaan Blog

Anda boleh memilih latarbelakang yang lain dengan mengklik bahagian ini

Pilih latarbelakang yang dikehendaki dan klik Done

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

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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 mengikut kreativiti sendiri.

26 Oktober 2013

Kursus Pendek Pembinaan Blog

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

26 Oktober 2013

Kursus Pendek Pembinaan Blog

2. Klik Layout di dashboard dan Add a Gadget.

Letak kod tersebut di sini dan klik Save

26 Oktober 2013