faiz-tutorial demo

Wednesday, 13 March 2013

Widget: Jam Flash Upin Ipin

Ni widget pertama nak share ngn korang. Sori la kalau tak cantik. Next time saya share yang lain pulak k....hehe

Tutorial Daftar Cbox (Shoutbox)

Tutorial ni buat newbie untuk daftar cbox dan letak pada blog.. harap dapat membantu..

1. Pergi ke http://www.cbox.ws dan klik " sign up (rujuk no pada GAMBAR 1)"

GAMBAR 1

2. Isikan semua form yang disediakan (rujuk no 2 pada GAMBAR 2). Tick pada " I have read and do agree.... (rujuk no 3 pada GAMBAR 2) " . Seterusnya klik " Create my Cbox! (rujuk no 4 pada GAMBAR 2) ".

GAMBAR 2

3. Jika keluar page "Cbox Created!" bermakna pendaftaran cbox anda sudah berjaya. Seterusnya anda login ke laman utama cbox anda (rujuk no 5 pada GAMBAR 3)

GAMBAR 3

4. Anda boleh customize cbox anda pada Look & Feel . Untuk masukkan cbox pada blogger anda,
klik " Publish! (rujuk no 6 pada GAMBAR 4 ) "

GAMBAR 4

5. Ikut step yang di berikan:

Step 1 - Pada " Where are you installing your cbox? " , pilih " Blogger/Blogspot " (rujuk no 7 pada gambar 5).
Step 2 - Pada " Choose a variation " , pilih " Inline (default) ".
Step 3 - Pada " Get your code " , anda copy(ctrl+C) semua code. (rujuk no 8 pada GAMBAR 5) .

GAMBAR 5

Step 4 -

i. Login dashboard blogger anda.

ii. Pergi pada bahagian Layout

iii. Klik pada " Add a Gadget "

iv. Klik pada " HTML/Javascript "

v. Paste(CTRL+V) code pada ruang content.

vi. Klik Save dan lihat hasilnya.....

Baca Selengkapnya »

Tuesday, 12 March 2013

Tutorial Meletakkan Emotion Pada Komen

PENTING!

Sebelum membuat apa-apa pengubahsuaian template anda (pada Edit HTML) , anda dinasihatkan supaya mem'backup dahulu template untuk langkah keselamatan jika berlaku error semasa membuat pengekodan template. Klik SINI untuk melihat tutorial untuk membuat BACKUP dan RESTORE Template... :)

Tutiorial ini untuk letakkan beberapa emotion ke dalam bahagian komen blog anda seperti gambar di atas. Cute kan..Let's start....

1. Login ke dashboard blogger korang.
2. Klik butang " More Option (rujuk no 1 pada GAMBAR 1) " dan klik "Template (rujuk no 2 pada GAMBAR 1)".

GAMBAR 1

3. Klik pada " Edit HTML (rujuk no 3 pada GAMBAR 2) "

GAMBAR 2

4. Tick pada Expand Widget Templates (rujuk no 4 pada GAMBAR 3)

GAMBAR 3

5. Tekan CTRL+F dan cari kod di bawah (rujuk no 5 pada GAMBAR 4):

</head>

GAMBAR 4

6. Copy (CTRL+C) kod dibawah:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/emoticon.min.js" type="text/javascript"></script>

7. Paste (CTRL+V) kod yang di copy tadi sebelum kod " </head> " . (rujuk no 6 pada GAMBAR 5)

GAMBAR 5

8. Copy (CTRL+C) kod dibawah:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu jarak sebelum kod emoticon."
})
});
//]]>
</script>
</b:if>

9. Paste (CTRL+V) kod yang di copy tadi sebelum kod " </body> " . (rujuk no 7 pada GAMBAR 6)

GAMBAR 6

10. Klik Preview dan kalau ok klik Save Template (rujuk GAMBAR 6)

GAMBAR 6

P/S: Jika icon tidak terpapar. Sila ubah sedikit Settings:

- Pada Dashboard klik Settings --> klik Posts and comments --> Comment location ubah kepada Embedded .

Baca Selengkapnya »

Monday, 11 March 2013

Tutorial Scroll Bar Cute

PENTING!

Tutorial kali ini untuk buat scroll bar anda jadi lebih menarik seperti gambar diatas. Anda juga boleh mengubahnya mengikut kreativiti anda.

1. Login ke dashboard blogger korang.
2. Klik butang " More Option (rujuk no 1 pada GAMBAR 1) " dan klik "Template (rujuk no 2 pada GAMBAR 1)".

GAMBAR 1

3. Klik pada " Edit HTML (rujuk no 3 pada GAMBAR 2) "

GAMBAR 2

4. Tick pada Expand Widget Templates (rujuk no 4 pada GAMBAR 3)

GAMBAR 3

5. Tekan CTRL+F dan cari kod di bawah (rujuk no 5 pada GAMBAR 4):

]]></b:skin>

GAMBAR 4

6. Copy (CTRL+C) kod dibawah:

::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece {
background-color: #A9F5D0;
border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #01DFA5;
border: 1px solid #FFFFFF;
}

## Anda boleh gantikan kod :

#A9F5D0 - warna background bagi scrollbar track
#FFFFFF - warna bagi border scrollbar track
#01DFA5 - warna background bagi scrollbar thumb
#FFFFFF - warna bagi border scrollbar thumb

7. Paste (CTRL+V) kod yang di copy tadi sebelum kod " ]]></b:skin> " . (rujuk no 6 pada GAMBAR 5)

GAMBAR 5

8. Klik Preview dan kalau ok klik Save Template (rujuk GAMBAR 6)

GAMBAR 6

Baca Selengkapnya »

Sunday, 10 March 2013

Cari ID blog

Ade sesetengah tutorial widget atau script memerlukan ID blog. Pada yang tak tahu ID blog anda boleh rujuk tutorial ni k.

1. Login pada Dashboard blogger anda.
2. Klik butang "New Post"

2. Lihat pada Address Bar, didalam kotak merah tu la ID blogger korang.

Baca Selengkapnya »

TUTORIAL DAFTAR AKAUN GMAIL DAN BLOGGER

Tutorial ni saya buat sesape yang baru nak mula dengan blogger ni. Harap dengan tutorial ni dapat membantu anda yang baru berjnak-jinak dengan blogger ni..

1. Pergi ke " http://www.blogger.com " dan klik pada " Sign up ( rujuk no 1 pada GAMBAR 1) "

GAMBAR 1

2. Lengkapkan semua form (pada no 2[i,ii,iii,iv,v,vi,vii,viii,x,x] pada GAMBAR 2) .
Tick pada " I agree to....... (rujuk no 3 GAMBAR 2) " dan jika semua form sudah dilengkapkan, klik " Next step (rujuk no 4 pada GAMBAR 2) ".

GAMBAR 2

3. Setelah keluar halaman seperti gambar dibawah, klik " Next step ( rujuk no 5 pada GAMBAR 3 ) " .

GAMBAR 3

4. Setelah keluar halaman seperti gambar dibawah bermakna akaun gmail anda berjaya dibuat, seterusnya klik " Back to Blogger (rujuk no 6 pada GAMBAR 4 ) " .

GAMBAR 4

5. Pada halaman seperti dibawah klik " Continue to blogger (rujuk no 7 pada GAMBAR 5 ) "

GAMBAR 5

6. Selanjutnya, klik " New Blog (rujuk no 8 pada GAMBAR 6 ) ".

GAMBAR 6

7. Pada ruang:

Title - isikan tajuk untuk blog anda (rujuk no 9 pada GAMBAR 7)
Address - isikan nama alamat blog anda. ~~Contoh: blogsaya.blogspot.com~~ (rujuk no 10 pada GAMBAR 7)
Template - pilih mana-mana template yang anda suka (rujuk no 11 pada GAMBAR 7)

Seterusnya, klik " Create Blog! (rujuk no 11 pada GAMBAR 7) ".

GAMBAR 7

8. Setelah keluar halaman seperti gambar dibawah bermakna blog anda berjaya didaftarkan.. Ok nak memulakan posting klik je Start posting

GAMBAR 8

SELESAI...... :)

Baca Selengkapnya »

Thursday, 7 March 2013

Javascript: Typing Text Effect

1. Login ke Dashboard blogger korang.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang korang nak letakkan tweet tersebut.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5. Copy (CTRL+C) kod javascript dibawah:

<form name="news">
<textarea name="news2" cols=50 rows=4 wrap=virtual></textarea>
</form>
<script language="javascript" type="text/javascript">
document.news.news2.style.background = '#FFFFCE';
document.news.news2.style.color = '#ff0000';
var newsText = new Array();
newsText[0] = "LETAK TEKS 1 ANDA DISINI\nNEW LINE";
newsText[1] = "LETAK TEKS 2 ANDA DISINI";
newsText[2] = "LETAK TEKS 3 ANDA DISINI";
newsText[3] = "LETAK TEKS 4 ANDA DISINI";
newsText[4] = "LETAK TEKS 5 ANDA DISINI"
var ttloop = 1; // Repeat forever? (1 = True; 0 = False)
var tspeed = 50; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE ------------- \\
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
</script>

##Gantikan:

50 - nilai column (lebar)
4 - nilai row (tinggi)
#FFFFCE - warna background
#ff0000 - warna teks
LETAK TEKS 1/2/3/4/5 ANDA DISINI - Teks atau pesanan anda. (gunakan " \n " untuk new line)
1 - set untuk ulang (1=true , 0=false)
50 - kelajuan efek teks. (semakin besar nilai = semakin perlahan kelajuan)

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7.Seterusnya klik " Save (rujuk no 6 ) " dan lihat la hasilnya...........

Baca Selengkapnya »

Wednesday, 6 March 2013

Tab Komen Facebook Dan Blogger Pada Setiap Post

PENTING!

Ni adalah tutorial untuk buat Tab komen bagi blogger komen dan facebook komen pada setiap entri anda seperti gambar diatas. Menarik bukan. Jom buat diblog anda, ikuti langkah dibawah.

1. Login ke dashboard blogger korang.
2. Klik butang " More Option (rujuk no 1 pada GAMBAR 1) " dan klik "Template (rujuk no 2 pada GAMBAR 1)".

GAMBAR 1

3. Klik pada " Edit HTML (rujuk no 3 pada GAMBAR 2) "

GAMBAR 2

4. Tick pada Expand Widget Templates (rujuk no 4 pada GAMBAR 3)

GAMBAR 3

5. Tekan CTRL+F atau F3 dan cari kod di bawah (rujuk no 5 pada GAMBAR 4):

]]></b:skin>

GAMBAR 4

6. Copy (CTRL+C) kod dibawah dan Paste (CTRL+V) sebelum kod " ]]></b:skin> " (rujuk no 6 pada GAMBAR 4)

.comments-page {
background-color: #f2f2f2;
}
#blogger-comments-page {
padding: 0px 5px;
display: none;
}
.comments-tab {
float: left;
padding: 5px;
margin-right: 3px;
cursor: pointer;
background-color: #f2f2f2;
}
.comments-tab-icon {
height: 14px;
width: auto;
margin-right: 3px;
}
.comments-tab:hover {
background-color: #eeeeee;
}
.inactive-select-tab {
background-color: #d1d1d1;
}

7. Tekan CTRL+F atau F3 dan cari kod di bawah (rujuk no 7 pada GAMBAR 5):

<head>

GAMBAR 5

8. Copy (CTRL+C) kod dibawah dan Paste (CTRL+V) selepas kod " <head> "(rujuk no 8 pada GAMBAR 5)

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FACEBOOK ANDA' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

P/S: Tukarkan ID FACEBOOK ANDA dengan ID facebook anda.
Contoh:
https://www.facebook.com/faeyzfunkyz91
- Maka ID Facebook adalah faeyzfunkyz91

9. Tekan CTRL+F atau F3 dan cari kod di bawah (rujuk no 9 pada GAMBAR 6):

<div class='comments' id='comments'>

GAMBAR 6

10. Copy (CTRL+C) kod dibawah dan Paste (CTRL+V) selepas kod " <div class='comments' id='comments'> " (rujuk no 10 pada GAMBAR 6)

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

P/S: Anda boleh gantikan:

2 - Untuk jumlah post komen
400 - Untuk lebar ruang komen

11. Klik Preview dan jika tiada error klik Save template. (rujuk GAMBAR 7 )

GAMBAR 7

Baca Selengkapnya »

Tuesday, 5 March 2013

Efek Link Bergoyang

Ni tutorial untuk buat link hover efek bergoyang, jom try buat.....

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda mahukan.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5. Copy (CTRL+C) kod dibawah:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

Note:

Gantikkan 400 untuk set kelajuan goyangan. Semakin kecil nilai yang dimasukkan ,goyangan akan semakin laju.

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 ) " dan lihat la hasilnya...........

Baca Selengkapnya »