Buat Scroll Bar Untuk Blog Post

Ok, sesimple mungkin (sebab aku tak de mood) aku nk bgtau korang, korang digalakkan guna tutorial ni kalau korang tulis satu benda yang panjang gila tahap cipan nazak. Daripada korang buat pembaca korang bosan, baek korang guna tuto ni je.

1) Dashboard > New Post > Edit Html (Sebelah Compose)

2) Pastekan kod ni kat ruang Edit Html tu:

<center><div style="background: url(URL Gambar Background);background-repeat:repeat;background-attachment:fixed;overflow:auto;width:200px;height:200px;padding:10px">
Isi yang korang nak tulis kat sini</div></center>

Merah- Letak URL gambar yang korang nak sebagai background kotak
Oren- Sekati korang la nak tukar ke tak kelebaran kotak tu
Kuning- Sekati korang la nak tukar ke tak ketnggian kotak tu
Pink- Benda yang korang nak tulis tu kat sini (Nak tulis panjang mana pun takpe)

Tukar Dan Buang Iklan Cursor

Hehehe.. Tengok cursor aku, bergaya tak? Aku tau korang jeles. Tak yah cakap, aku tau. Hahaha.. Nak cursor yang cun melecun cam aku punya? Ikut je step yang senang gila tahap kipas berabuk nih!

Sebelum tu, aku nak ingatkan, kalau korang nak guna tuto ni, korang jangan pilih cursor yang jenis 'Animated' atau lebih dikenali sebagai cursor yang bergerak-gerak. Sebab, kalau korang guna tuto ni dia takkan jadi. Sebab cursor yang jenis animated ni hanya boleh dilihat kalau korang guna Internet Explorer.

1) Carilah cursor yang korang nak macam kat website:

• Cursors 4u
• Totally Free Cursors
• Cursors
• Cursor Mania

*Ok, aku mengaku aku tak reti nak cari cursor yang comel-comel atau cursor yang memenuhi kehendak korang. So, kalau korang tak bekenan, korang boleh cari sendiri :)*

2) Korang cari dekat cursor tu ade kotak kan? Ada isi kod. Korang just copy kod tu sume

3) Balik ke Blogger korang dan pergi ke Design > Add A Gadget > Html/Javascript

4) Korang pastekan kod yang dah dicopy tadi kat ruangan tu.

5) Contoh kod korang macam ni:

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur278.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/10/16/pink-horizontal-stripe-pointer.html" target="_blank" title="Pink Horizontal Stripe Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Pink Horizontal Stripe Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Skang, aku nak korang buang kod yang warna merah ni:

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur278.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/10/16/pink-horizontal-stripe-pointer.html" target="_blank" title="Pink Horizontal Stripe Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Pink Horizontal Stripe Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

*Buang kod yang dari <a sampai </a>*

6) Dan sepatutnya, korang punya kod hanya akan jadi sependek ini:

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur278.cur), progress !important;}</style>

*Korang punya kod sepatutnya cuma ada kod <style sampai </style> SAHAJA*

7) Preview dan menjadi, Save!

Body Blog Berwarna

Bagila body blog korang tu nampak menarik siket. Pakaikan dia baju.. Hehehehe.. Tapi, aku nak nasihatkan kalau korang punya blog dia punya Main Body dengan Sidebar terpisah dan korang gunakan tuto ni, korang punya Main Body dan sidebar akan bergabung, meletup, marah! (Bagi sesape yang tak bekenan la)

1) Dashboard > Design > Edit Html

2) Tekan Ctrl dan F, carik kod ni:

#content-wrapper {

3) Pastekan kod ni kat bawah kod tadi:

 -moz-box-shadow: 0 0 5px 5px #000000;
-webkit-box-shadow: 0 0 5px 5px #000000;
box-sshadow: 0 0 5px 5px #000000;

Merah- Tukarkan dengan kod warna yang korang nak.

4) Dah preview? Puas hati? Save Template!

Melengkungkan Body Blog

Hai hui hoi. Assalamualaikum guys! So, hari ni aku nak ajar korang macam mana nak bagi sikit curve kat korang punya blog. Biar nampak seksi. Hehehe.. First of all, aku ada 3 tempat kat mana korang nak lengkungkan tu. Renung-renungkan.. :D

Lengkungkan bahagian atas je

1) Dashboard > Design > Edit Html

2) Tekan Ctrl dan F, carik kod ni:

#content-wrapper {

3) Pastekan kod ni kat bawah kod tadi:

border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;

4) Siap, Save Template.

Merah- Korang boleh tukar jadi bape banyak yang korang nak blog korang melengkung.

Lengkung bahagian bawah je



1) Dashboard > Design > Edit Html

2) Tekan Ctrl dan F, carik kod ni:

#content-wrapper {

3) Pastekan kod ni kat bawah kod tadi:

border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;

4) Siap, Save Template.

Merah- Korang boleh tukar jadi bape banyak yang korang nak blog korang melengkung

Lengkung bahagian atas dan bahagian bawah


1) Dashboard > Design > Edit Html

2) Tekan Ctrl dan F, carik kod ni:

#content-wrapper {

3) Pastekan kod ni kat bawah kod tadi:

border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;

Merah- Korang boleh tukar jadi bape banyak yang korang nak blog korang melengkung

4) Siap, Save Template.

Link Hover (Shadow)

Kalau korang guna tuto ni kan.. Kan.. Bila orang sentuh link korang, kat belakang dia nanti keluar shadow. Bayang-bayang laaa..

1) Dashboard > Design > Edit HTML

2) Tekan Ctrl dan F, carik kod ni:

a:hover {

3) Pastekan kod ni kat bawah kod tadi:

 text-shadow:2px 2px 3px #000000;

Merah- Tukarkan tu ikut kod warna yang korang nak. Tu warna bayang-bayang tau!

4) Save Template!

Nota: Kalau kod 'a:hover {' tu tak ada, korang follow step ni pulak:

1) Dashboard > Design > Edit HTML

2) Tekan Ctrl dan F, carik kod ni:

a:link {

3) Pastekan kod ni kat bawah kod tadi:

a:hover {
text-shadow:2px 2px 3px #000000;
}

Merah- Tukarkan tu kepada kod warna yang korang nak. Tu untuk warna bayang-bayang tau!

Bila korang buat, kod dia sepatutnya jadi macam ni:

4) Dah siap just klik Save Template

Centerkan Post Title, Gadget, Masa Dan Tarikh

Best tau yang ni. Aku suka sangat sebab dia buat blog nampak kemas. Cun!

1) Dashboard > Design > Edit Html >Tick 'Expand Widgets'

2) Tekan Ctrl dan F, carik kod ni:

.sidebar h2 {

Pastekan kod ni kat bawah kod tadi:

text-align: center; 

3) Tekan Ctrl dan F, carik kod ni pulak:

.post-title { 

Pastekan kod ni kat bawah kod tadi:

text-align: center; 

4) Preview dan menjadi? Klik 'Save Template'!

Note: Perkataan 'center' tu, korang boleh tukar kepada 'left' atau 'right',ok? Sendiri bereksperimen :)

Animated Recent Post

Kengkadang bosan kan tengok 'Blog Archive' kita stay still dan tak bergerak? So, apa kata kita buat perubahan sikit? Kita buat 'Blog Archive' kita bergerak.. Hehehe

1) Dashboard > Design > Add A Gadget > Html/Javascript

2) Pastekan kod ni kat dalam ruangan Html/Javascript tadi:

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "URL BLOG KORANG";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://ladycun.blogspot.com/" target="_blank">Tekan Sini</a></small>

Merah- Letak URL blog korang kat situ.

3) Dah siap tekan Save!