Tukar Gambar Apabila Dilalukan Cursor

Memasang gambar yang boleh bertukar semasa dilalukan cursor di blog mungkin boleh menambah sedikit kelainan pada blog anda. Dan juga gambar yang disertakan dengan link boleh menarik sedikit perhatian.



Contohnya, cuba lalukan cursor anda pada gambar di bawah. (Dan juga boleh klik untuk ke blog ohbest)





Tutorial adalah seperti berikut.

1. Gunakan kod di bawah, tukarkan link yang anda mahu, url gambar pertama dan url gambar kedua.

<a href="Target link" target="_blank"><img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" /></a>

Contoh untuk kod untuk demo di atas adalah

<a href="http://ohbest.blogspot.com" target="_blank"><img src="http://i.imgur.com/Z5B1M.png" onmouseover="this.src='http://i.imgur.com/PlE1J.jpg'" onmouseout="this.src='http://i.imgur.com/Z5B1M.png'" /></a>

2. Anda boleh post di dalam entri blog anda seperti biasa ataupun boleh letakkan di sidebar.


Senang dan mudah bukan.?.:)


Nota: Jika mahu gambar sahaja tanpa link, kodnya seperti dibawah.

<img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" />

Selamat mencuba.:)

Cara Unfollow Blog | Stop Following Blog

Bagi seseorang blogger, biasa untuk istilah follow sesebuah blog. Walau bagaimanapun, ada ketikanya kita akan terasa untuk berhenti daripada follow blog tersebut mungkin disebabkan beberapa perkara yang mungkin kita tidak suka dengan blog tersebut



Tutorial kali ini akan menunjukkan cara untuk unfollow blog, ataupun stop following blog.


1. Dari dashboard, scroll ke bawah sehingga jumpa tab blogs i'm following, kemudian klik pada Manage



2. Senarai blog yang anda follow akan keluar, kemudian klik pada settings



3. Jika diminta akaun, masukkan akan google anda. Jika sudah login, teruskan pada langkah 4.



4. Pada sebelah kanan, klik pada stop following this site



5. Bila keluar pengesahan, klik pada Stop following.




Tambahan: Jika anda mempunyai banyak blog untuk unfollow pada satu masa, pilih tab sites you've joined, dan anad boleh pilih terus sahaja untuk stop following

Letak Emotion Icon Dalam Komen

Kebiasaannya komen dalam blog anda adalah dalam bentuk perkataan semata-mata. Tetapi mahukah kalau komen untuk blog anda juga boleh diletakkan emotion.?
Tentu lebih menarik dengan adanya emotion.

Contoh seperti gambar di bawah, dan anda juga boleh mencubanya sendiri di test blog.


Tutorial untuk letakkan emotion icon dalam komen adalah seperti berikut.

1. Dari dashboard > design > edit HTML > Expand widget template



2. Backup template (download full template) anda untuk langkah berjaga². (more info)

3. Menggunakan fungsi find,(ctrl + F) cari </body> dan letakkan kod di bawah sebelum </body>

<script src='https://sites.google.com/site/unwanted86/javascript/emotionicon.js' type='text/javascript'/>

contoh:


4. Menggunakan fungsi find lagi, (ctrl + F), cari <b:if cond='data:post.embedCommentForm'> dan letakkan kod di bawah selepas kod <b:if cond='data:post.embedCommentForm'>

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>To Use A Smiley In Your Comment, Simply Add The Characters Beside Your Choosen Smiley To The Comment:
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) <a href='http://tutorialuntukblog.blogspot.com/2011/05/letak-emotion-icon-dalam-komen.html'target="_blank"><small>Grab tutorial here</small></a>
</b>
</div>

contoh:


5. Save dan lihat hasilnya di ruangan komen anda.:)

Tutorial 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

3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)

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.:)

Tutorial 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..:)


Pssst.. Mencari kod warna.?
Rujuk di bawah.:)

Title Bar Maker

Sebelum ini sudah ada tutorial untuk buat title blog bergerak dari kanan ke kiri, untuk kali ini, dibawakan terus title bar generator.

contoh title bar (title blog)


Pilihan yang ada untuk title bar maker ini.


Anda boleh memilih pelbagai jenis gerakan yang anda mahukan dan setting yang begitu mudah.

Title bar generator adalah seperti di bawah.



1. Masukkan maklumat yang anda mahu.

2. Klik preview untuk tengok contoh paparan. Dan jika berpuas hati, klik pada 'OK, generate code!'

3. Code yang anda perolehi, copy dan paste pada HTML/javascript blog anda.
(dashboard > design > add a gadget > HTML/javascript ) [link tutorial]

4. Siap. Senang dan mudah kan.:)

Tips Menaip Entri Dalam Blog : Part 1

Cara penghasilan entri dalam blog merupakan element yang perlu dititikberatkan untuk menaip dalam blog. Walaupun blog tidak mempunyai format untuk menaip seperti mana karangan bahasa melayu, tetapi cara menghasilkan entri dalam blog penting untuk mencerminkan bagaimana pemilik blog menguruskan blog sendiri.



Cara menaip yang bagus juga akan memastikan pengunjung blog anda akan tertarik kepada blog anda, ditambah pula dengan faktor-faktor lain. Boleh dikatakan, cara menaip dalam blog antara perkara yang tidak boleh dipandang enteng oleh pemilik blog.

Apakah cara/bagaimanakah kandungan blog yang sepatutnya untuk menaip sesebuah entri?.


1. Perenggan

Ini sebenarnya antara perkara yang paling penting semasa menaip sesuatu dalam blog. Tidak kiralah samada blog berbentuk peribadi, maklumat, perkongsian, pengalaman atau apa sahaja. Perenggan akan memudahkan pengunjung blog anda membaca apa yang anda hendak sampaikan. Dan juga mempengaruhi pemahaman untuk sesebuah entri.

Ini adalah perenggan kedua. Tengok untuk taip point ini pun perenggan di buat untuk memudahkan anda membaca bukan.?.:). Bayangkan kalau sesebuah entri itu mempunyai ayat yang berterusan 1000 patah perkataan, tidak ke letih mata melihatnya. Hendak membaca pun boleh jadi tiada mood.:). Lagipun karangan masa sekolah pun diajar untuk buat perenggan, jadi kenapa tidak aplikasikan dalam penulisan blog.:)


2. Perkataan.

Perkataan juga memainkan peranan dalam menghasilkan sebuat entri yang baik. Pastikan kalau bleh anda menggunakan perkataan bahasa baku sebanyak mungkin dan penting juga perkataan yang anda gunakan mudah difahami oleh pengunjung. Sekali sekala tiada masalah kalau hendak guna short form atau perkataan meleret. Tapi kalau selalu sangat, hendak membaca pun tergeliat lidah hendak menyebutnya.

Contoh, Sayeeerr sukerr sangat tawww...Kalau ayat macam ini diletakkan untuk dialog ok lagi. Kalau sepanjang-panjang entri perkataan macam ini, sakit juga hendak membaca.:). tujuan menghasilkan entri juga untuk memudahkan kefahaman kepada pengunjung blog. Contoh walaupun anda seorang doctor, takkan semua entri hendak guna bahasa saintifik je kan. Lainlah kalau pengunjung blog anda semuanya doktor.:)


3. Entri jangan terlalu panjang.

Mungkin anda seorang yang begitu hebat mengarang. Tetapi kehebatan anda mengarang sehingga sehari tanpa henti bukan petunjuk yang baik kepada pengunjung anda. Pembaca juga akan merasa bosan jika entri yang dihasilkan terlalu panjang. Lagi satu, jika entri terlalu panjang, kemungkinan untuk melalut (lari dari tajuk entri) juga boleh berlaku.

Oleh itu biarkan entri anda bersesuaian untuk dibaca, mungkin ambil masa 5 minit berbanding anda menghasilkan entri yang memerlukan 1jam untuk habiskan.:).
Tetapi, jika memang anda anda perkara bagus atau penting untuk diberitahu pengunjung, boleh dijadikan dalam beberapa bahagian entri. seperti part 1, part 2 dan seterusnya. Itu akan lebih selesa di baca berbanding satu entri yang terlalu panjang.

Adakah anda juga perasan entri ini baru sahaja untuk part 1.?.:)

-------------------------------------------

Menaip entri dengan cara yang betul untuk mengekalkan blog anda lebih kepada mesra pengunjung. Kecualilah kalau blog anda tu anda baca seorang sahaja.:)

Dan tunggukan untuk next entri untuk tips menaip entri dalam blog untuk part 2.:)

Happy blogging.:)


Note: Entri asal ditaip diblog unwanted86.blogspot.com.

Tutorial Gerakkan Title Blog

Title blog secara default adalah dalam keadaan statik. Anda boleh tukarkan title blog anda dengan mudah dan juga anda boleh membuatkan ianya bergerak dari kanan ke kiri.



Tutorial untuk buatkan title blog bergerak adalah seperti berikut.


1. Dari dashboard > Design > Add a gadget > Html/Javascript

2. Copy dan paste code berikut dalam ruangan HTML/Javascript

<script language=javascript>
msg = "Title Blog Anda";

msg = "..." + 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>

Note: Tukarkan 'Title Blog Anda' dengan apa sahaja yang anda mahu.

3. Save dan lihat hasilnya.:)


Update:
Mahu lebih banyak gerakan untuk title blog ini.? rujuk entri http://tutorialuntukblog.blogspot.com/2011/05/title-bar-maker.html