Sunday, 10 March 2013

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

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

Wednesday, 6 March 2013

Tab Komen Facebook Dan Blogger Pada Setiap Post

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

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

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

Monday, 4 March 2013

Efek Header Bergoyang

PENTING!

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

#header {

atau

#header h1 {

GAMBAR 4

6. Copy (CTRL+C) code dibawah:

#header:hover {
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter: none;
-webkit-filter: blur(0px);-moz-filter:blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

7. Paste (CTRL+V) pada selepas tanda " } " kod yang di cari tadi . (rujuk GAMBAR 5)

GAMBAR 5

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

GAMBAR 6

Sunday, 3 March 2013

Title Bar Effect Maker

Pernah tak semasa anda blogwalking ke blog teman-teman blogger anda, anda melihat Effect Mesej pada Title Bar. Menarik bukan. Disini saya sediakan satu title bar maker untuk memudahkan anda untuk mendapatkan title bar effect yang menarik. Ikuti tutorial dibawah:

1. Pada "Add title bar message" , masukkan mesej yang anda mahu dan klik add atau ENTER. Mesej anda akan terpapar pada ruangan "Title bar message". Anda juga boleh memasukkan berapa banyak mesej yang anda kehendaki dan boleh menyusun mesej mengguna button "/\" "\/".

2. Pada"Choose an effect" , pilih effect yang anda mahu.

3. Lakukan sedikit setting:

Repeats type - pilih sama ada Continuous (sentiasa berulang) atau secara custom dengan set masa
Speed of effect - seting untuk kelajuan bagi effect. Semakin kecil nilai yang anda masukkan, semakin perlahan kelajuan.
Additional options for selected effect - setting tambahan bagi beberapa effect.

4. Selanjutnya klik preview untuk melihat title bar anda. Jika ok, Klik butang "OK, Generate Code!".

5. Klik "Highligh All" dan copy code javascript.

Title bar Maker

Title bar message:

[Remove selected message] [Remove all]

Choose an effect:
Additional options for selected effect:

Generated Code: [Highlight all]

Highlight the generated code, copy it to the Clipboard and paste it into the HEAD section of your page. Enjoy!

6. Selanjutnya tutorial untuk masukkan ke dalam blogger anda.

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

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

9. Cari HTML/Javascript dan klik butang tambah (rujuk no 4).

10. Paste (CTRL+V) pada ruang Content (rujuk no 5)

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

Friday, 1 March 2013

TUTORIAL BACKUP DAN RESTORE SEMUA POSTING BLOGGER

Ok kali nak share tutorial untuk backup dan restore semua posting yang anda telah post pada blog anda. Tutorial ni boleh anda buat sebagai rujukan sekiranya anda ingin menukar blog baru dan mahukan semua posting anda pada blog baru anda. Jom mulakan..huhu

TUTORIAL 1: BACKUP POSTING

1. Login ke Dashboard blogger anda.

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

GAMBAR 1

3. Pada halaman Settings , klik " Other (rujuk no 3 pada GAMBAR 2)" .

GAMBAR 2

4. Seterusnya, klik " Export blog (rujuk no 4 pada GAMBAR 3) "..

GAMBAR 3

5. Akhir sekali , klik " Download Blog (rujuk no 5 pada GAMBAR 4) " dan save file backup anda ke Local disk pc anda.

P/S: Format file backup ada la *.xml

GAMBAR 4

TUTORIAL 2: RESTORE FILE BACKUP POSTING

1. Login ke Dashboard blogger anda.

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

GAMBAR 1

3. Pada halaman Settings , klik " Other (rujuk no 3 pada GAMBAR 2)" .

GAMBAR 2

4. Seterusnya, klik " Import blog (rujuk no 4 pada GAMBAR 3) "..

GAMBAR 3

5. Klik butang " Choose File (rujuk no 5 pada GAMBAR 4) " dan pilih file backup yang anda telah simpan pada Local disk komputer anda.

GAMBAR 4

6. Pada Type the two words , anda isikan 2 karakter yang terpapar pada ruang
disediakan (rujuk no 6 pada gambar 4) .

7. Seterusnya klik " Import Blog (rujuk no 7 pada GAMBAR 4) "..

8. SELESAI.....