Memaparkan catatan dengan label tutorial. Papar semua catatan
Memaparkan catatan dengan label tutorial. Papar semua catatan

Isnin, 5 Mac 2012

setting asas untuk 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.

Setting Asas Yang Perlu Diketahui Oleh Blogger


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.Setting Asas Yang Perlu Diketahui Oleh Blogger

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

Setting Asas Yang Perlu Diketahui Oleh Blogger

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

Setting Asas Yang Perlu Diketahui Oleh Blogger

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.



Setting Asas Yang Perlu Diketahui Oleh Blogger

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)

----------------------------

Setting untuk sesebuah blog boleh diubah bila-bila masa mengikut kehendak pemilik blog.
Walau bagaimanapun,adalah penting untuk cuba kekalkan setting yang dibuat untuk menyenangkan pemilik blog dan juga pengunjung.

Beberapa tips berkaitan setting untuk sesebuah blog boleh dibaca dari blog unwanted86 iaitu Setting yang tidak perlu dalam blog : part 1 dan juga Setting yang tidak perlu dalam blog : part 2

LETAK BUTTON FOLLOW DAN DASHBOARD

Dalam template asal blogger, sudah diletakkan untuk widget follower dan juga dashboard. Walau bagaimanapun, anda boleh melakukan sedikit pengubahsuaian. Tutorial kali ini akan tunjukkan cara untuk letak button follow dan dashboard dalam blog seperti gambar di bawah.


Anda juga boleh tengok demo button follow dan dashboard ini di test blog ini.

Tutorial adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang dibuka.
[tidak faham.?]


<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

Nota: Gantikan 'ID BLOG ANDA'

Bagaimana untuk cari ID Blog.?
> Anda klik pada 'new post' dari dashboard, dan akan ada paparan seperti gambar di bawah. Noombor yang admin highlight adalah contoh NO ID BLOG



3. Setelah anda selesai letakkan ID blog anda, save dan lihat hasilnya.:)

Update:
TAMBAHAN:
Bagi sesiapa yang mempunyai masalah kehadiran navbar dalam blog, anda boleh hilangkan navbar tersebut dengan mengikuti tutorial hilangkan navbar dalam blog.
Kredit untuk: Unwanted

OBJEK BERPUSING KELILING MOUSE

Bagaimana anda gayakan mouse bagi pengunjung yang mengunjungi blog anda.? Adakah anda biarkan secara default atau lakukan pengubahsuaian.?
Sebelum ini terdapat beberapa tutorial seperti bubble, sparkle, atau following star.

Dan kali ini, satu lagi ubahsuai yang anda boleh lakukan, iaitu objek berpusing keliling mouse seperti gambar di bawah


Anda juga blog melihat contoh di blog demo ini

Tutorial di bawah.

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.
(tidak faham.?)



<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

3. Save dan lihat hasilnya.

TAMBAHAN.

i) Bagi sesiapa yang tukar warna objek tersebut, boleh tukar pada kod ini.
(mencari kod warna.?)

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";


ii) Kod ini memerlukan anda menggunakan layout template.

Kredit untukL Unwanted

Fibox : Shoutbox Yang Cool Untuk Blogger



Fibox adalah satu lagi nama baru untuk shoutbox yang memasuki ruang maya ini. Rentetan daripada shoutmix yang akan menamatkan perkhidmatan percumanya, admin dapati Fibox menawarkan shotbox yang bagi admin memang cool, (walaupun bagi admin baru sekali pandang:)


Fibox kini dalam fasa beta dimana lebih banyak penambahbaikan yang akan dilakukan oleh pihak yang terbabit. Lihat pada paparan yang mesra pengguna dan penggunaannya yang mudah, admin tidak ambil masa yang lama untuk terus daftar. Anda boleh melihat contoh shotbox Fibox ini yang admin letakkan di blog ohbest.

Sambil-sambil daftar, admin ambil kesempatan untuk letakkan sekali tutorial untuk daftar Fibox seperti di bawah.

1. Buka www.fibox.ws, kemudian klik pada Sign Up


2. Masukkan email address dan password. Tick pada term of service kemudian klik continue


3. Notification mengatakan activation email dihantar kepada emial yang anda daftar.


4. Buka email dan klik pada link yang diberi.


5. Pengesahan bahawa akaun anda telah diaktifkan.


6. Login akaun anda, dan untuk kali pertama anda login anda akan diminta untuk create nama untuk shoutbox anda.


7. Daripada dashboard, anda boleh tetapkan setting yang anda kehendaki



8. Copy code yang diberi dan paste ke dalam ruangan HTML/javascript blog anda.
(tidak faham.?)

9. Save dan lihat hasilnya.:)


Tambahan:
Selepas pendaftaran, anda juga boleh login menggunakan akaun facebook anda.


BUAT BLOG

PANDUAN MENGHASILKAN BLOG UNTUK PASUKAN, SEKOLAH, NEGERI



Saya bukan pakar dalam dunia blog. Tetapi tertarik untuk berkongsi pengalaman dengan Pegawai-pegawai KRS untuk menghasilkan blog bagi kegunaan pasukan, sekolah atau apa sahaja. Pengalaman saya menghasilkan blog yang tidak secantik mana ini saya gabungkan dengan pengalaman otai-otai blogger yang telah lama bertapak di dunia maya ini.




Mendaftarkan diri sebagai seorang pemilik blog dengan menggunakan platform blogger tidaklah sesusah yang disangka.
Dengan mengikuti beberapa langkah ringkas berikut,
anda sudah bergelar seorang blogger.


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.

. Kemudian masukkan blogname dan juga 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.




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



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


Anda sudah boleh memulakan entri pertama anda untuk blog

Cara Upload Gambar Ke Dalam Post

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

· 2.Pada paparan, klik pada icon upload picture seperti yang ditunjukkan dibawah. -Kedudukan berbeza bagi kead
aan 'html' dan juga 'compose' tetapi simbolnya tetap sama.
atau
3, Klik Browse

4. Oilih gambar 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

KETAHUI BILANGAN PENGUNJUNG ONLINE

Berapakah bilangan pelawat yang berada dalam blog anda ketika ini.? Mungkin amat sukar untuk anda menjangkakannya (tidak boleh rasanya.:) 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 blog, 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.
Jika masih tidak faham, sila rujuk disini.
4. Save, dan lihat hasilnya

LETAK WEBSITE LAIN DALAM 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.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
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 :-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.:)

DROP DOWN 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 dibukaText 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);">
Mudah bukan. Selamat mencuba

SCROLL BOX UNTUK BLOG ARCHIEVE

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging. Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)



Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.
1. Dari dashboard > design > edit html > Expand widget templates. (
backup template untuk langkah berjaga²)
2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>
3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>
4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>
Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.
Contoh:
Sebelum.
Selepas


4. Save dan lihat hasilnya.:)
Untuk scroll box widget lain yang menggunakan html code, boleh rujuk
tutorial scroll box untuk widget

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

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