Sunday, 4 September 2011

Tulisan Pelangi + Maquee

Kalo ni aku nak share cara nak wat tulisan pelangi yang berkilauan + marquee... benda ni simple je....saje nak share...


ok macam ni caranya:
1. Pergi kat Dashboard > Design > Page Element > Add a Gadget  > HTML/Javascript
2. Pastu Copy (Copy+C) javascript kat bawah ni dan paste (Paste+V) kat ruang HTML/Javascript



<marquee behavior="SCROLL" direction="left">
<script language="JavaScript">
<!-- begin
/*
 * Notes on hue
 *
 * This script uses hue rotation in the following manner:
 * hue=0   is red (#FF0000)
 * hue=60  is yellow (#FFFF00)
 * hue=120 is green (#00FF00)
 * hue=180 is cyan (#00FFFF)
 * hue=240 is blue (#0000FF)
 * hue=300 is magenta (#FF00FF)
 * hue=360 is hue=0 (#FF0000)
 *
 * Notes on the script
 *
 * This script should function in any browser that supports document.getElementById
 * It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6
 *
 * Accessibility
 *
 * The script does not write the string out, but rather takes it from an existing
 * HTML element. Therefore, users with javascript disabled will not be adverely affected.
 * They just won't get the pretty colors.
 */

/*
 * splits par.firstChild.data into 1 span for each letter
 * ARGUMENTS
 *   span - HTML element containing a text node as the only element
 */
function toSpans(span) {
  var str=span.firstChild.data;
  var a=str.length;
  span.removeChild(span.firstChild);
  for(var i=0; i<a; i++) {
    var theSpan=document.createElement("SPAN");
    theSpan.appendChild(document.createTextNode(str.charAt(i)));
    span.appendChild(theSpan);
  }
}
function RainbowSpan(span, hue, deg, brt, spd, hspd) {
    this.deg=(deg==null?360:Math.abs(deg));
    this.hue=(hue==null?0:Math.abs(hue)%360);
    this.hspd=(hspd==null?3:Math.abs(hspd)%360);
    this.length=span.firstChild.data.length;
    this.span=span;
    this.speed=(spd==null?50:Math.abs(spd));
    this.hInc=this.deg/this.length;
    this.brt=(brt==null?255:Math.abs(brt)%256);
    this.timer=null;
    toSpans(span);
    this.moveRainbow();
}
RainbowSpan.prototype.moveRainbow = function() {
  if(this.hue>359) this.hue-=360;
  var color;
  var b=this.brt;
  var a=this.length;
  var h=this.hue;

  for(var i=0; i<a; i++) {

    if(h>359) h-=360;

    if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }
    else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }
    else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
    else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }
    else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
    else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }

    h+=this.hInc;

    this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
  }
  this.hue+=this.hspd;
}
//-->
document.write('<h id=r522>TEXT ANDA DISINI</h></a><br/>');
var r522=document.getElementById("r522"); //get span to apply rainbow
var myRainbowSpan=new RainbowSpan(r522, 0, 360, 255, 50, 18);
myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
</script>
</marquee>

3. Korang ganti " TEXT ANDA DISINI " dengan ayat korang ... Pastu save k..

p/s: kalau korang tak nak marquee tu korang boleh padam kod yang berwarna hijau tu k..

Cursor Effect - Teks Berpusing Mengikut Cursor

Screenshot Cursor Effect - Teks Berpusing Mengikut Cursor
1. Login ke Dashboard blogger.
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 anda nak untuk letakkan kod javascript tu nanti.

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:
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
   Website: http://www.tempermedia.com/
   Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
   Modified Here for more flexibility and modern browser support
   Modifications as first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This notice must remain for legal use
   */

;(function(){

// Your message here (QUOTED STRING)
var msg = "TEXT ANDA DISINI";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){ // makes the circle
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},

drag = function(){ // makes the resistance
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},

ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};

})();

</script>

Keterangan:
  • TEXT ANDA DISINI --> Gantikan dengan teks anda.
  • color: #000; --> Gantikan kod warna #000 dengan warna tulisan yang anda mahu. 
  • var size = 24; --> Gantikan 24 dengan saiz tulisan yang anda mahu.
  • var circleY = 0.75; var circleX = 2;  -->  Gantikan nilai X dan Y untuk adjust bulatan pusingan teks.
  • var letter_spacing = 5; --> Gantikan nilai 5 dengan jarak tulisan yang anda mahu.


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

GAMBAR 4

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

Friday, 2 September 2011

Welcome Image (Click Here To Enter)

1. Log In > Dashboard > Dashboard > Design > Edit HTML > Tick Expand Widget
2. Di keyboard tekan CTRL+F dan cari code kat bawah nie..
]]></b:skin>
3. Now, copy code bawah nie dan paste di atas code kita cari tadi.
</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src="URL IMAGE ANDA"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>
4.  Yang warna kuning tue letak URL image k!
5. Kalau jadi, Save Template..kalau tak jadi tanya budak comel nie >> KLIK
6. tutorial nie apit credit untuk LyssaSecret..
7. Kat bawah nie apit share image-image welcome note untuk anda..
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHp07YrVFK2TkhrVjZRefNYtfR9b_SFcCZPz-D0B39Ne-GvWmOI6r9sXSS20IvecuRFvUb6ycG1AS7ahyphenhyphen1gWWPKEE0JVXwnKgwIhFU_MhdzLkbp2V_PzQHN3IsyEwzU6uRSb930xyQsvnO/s1600/Welcome+Note+2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDgOOtIkc3UKNu_NT-Ha7X5j0x_fdPIhafRjsR7XMAyHLGM_Mz8AQnFz4Yx_LKQBhbleRxMM1fNRUBSwf86buwZdRFHgiQnlCojfKnlGtdulUP8IzvgIRDKzIDbquesETLjtHB5QqY7G5c/s1600/Welcome+Note+3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBKP5-t2_dAKyxgN_ITqF3wu7Rd6DGS0hAxClc6Jyfl-lILQkM3xvR8jrE8UwuKCruJhr4k_mNYA3XYIi-kn8RORNccMceahxxQZ0yaScb-3yks12z7_RhMm7cH8sRP7dHCG-juqaeNIAP/s1600/Welcome+Note+4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyiYB2Qxs2rrwta8ZZiTQkS7r-NYBfkLmInqphFoY-xUS4ZhM4XW-BydACjRqnqppKsHXwBHrCfGfEOfW0ai2qDDseZPIO2hh-FXQAqkMpz2zlx2052qg_gc_xYnlNFzOi3RAF79LVswPJ/s1600/Welcome+Note+Pink.png

Buat Read More Dalam Blog

Tutorial ini akan menunjukkan cara untuk buat read more bagi sesebuah blog.
Sebenarnya kaedah ini sudahpun agak lama wujud dalam blogger.com, tetapi mungkin pengguna blogspot tidak perasan. Dan bagi blogger yang menggunakan template asal daripada blogger.com, kaedah ini amat mudah untuk diaplikasikan.


Berikut tutorial ringkas untuk buat read more yang sudah tersedia dalam blogger.com


1. Login ke akaun blogger anda, kemudian daripada dashboard klik new post.


2. Kemudian taipkan beberapa patah perkataan, kemudian diselangi oleh kod berikut. (Ini untuk test template anda sudah tersedia dengan kod penuh atau belum)
<!-- more -->


contoh: anda boleh copy dan paste bawah ni ke dalam new post anda.

Ini ayat sebelum perkataan 'read more'
<!-- more -->
Ini ayat selepas perkataan 'read more'


3. Kemudian klik pada publish, dan tengok dari paparan muka hadapan blog anda samada read more ini berjaya atau tidak. Kalau berjaya, kerja anda sudah siap.:)

Kalau tidak berjaya,

(biasanya melibatkan bukan template default dari blogger), sila ikuti sedikit penambahan berikut.

1. Dari dashboard, klik pada layout > edit html

2. Backup template anda, kemudian klik pada expand widget templates

3. Menggunakan keyboard, tekan ctrl + f (untuk membuka fungsi find), kemudian cari kod berikut
<data:post.body/>


4. Copy dan paste kod ini dan letakkan dibawah kod tadi.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >


5. Kod anda sepatutnya kelihatan seperti dibawah
cara Buat Read More Dalam Blog


6. Save template anda dan lihat hasilnya.

Trik Format Phone Nokia - Symbian

Pagi ni aku nak share ngan korang cara nak format phone Nokia ....
Sebelum format korang kena:
- backup dulu phone korang tu guna nokia pc suite k...
- pastikan bateri phone penuh
- Pastikan jugak phone korang off k



Format ni de dua:
1. Soft format
2. Hard format

Ok sebelum tu aku nak terangkan pasal Soft format ni,, aku sarankan sebelum korang wat hard format ni korang try la dulu wat soft format ni...Senang je... korang dail *#7370# atau *#7780#. nanti keluar gambar macam kat bawah ni

s60reset Tips and tricks To Format Nokia Symbian Phones

korang tekan je Yes dan phone akan Restart...Siap...
Soft format ni boleh gak korang guna kat phone jenis Nokia S40...


Bagi yang phone yang dah nazak bebenor la kan..misalnye boleh on tp keluar splash nokia je ..korang tak boleh nak guna Soft Format tu..Terpaksa la guna hard format...meh aku ajar macam mana nak buat

1. pastikan phone korang di matikan
2. tekan dan hold butang Hijau(call) + * + 3 serentak dan selepas itu tekan dan hold juga butang Switch ON/OFF.. (ingat, pasti semua butang di HOLD secara serentak tau sehingga phone tu ON k..)
 -kalau bila phone tu dah ON dan terpapar pilihan negara maknenya korang dah boleh la lepas sume butang tu..pastu pilih la negara nak...dah tu setup je macam biase..



**Bagi phone yang jenis touch skrin ada cara dia sendiri....
1. Matikan phone
2. tekan dan hold butang Hijau (call) + Merah (stop call) + kamera serentak dan selepas itu tekan dan hold pula butang ON/OFF


Ni senarai phone yang boleh guna trik ni:
6220 classic
5320 XpressMusic 
6210 Navigator
6650
N78
N96
= = = = = = = =
** S60 3rd Edition, Feature Pack 1 **
(OS v9.2)
5700 XpressMusic
6110 Navigator
6120 classic
6121 classic
6124 classic
6290
E71 (320×240)
E66
E51
E90 Communicator (800×352)
N76
N81
N81 8GB
N82
N95
N95 8GB
N95-3 NAM
= = = = = = = =
** S60 3rd Edition (initial release) **
(OS v9.1)
3250 (176×208)
5500 Sport (208×208)
E61 (320×240)
E61i (320×240)
E62 (320×240)
E50
E65
N71
N73
N77
N91 8GB (176×208)
N92
N93
N93i
E60 (352×416)
E70 (352×416)
N80 (352×416)
= = = = = = = =
** S60 3rd Edition **
(OS v9.1)
N75
N91 (176×208)
= = = = = = = = = = = = = = = = =
[*[*[*[ S60 2nd Edition ]*]*]*]
176×208 resolution
= = = = = = = =
** S60 2nd Edition, Feature Pack 3 **
(OS v8.1a)
N70
N72
N90 (352×416)
= = = = = = = =
** S60 2nd Edition, Feature Pack 2 **
(OS v8.0a)
6630
6680
6681
6682
= = = = = = = =
** S60 2nd Edition, Feature Pack 1 **
(OS v7.0s)
3230
6260
6620
6670
7610
= = = = = = = =
** S60 2nd Edition (initial release) **
(OS v7.0s)
6600
= = = = = = = = = = = = = = = = =
[*[*[*[ S60 1st Edition ]*]*]*]
176×208 resolution
(OS v6.1)
3600
3650
3660
3620
7650
N-Gage
N-Gage QD
= = = = = = = = = = = = = = = = =
[* [* [* [ S80 Devices ] *] *] *]
= = = = = = = = = = = = = = = = =
[*[*[*[ S80 2nd Edition ]*]*]*]
(OS v7.0s)
9300i (640×200)
9300 (640×200)
9500 (640×200)
= = = = = = = = = = = = = = = = =
Other Series
sometimes call S90 (in fact no S90 of Developer Platform)
(OS v7.0s)
7710 (640×320)
(OS v6.0)
9210c Communicator (640×220)
9210i Communicator (640×220)
9290 Communicator (640×220)
= = = = = = = = = = = = = = = = =
 



Hidden shoutbox

1. Dashboard-Design-Page Element-Add Gadget-HTML/JAVASCRIPT .
2. copy (ctrl+c) code kat bawah ni n paste (ctrl+v) kat HTML JAVASCRIPT tu .
* jangan lupa letak code shoutbox atau cbox korang .




<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('http://i1041.photobucket.com/albums/b418/hannafauzann/swdw-7.png?t=1281336728') 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, 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 SHOUTBOX ANDA DISINI

<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>
-  sape yang xde shoutbox tu boleh create shoutbox tu kat >sini<
- yang warna purple tu width dan height utk gambar .
- yang warna emas tu url gambar yang korang nak .
- yang warna merah tu , kalau kau kena adjust sikit . sebab kengkadang gambar tu ley tersorok tak tunjuk sepenuhnya gambar tu dan kengkadang dia tutup pun tak habis . kalau kau guna code ni n ok, takde masalah, tak payah gatal tangan ubah code tu .
Photobucket
Photobucket

Photobucket






Letak Tajuk Entri Pada Read More

Kebiasaannya, apabila sesebuah blog menggunakan fungsi readmore, perkataan yang keluar adalah samada 'read more', 'baca lagi', 'klik untuk teruskan pembacaan' dan lain-lain tanpa melibatkan tajuk sesebuah entri.

Tutorial ini akan menerangkan bagaimana untuk menambah sedikit kod daripada tutorial readmore sebelum ini untuk membolehkan tajuk entri keluar secara automatic selepas perkataan 'readmore' (atau perkataan lain berkaitan'.



Sebelum


Letak Tajuk Entri Pada Read More



Selepas


Letak Tajuk Entri Pada Read More


Cara-cara untuk meletakkan kod untuk trick ini adalah seperti berikut.

1. Login akaun blogger dari dashboard > layout > edit HTML > expand widget templates

2. Klik ctrl + F untuk menghidupkan fungsi find kemudian cari kod berikut
<data:post.body/>


3. Dibawah kod <data:post.body/> , ada beberapa kod yang berkaitan dengan readmore, dan buat penambahan kod dibawah selepas perkataan 'readmore'(atau perkataan lain yang berkaitan)
-pastikan kod ini terletak sebelum </a>
<data:post.title/>

Lihat contoh dibawah untuk memudahkan.

Letak Tajuk Entri Pada Read More


4.Apabila selesai anda boleh save dan lihat hasilnya.:)