Perkataan Ikut Cursor
Ingin perkataan mengikut cursor anda semasa melayari blog.?
Contohnya seperti di bawah.
Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript (more info)
2. Copy dan paste kod berikut dalam html/javascript yang anda buka.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
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;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Perkataan anda di sini";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
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>
Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.
3. Save dan lihat hasilnya.:)
Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.
1.Tukar style
font-style: normal; (pilihan lain italic, oblique, atau inherit)
2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code
Following Star Pada Cursor
Adakah anda suka kalau cursor yang anda guna untuk blog ada beberapa bintang kecil berwarna yang mengikutinya.? Contoh macam gambar di bawah.
Kalau anda suka, ini ada tutorialnya.:)
1. Dari dashboard > design > add a gadget > HTML/javasrcript [link]
2. Copy code di bawah mengikut kesukaan anda dan paste ke dalam HTML/javascript
i) Following star warna warni
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/rainbows.js"></script>
ii) Following star warna biru
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/blues.js"></script>
iii) Following star warna purple
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/purples.js"></script>
3. Save dan lihat hasilnya.:)
Tukar Warna Text Highlight
Apabila seseorang highlight text dalam blog, warna yang akan keluar adalah biru, itu default.
Tetapi ada juga tutorial yang membolehkan anda menukar warna text selection ini seperti contoh di bawah.
Default.
Selepas tukar warna text selection
Tutorial untuk tukar warna text selection adalah seperti berikut.
1. Dari dashboard > design > edit HTML
2. Dengan menggunakan fungsi Find, cari code body {
3. Selepas jumpa code body {, pastekan kod di bawah di atas body {
::-moz-selection {
background: #CC3399;
color: #ffffff;
}
Contoh:
Note: Anda boleh menukar warna text highlight dengan menggantikan warna kod yang dihighlight di atas.
4. Save dan lihat hasilnya..:)
Cara Membuat Title Header Bergerak
Pernah tengok title header blog yang boleh bergerak ? Title header ialah tajuk yang atas sekali sebelah lambang blogger [B]. Tahu cara nak membuatka ia bergerak contonya seperti SELAMAT DATANG KE BLOG SAYA dan sebagainya ? Kalau tak tahu anda boleh baca entry ini , kalau dah tau tak payah lah baca.
Langkahnya ialah :
1. Login akaun blogspot anda.
2. Pilih blog [ kalau anda ada banyak blog la ]
3. Klik DESIGN yang ada kat sebelah SETTING tu.
4. Klik EDIT HTML
5. Klik kotak Expand Widget Templates.
6. Cari perkataan <HEADER>
7. Salin / copy kod ini sebelum kod <HEADER> tadi :
<script type='text/javascript'>
//<![CDATA[
msg = " SELAMAT DATANG KE BLOG KAMI ";
msg = "--- [MACAM-MACAM ADA] ---" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}>
scrollMSG();
//]]>
</script>
Jika anda mahukan tulisan lain anda boleh ubah ajer tulisan selamat datang tu dan macam-macam ada tu yea.
Jangan lupa SAVE kan template anda tu. Atau kalau takut tak jadi cuba klik PReViEW dulu.
Ok , selamat mencuba ...
Letak Button Like Di Blog
Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.
Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.
Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.
Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda
Tutorial untuk meletakkan button ini seperti di bawah.
1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript
2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://URL-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>
note: Gantikan URL-ANDA dengan url blog anda
3. Save dan lihat hasilnya.:)
Disable Highlight Entry
Sesetengah orang mungkin agak tidak senang bagi sesiapa mengambil hasil entri dalam blog mereka. Antara cara yang digunakan untuk mengelakkan entri atau kandungan dalam blog di'ambil' adalah dengan disable right click atau disable highlight.
Tutorial untuk disable right click sudah pun ada sebelum ini, dan kali ini tutorial adalah untuk disable highlight text dalam blog.
Ikuti tutorial mudah seperti di bawah.
1. Dari dashboard > design > add a gadget > HTML/javascript
2. Masukkan kod di bawah dalam ruangan HTML/javascript
<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>
3. Save dan lihat hasilnya..:)
TIPS:
Untuk kesan yang lebih baik, letakkan/drag HTML atas ruangan blog post. Ini akan membuatkan kod disable highlight ini 'dibaca' dahulu sebelum entri.:)
Disable Right Click
Adakah anda tidak suka orang lain mengambil apa sahaja kandungan dalam blog anda.?
Dan pada masa yang sama anda tidak suka dengan kod² yang berserabut yang perlu di edit dalam 'edit html'. Kini ada cara mudah untuk realisasikan hasrat anda.:)
Kenapa Perlu Disable Right Click.?
Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk megelakkan orang lain mengambil apa yang ada dalam blog mereka. Samada tidak senang ayat mereka ditiru bulat² (copy paste), ataupun untuk mengelakkan bandwidth habis digunakan. Kebiasaan alasan yang aku selalu baca adalah kerana ada orang yang copy entri mereka bulat².
Berikut adalah contoh msg yang akan keluar apabila anda aktifkan disable right click
Berikut adalah cara yang mudah untuk menggunakan fungsi ini.
1. Copy kod ini.
<script language=JavaScript>
<!--
//edit by unwanted
var message="Masukkan Mesej Anda Disini";
///////////////////////////////////
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")
// -->
</script>
2. Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Layout>Add a Page element >html/javascript. Kalau masih kurang jelas, klik sini.
Apabila sudah siap, save dan lihat kesannya pada blog anda.:)
Letak Salji Di Blog
Hai all...wah dah lama saya tak kongsi dengan korang tutorial untuk menghiaskan blog...ok...hari ini saya nak ajar korang cara nak letak effect salji di blog korang^^...Sebelum saya mulakan tutorial saya nak kasi tahu yang effect salji ini tidak memberatkan blog anda...Ada banyak tutorial yang di kongsikan para blogger-blogger lain...tapi kebanyakkannya ada yang memberatkan blog bila effect ini di pakai...Jadi korang jangan risau...Effect salji yang koz berikan ini tak memberatkan blog anda^ ^...Caranya amat mudah ...kalau korang nak cube sila ikuti langkah-langkah di bawah:-
Langkah 1
Layout>Page Elements>Add a Gadget>HTML/Javascript
Langkah 2
Kemudian korang copy dan paste code di bawah
<br />
<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></p>
<p>/***********************************************</p>
<p>* Snow Effect by BudakNakal at http://kozumiro.blogspot.com/</p>
<p>* Please keep this notice intact</p>
<p>***********************************************/</p>
<p></script><br />
kemudian save....
dan lihat hasilnya...
selamat mencuba^ ^...
Cara Membuat Box Pesanan Show/Hide Di Blog
Hai all...Next tutorial pada hari ini koz akan ajar korang cara nak buat box pesanan.Kegunaannya adalah untuk memberi pesanan kepada para pengunjung sama ada dalam bentuk nasihat mahu pun pemberitahuan.Jadi kalau nak buat ikuti langkah-langkah di bawah:-
Langkah 1
Seperti biasa backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.
Langkah 2
Copy dan paste code di bawah ,di atas code ]]></b:skin>
.author-box {
background: #FF99CC;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}
Kemudian save...
Langkah 3
Layout>Page Elements>Add a Gadget>HTML/Javascript
Langkah 4
copy dan paste code di bawah
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:5px solid #FDE8F8;
background:#F76FB4;
padding:10px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}
</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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
<img src="http://img706.imageshack.us/img706/642/tutupb.png" title="DOuble Klick Tau!" alt="tutup" />
</a>
</div>
<center>
<div class='author-box'>
<img alt="avatar" class="avatar avatar-70 photo" height="70" src="http://img189.imageshack.us/img189/4873/firetoy48x48.png" width="70" /><b>Perhatian!</b><br />
Pesanan Korang<br />
</div>
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Pada code berwarna merah tetapkan warna yang korang suka.
Pada code berwarna biru Letak gambar avatar yang korang suka.
Pada code berwarna hijau Tulis pesanan yang korang suka.
Save dan lihat hasilnya...
Camat mencuba...
Cara Buat Dropdown Menu
Hai all...camat pagi...ahak...maap ye sebab ada yang menunggu tutorial berikutnya dari koz...hihi...okey hari ini koz akan ajar next tutorial pulak dekat korang...nak belajar??^^okey kalau nak hari ini koz akan berkongsi dengan korang cara buat Dropdown Menu dekat blog korang...contoh seperti yang koz ada buat unutk Rakan Budak Nakal di belah kanan>>>
Kalau nak buat ikuti langkah-langkah berikut...
Langkah 1
Dashboard>Layout>Page element>Add a gadget>HTML/javascript.
Langkah 2
Copy dan paste code di bawah
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option>
<option value="Link 3">Text 3</option>
</select>
Langkah 3
Pada Link 1 Masukkan link.
Pada Text 1 Masukkan perkataan/ayat untuk link yang di paparkan.
Langkah 4
JIka ingin menambah ruangan menu,masukkan code ini
<option value="Link ">Text </option>
Diatas/sebelum code ini
</select>
Save dan lihat hasilnya...
camat mencuba...
Hide/Show Shoutbox Versi Simple
Sebenarnya saya nak buat tutorial ini dalam versi comel...tapi memandangkan ada yang nak jenis simple saya akan edit kembali code tersebut kepada yang asal..
jadi jika inginkan yang jenis simple teruskan megikuti langkah-langkah berikut:-
Langkah 1
Login blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript
Langkah 2
Korang copy dan paste code di bawah:-
<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://img411.imageshack.us/img411/6496/hijau.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">
MASUKKAN CODE SHOUTBOX 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 = (30-gb.offsetWidth).toString() + "px";
</script>
Langkah 3
Kemudian korang masukkan code shoutbox korang pada perkataan
" MASUKKAN CODE SHOUTBOX DISINI "
dah masukkan save dan tengoklah hasilnya...
Pada code yang berwarna hijau korang boleh ubah gambar tersebut(saiz 100X30)
