Animation Recent Post Tutorial

Ok.tutorial kali ni dibuat khas untuk syazwan..
sory u guys.tgh xde mood..
so ajien tulis pendek2 je...

Log in>Design>Add HTML>copy code dibawah

<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:transparent url(#) repeat-x;
border:1px solid #B200B2;
}

#spylist li a {
text-decoration:none;
color:#00CCFF;
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:#00CC00;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#FFFFFF";

aBold = true;

icon = " ";

text = "MeRaPu";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#FFFFFF";

icon2 = " ";

numposts = 5;

home_page = "BLOG URL";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script
src='http://dl.getdropbox.com/u/708209/
scriptabufarhan/recentspy/recentpostthumbspy-min.js'
type='text/javascript'></script>
</div></center>

Paste Dalam ADD HTML tadi>Tukar BLOG URL dlm code di atas dengan Url Blog korang.
>Save..

habis..simple je kan..

Floating Icon Tutorial

ok..kali ni atas permintaan Nyza..
aku buatkn tutorial floating icon pulak..
aku aja cara senang k..
simple & easy.

Macam biasa..mesti log in lah..
Design>Add Gadget>Add HTML/Javascript>
copy kod kat bawah ni>

<!--TNT-by-STC-FEEDBACK-IMAGE-STARTS--><a
style="position: fixed; bottom: 95px; right: 5px;"
href="URL-FACEBOOK-PROFILE"
title="facebook"><img onmouseover="this.
src='http://i699.photobucket.com/albums/vv352/
ajien/blog/facebook2-3.png'"
src="http://i699.photobucket.com/albums/vv352/
ajien/blog/facebook2-3.png"
onmouseout="this.src='http://i699.photobucket.com/
albums/vv352/ajien/blog/facebook2-3.png'"
/></a><
!--TNT-by-STC-FEEDBACK-IMAGE-STOPS-->

Ni untuk facebook..
cari URL-FACEBOOK-PROFILE dlm kod ni &
tukarkan ke url profile anda

<!--TNT-by-STC-FEEDBACK-IMAGE-STARTS-->
<a style="position: fixed; bottom: 55px; right: 5px;"
href="URL-MYSPACE-PROFILE"
title="myspace"><img
onmouseover="this.src='http://i699.photobucket.com/
albums/vv352/ajien/blog/myspace.png'"
src="http://i699.photobucket.com/
albums/vv352/ajien/blog/myspace.png"
onmouseout="this.src='http://i699.photobucket.com/
albums/vv352/ajien/blog/myspace.png'" /></a>
<!--TNT-by-STC-FEEDBACK-IMAGE-STOPS-->

Ni untuk myspace..
cari URL-MYSPACE-PROFILE dlm kod ni &
tukarkan ke url profile anda

<!--TNT-by-STC-FEEDBACK-IMAGE-STARTS-->
<a style="position: fixed; bottom: 15px; right: 5px;"
href="http://twitter.com/USERNAME"
title="Twitter"><img
onmouseover="this.src='http://twitter-badges.s3.
amazonaws.com/t_logo-a.png'"
src="http://twitter-badges.s3.amazonaws.com
/t_logo-a.png"
onmouseout="this.src='http://twitter-badges.s3.
amazonaws.com/t_logo-a.png'"
/></a>
<!--TNT-by-STC-FEEDBACK-IMAGE-STOPS-->

ni untuk twitter
cari USERNAME dalam kod ni
& tukar ke username anda

Pastekan ke HTML/Javascript tadi..

Last skali..tekan save..
semoga berjaya..

Disable Right Click Tutorial

Atas Permintaan Tiea Ibrahim, ajien wat tutorial nie..
nak wat disable right click bukan susah..
senang jer..mule2 kan..

Log in blog>Design>Page Element>

Add Gadget>Open HTML/Page Element>

Copy Code Dibawah

<script language="JavaScript"><br
/><!--
//Disable right mouse click Script
//By ajien //http://ajien-life.blogspot.com/
var message="Jangan Nak Ngade!";
///////////////////////////////////
function clickIE4(){ if (event.button==2)
{ alert(message); return false; } }
function clickNS4(e){ if
(document.layers||document.getElementById&&!document.all)
{ if (e.which==2||e.which==3){ alert(message);
return false; } } }  if (document.layers)
{ document.captureEvents(Event.MOUSEDOWN);
 document.onmousedown=clickNS4; } else if
(document.all&&!document.getElementById)
{ document.onmousedown=clickIE4; }
document.oncontextmenu=new
Function("alert(message);return false")
// --><br /></script>

Pastekan ke HTML/Page Element>Last Skali..SAVE..

Hasilnya:


Selamat Mencuba..

Shoutbox At Right Side Tutorial

Ok..macam biasa kita mulakan dengan:

• Log in Blog.
• Tekan Design
• Tekan Edit Html
• Tekan 'Expand Widget Templates'
• Cari code ini
  

</head>

• Copy Code Dibawah dan pastekan dibawah code diatas

<style type='text/css'>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i699.photobucket.com/
albums/vv352/ajien/blog/Untitled-1-5copy.png')
no-repeat;}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>


<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-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'>

<!-- Begin ShoutMix - http://www.shoutmix.com
--><iframe frameborder='0' height='400'
scrolling='auto'
src='http://www6.shoutmix.com/?ajien_starian'
title='ajien_starian' width='250'>
<a href='http://www6.shoutmix.com/?ajien_starian'>
View shoutbox</a>
</iframe>

<!-- End ShoutMix -->


<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 = (30-gb.offsetWidth).toString() +
"px";</script>

• Tukarkan code dibawah dengan code shoutbox anda

klik untuk pembesaran

• Last Skali...save..

Selamat Mencuba..


P/S: jangan lupa save dulu anda punye templete sbg back up

Blog Icon Tutorial

Fisrt time buat tutorial..haha..
nie pon atas permintaan seseorang..

so skrg aku nk tunjuk kat korang cara nk letak icon kat blog...
contoh:


klau nak letak icon nie..

• log in blog
• Tekan Design
• Tekan Edit Html
• cari code dibawah(control F)

<title><data:blog.pagetitle/></title>

• copy code dibawah

<link href="'http://i699.photobucket.com/
albums/vv352/ajien/Untitled-1-2.gif'" rel="'shortcut"
type="'image/vnd.microsoft.icon'/">

• paste code itu diatas code yg atas td..

• Buat seperti gambar dibawah

klik untuk pembesaran

• Tukarkan Url Icon yg berada didalam kotak biru tersebut dengan url icon yg anda mahukan
  

klik untuk pembesaran

• Akhir Sekali tekan save..

FAHAM SUME???

SELAMAT MENCUBA..


P/S: jangan lupa save dulu anda punye templete sbg back up