Nazriah's Tutorial: February 2011

Sunday, February 27, 2011

Automatic Recent Post ツ

Request drpd Fyra^^

1) Dashboard > Design > Page Elements > Add a Gadget > Add HTML/Javascript

2) Copy code di bwah ini :

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

</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 = "http://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>

3) Suda copy ? Lpas tu , paste-kan dia kat HTML/Javascript yg anda buka tadi .

4) Perkataan yg kaler biru itu , tukar kepada url/link blog anda k ?

Ade masalah ? Komen - komen je :)

Adjust Saiz Gambar ツ

Ok , tutor telah ditnya oleh Fyra ^^

Kalau ikut cara Naz cmnie :

1) Click pda gmbar yg anda nak resize tu . Lpas anda click , akan ada keluar kotak kecik

kaler putih kat sudut dan tepi gmbar tu . (tgok contoh kat bawah)

2) Letakkan cursor anda kat kotak putih sebelah kanan dan akan muncul arrow

seperti ini : ↕

3) Then , click kat kotak putih tersebut dan tarik die turun ke bawah tnpa melepaskan mouseclick anda .

4) Lastly , Resize lah image tu mengikut kehendak anda .

Jika tak faham , anda boleh cube tutor yg ini :

Tutor Abg Unwanted

Ade masalah ? Komen - komen je :)

Friday, February 25, 2011

Tukar Icon untuk Older and Newer Post ツ

Request 2 drpd Yuri ^^

1) Dashboard > Design > Edit HTML > Tick "Expand Widget Templates"

2) First , untuk "older post" punye icon .

3) Tkan ctrl + f dan seach :

<data:olderPageTitle/>

4) Lpas dah jumpe , gntikan code kat atas tu dgn code yg ini :

<img src='url icon'/>

*gntikan perkataan kaler biru tu dgn url icon yg anda hendak k ?

5) Skrg untuk "newer post" punye icon pla .

6) Search pla code kat bawah nie:

<data:newerPageTitle/>

7) Dah jumpe , gntikan juga code kat atas tu pla dgn code yg ini :

<img src="url icon"/>

8) Mcm biase , yg perkataan kaler biru tu , anda gntikan dgn url icon , arrow or anything yg anda hendak .

9) Dah siap sume , sila preview dulu . Lpas dah puas hati , boleh lah anda save ^^

Special credits to akak ~~Lyssa~~

Ade masalah ? Komen - komen je :)

Scrolling Image ツ

Request drpd Yuri ^^

Kpada anda - anda yg tertanya ttg scrolling image tu apa , tgok image kat atas .

Kalau anda ke "main blog" aku , anda akan nmpak ia bergerak kan ?

Ok , tutor die cmnie ..

1) Dashboard > Design > Page Elements > Add a Gadgets > Add HTML/Javascript

2) Copy code kat bawah ini

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">

<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

3) Mcm biase , paste-kan code tersebut kat HTML yg anda dah buka tadi .

4) Gntikan perkataan yg diwarnakan itu berdasarkan penerangan berikut:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota-Jika anda hendak menambah lebih byk gmbar . Copy saja balik code untuk image tu dan paste-kan kat bawah code image yg lain .

Contoh:

Special credits to abg ~~unwanted~~

Ade masalah ? Komen - komen je :)

Sunday, February 20, 2011

Hide Navbar ツ

Request drpada Anis ^^

1) Dashboard > Design > Edit HTML > Tick "Expand Widget Templates"

2) Tkan ctrl + f dan search code kat bawah nie .

/* Variable definitions

3) Lpas dah jumpe code tadi , copy pla code kat bawah nie

#navbar-iframe { display: none !important; }

4) Paste-kan code yg anda dah copy tdi kat atas code yg anda search tadi .

5) Preview dulu , baru save (:

Ade masalah ? Komen - komen je :)

Friday, February 18, 2011

Alert Welcome Note ツ

Request drpd Awanis ^^

Dah jumpe tutor sebenar die . Yeay ! :D

1) Dashboard > Design > Edit HTML

2) Tkan ctrl + f dan search code kat bawah nie

</head>

3) Lpas dah jumpe , copy pla code kat bwah nie

<SCRIPT language='JavaScript'>alert("Ayat Anda");</SCRIPT>

4) Paste-kan code yg anda telah copy kat bwah code yg anda search tadi .

5) Mcm biase , gntikan Ayat Anda itu dgn teks yg anda hendak .

6) Dah siap sume , preview dulu . Dah okay , baru anda save ^^

-1 code untuk 1 alert . If anda nak buat dua alert , copy and paste je code yg aku bgi tu dan gntikan Ayat Anda dgn teks yg anda hendak .

Contoh:

<SCRIPT language='JavaScript'>alert("Hello !");</SCRIPT>
<SCRIPT language='JavaScript'>alert("Enjoy my Tutor ^^");</SCRIPT>

Nota !

Special Credits: ~~blogspottutorial~~

Ade masalah ? Komen - komen je :)

Link Colourful ツ

Tutor ni sgt-sgt senang ^^

1) Dashboard > Design > Page Elements > Add a Gadgets > Add HTML/Javascript

2) Copy code kat bawah ini .

3) Paste-kan code yg anda dah copy kat HTML yg anda buka tadi .

4) Lpas tu , save dan lihat hasilnya ! ^^

Ade masalah ? Komen - komen je :)

Saturday, February 12, 2011

Sidebar Things ツ

Request drpd Fisa ^^

1) Dashboard > Design > Page Elements > Add a Gadgets > Add HTML/Javascript

2) Copy kod HTML image/gif. yg anda nak letak tu .

3) Then , paste-kan kod yg anda copy tdi kat HTML/Javascript yg anda telah add/buka .

4) Lpas tu , sila preview untuk adjust size gif/image anda tu .

5) Lpas dah siap ubah , save dan lihat lah hasilnya :)

Ade masalah ? Komen - komen je :)

Monday, February 7, 2011

Disable Right Click ツ

Request drpd Fatini ^^

1) Dashboard > Design > Page Elements > Add a Gadgets > HTML/Javascript

2) Copy code kat bawah nie.

3) Pastekan code kat HTML yg tadi . Yg Massage Anda tu ganti lah dgn massage yg anda nak k ?

4) Lpas dah letak , save lah :D

Ade masalah ? Komen - komen je :)

Saturday, February 5, 2011

Facebook Share Button ツ

Request 3 drpd Awanis ^^

1) Dashboard > Design > Page Elements > Edit HTML

2) Tick pada Expand Widget Templates

3) Tkan ctrl + f dan search code kat bawah nie:

<div class='post-header-line-1'/>

4) Lpas dah jumpe , pastekan code HTML fb share button anda di bawah code yg anda cari tadi .

Aku ada bgi dua button kat sini , jadi anda pilih lah yg mane anda suke ^^

<div style="float: right; padding: 4px;">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

<div style="float: right; padding: 4px;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

5) Yang warne biru tu anda boleh ubah.

float tu , anda boleh tukar ikut kemahuan anda sama ada , anda nak button tu kat kiri or kanan .

kalau nak button tu kat kiri , anda boleh tukar right tu kpd left

6) Lpas dah siap ubah , preview dulu . Bile dah jadi dan okay , baru save .

Ade masalah ? Komen - komen je :)

Friday, February 4, 2011

Facebook Like Button ツ

Request 2 drpd Awanis ^^

1) Dashboard > Design > Page Elements > Edit HTML

2) Tick pade Expand Widgets Template

3) Tekan ctrl + f dan search --> data:post.body

4) Kalau dah jumpe , copy code kat bawah nie .

5) Then, paste kan code yg anda telah copy tu kat bwah code yg anda cari tadi .

6) Preview dulu, bile dah okay , baru save :)

Ade masalah ? Komen - komen je :)

Scrollbox ツ

Request drpada Awanis ^^

Well, care die cmnie.

1) Dashboard > Design > Page Elements > Add a Gadgets > Add HTML/Javascript

2) Copy code kat bawah nie

<div style="
height: 200px;
width: 100px;
overflow: auto;

Dan paste-kan kat HTML yg tadi tu .Yg warne merah tu , anda boleh tukar mengikut kemahuan .

4) Next, copy pula code kat bawah nie

border-color: #codecolor;
border-style: solid;
border-width: 1px;

pastekan kat HTML yg sama dibawah code yg pertama tadi.

border colour, boleh tukar mengikut kemahuan

border style , boleh pilih antara solid , dashed dan dotted.

border width boleh ubah ikut kehendak anda

5) Then, copy code ini pula dan paste-kan di bawah code yg kedua tadi.

scrollbar-arrow-color: #codecolor;
scrollbar-track-color: #codecolor;
scrollbar-face-color: #codecolor;
scrollbar-highlight-color: #codecolor;
scrollbar-darkshadow-color: #codecolor;
scrollbar-3dlight-color: #codecolor;
scrollbar-shadow-color: #codecolor;">

Sila isi #codecolour dgn code warna - warna yg anda ingini yea ? :)

6) Lastly , copy code ini pula dan pastekan di bawah code yg ketiga tadi.

teks/image. </div>

gantikan teks/image tu kepada teks atau image yg anda hendaki :)

7) Preview dulu, kalau dah okay , click Save ! ^^

- kalau anda hendak letak image, pastikan anda letakkan code HTML gmbar tersebut bukanlah URL nya .

- Watch out ! Bila anda preview , code akan berubah .

- Scrollbar colour tidak akan kelihatan jika menggunakan browser Mozilla Firefox .

Nota !

Special credits: ~~banana~~

Ade masalah ? Komen - komen je :)

Wednesday, February 2, 2011

Font ツ

Request 3 drpda Awanis ^^

Aku tak tawu cmne nak terangkan tutor nie .

But dun't worry , try yg ini , ia sgt menjadi :D

http://ayencappucinoroyale.blogspot.com/2010/12/tutorial-tukar-fonts-dekat-blog.html

~~Special credits to: Akak Ayen~~

Ade masalah ? Komen - komen je :)

Letak Icon Comel kat Sebelah Post Title ツ

Request 2 drpda Awanis ^^

Tutor ni senang je :)

1) Dashboard > Design > Edit HTML

2) Tick kan "Expand Widget Template"

3) Tkan ctrl + f , dan search code kat bawah nie .

4) Lepas dah jumpe , copy pula code kat bawah nie .

5) Then, paste code tadi tu di antara <a expr:href='data:post.url'> dan <data:post.title/></a>

contoh:

6) Ganti URL Image tu dgn image/icon yg anda nak .

7) Preview dulu , bile dah okay , baru save .

Ade masalah ? Komen - komen je :)

Hide ShoutBox , Formspring.me and Etc ツ

Request drpda Awanis ^^

1) Page Elements > Add a Gadgets > Add HTML/Javascript

2) Copy code kat bawah nie dulu.

height:350px;

width:140px;

float:left;
cursor:pointer;
background:url('URL IMAGE YG ANDA NAK') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

MASUKKAN KOD SHOUTMIX ANDA KAT SINI :)

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

3) Then paste-kan code tu kat HTML tadi .

4) Yg warna biru tu , korg leh ubah and yg warne ungu tu , korg masukkan lah ape yg die minte tu eh :)

Ade masalah ? Komen - komen je :)