//= 360) elmH = 0; return '#' + elmR + elmG + elmB; } //]]>

Jumaat, 1 Julai 2011

Energy Saver untuk Blog korang!!!

Blog anda boleh diletakkan dalam mode energy saver jika anda mahu. Kalau dunia realiti ada Earth Hour untuk menunjukkan sokongan kepada penjimatan tenaga, blog anda pun boleh.:)



Contoh blog apabila diletakkan energy saver seperti gambar di bawah.



Tutorial untuk letakkan energy saver ini seperti berikut.


1. Dari dashboard > design > edit html.
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi Find (ctrl + F), cari kod </head>

3. Copy kod di bawah dan paste SEBELUM kod </head>

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

Contoh:



4. Save dan lihat hasilnya.

Nota: Anda perlu biarkan selama 1 minit untuk energy saver memulakan operasi.:)

Jom Buat Navbar Menu!!!

Mempunyai tab menu ataupun navbar menu dalam sesebuah blog boleh digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog.



Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut.



1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod ]]></b:skin>
2.1 Jika tidak jumpa, cari kod </head>

3. Copy dan paste kod di bawah SEBELUM kod yang anda jumpa di langkah 2 @ 2.1


ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#FF0099;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
-moz-border-radius: 5px;
}

ul#list-nav li a:hover {
background:#FF6699;
color:#000
-moz-border-radius: 5px;
}


Contoh.:
Tutorial Buat Tab Menu



4. Save template anda.

5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript

6. Copy dan paste kod di bawah di dalam HTML/javascript kemudian save.

<div>
<ul id='list-nav'>
<li><a href='Link'>Home</a></li>
<li><a href='Link'>About Us</a></li>
<li><a href='Link'>Services</a></li>
<li><a href='Link'>Products</a></li>
<li><a href='Link'>Contact</a></li>
</ul>
</div>


Note: Tukarkan 'Link' dengan link yang anda mahu letak di tab menu.
Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>


7. Drag ke bawah element header, save dan lihat hasilnya.:)
Tutorial Buat Tab Menu




Nota 1: Untuk langkah 3, anda boleh ubah beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang anda mahukan.

Nota 2: Jika anda hendak tambah tab menu, copy paste barisan di langkah 6.


Happy blogging.:)

Khamis, 16 Jun 2011

Cara Letak Linkwithin Dalam Blog

Linkwithin antara blog yang berguna untuk memaparkan post yang berkaitan dalam sesebuah blog. Link within ini berbeza dengan 'related post' biasa kerana linkwithin memaparkan thumbnail bagi entri yang berkaitan.

Contoh:

Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.

Berikut adalah cara ringkas untuk meletakkan linkwithin dalam blog.

1. Buka web www.linkwithin.com

2. Pada paparan yang muncul, masukkan maklumat yang berkaitan.
Cara Letak linkwithin Dalam Blog

Jika background anda gelap,tick pada kotak kosong kecil tu, dan pastikan anda masukkan bilangan yang sesuai dengan lebar blog anda.

3. Klik pada install widget
Cara Letak Linkwithin Dalam Blog


4. Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik add widget
Cara Letak Linkwithin Dalam Blog


5. Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)
Cara Letak Linkwithin Dalam Blog

Letak Icon Pada URL Blog...

Mempunyai icon disebelah url sesebuah blog dapat menunjukkan treadmark sesebuah blog.
Pengunjung tetap juga biasanya akan dapat mengingati icon yang unik berbanding icon blogger yang biasa dilihat.

Ini kerana, default untuk icon bagi sesebuah blog adalah icon blogger yang berwarna jingga. Dan kini korang berpeluang untuk mengubahnya mengikut kesukaan korang dengan mengaplikasikan beberapa langkah di bawah.

Jika sebelum ini iconnya begini.

Apa kata kalau tukar menjadi seperti ini.

ataupun lain².:)
Letak Icon Pada URL Blog


Sila pastikan korang mengikuti langkah yang diberi satu-persatu untuk memastikan semuanya berjalan lancar.:).


1) Cari Icon Kesukaan Anda.
Sebagai permulaan, pastikan korang mempunyai icon untuk dijadikan icon untuk blog korang.
Jika yang sudah ada, tiada masalah.
Jika masih mencari² icon yang sesuai, boleh juga lihat² dalam web berikut

http://www.freeiconsweb.com/index.html
http://www.gifanimations.com/
Atau jika masih tidak berkenan, cari je dalam google.:)

untuk icon ini, biasanya file gambar adalah format gif, jpg, jpeg, png. korang boleh cari samada gambar yang static atau animated. Biasanya size (pixel) icon adalah 32x32 atau 34x34 atau 128x128. Untuk tutorial ini, jangan ambil file yang jenis .ico (sebab takut susah untuk upload nanti.)

Katakanlah, aku sudah ada icon, dan icon yang aku suka adalah ini.

2) Upload icon anda ke imageshack.us
Langkah seterusnya korang perlu uplaodkan gambar korang. Boleh gunakan apa² web hosting, imageshack atau photobucket atau lain². Tapi aku cadangkan imageshack sbb tak perlukan pendaftaran untuk upload.

Letak Icon Pada URL Blog

Selepas upload sila pastikan anda ada direct link untuk gambar anda untuk dimasukkan dalam kod nanti.
Letak Icon Pada URL Blog




Langkah seterusnya,adalah untuk letakkan code ke dalam blog korang. Oleh itu, pastikan korang login dahulu ke blog korang.

Langkah²nya adalah seperti berikut.

1)Dari dashboard blog, klik pada layout
Letak Icon Pada URL Blog


2)Klik pada 'edit html' kemudian tick pada 'expand widget templates'
Letak Icon Pada URL Blog


3)Seterusnya, korang hendaklah backup dahulu template anda dengan klik pada 'download full template'. Jika masih tidak faham bagaimana dan kenapa hendak buat backup ni, sila rujuk sinibackup template blog.

4)Drp paparan skrin korang, klik edit, kemudian find. Dalam bahagian kotak dibawah, taipkan < /head>
Letak Icon Pada URL Blog


5)Buka link dibwh utk lihat code, selepas itu copy code yang diberi kemudian paste sebelum < /head>, selepas itu, gantikan dengan direct link icon korang dari imageshack yang korang upload.

KLIK SINI UNTUK PAPARKAN CODE

Seterusnya klik preview untuk lihat icon korang menjadi atau tidak, kalau menjadi, apa lagi, SAVE..:)
Letak Icon Pada URL Blog


Diharapkan korang semua tak menghadapi prob untuk semua ini..
Pilihlah apa² icon yang cantik untuk blog korang. korangkan kreatif!!
Nanti bila tengok blog sendiri, baru bertambah semangat..:)

HAPPY BLOGGING..:)

Sabtu, 11 Jun 2011

Cara untuk Letak Website Lain dalam Blog Korang..

Pernahkah korang terpikir untuk meletakkan satu ruangan website lain dalam blog korang.?
Seperti korang meletakkan website google, yahoo dan so on lam blog korang.
Ini membolehkan pengunjung blog korang melayari web lain tanpa meninggalkan blog korang.:)

Letak Website Lain Dalam Blog


Meletakkan website dalam blog masih boleh dilakukan dengan hanya menggunakan kod html/javascript

Klik disini untuk lihat demo website yang diletakkan dalam blog.

Berikut adalah langkah-langkah untuk tutorial ini.

1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget


Letak Website Lain Dalam Blog


2. selepas klik pada add a gadget, pilih HTML/javascript

Letak Website Lain Dalam Blog


3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript

<!--CHANGE LINKS BELOW TO YOUR OWN-->
<a href="javascript:jumpto('http://www.google.com')">Google</a> |
<a href="javascript:jumpto('http://www.yahoo.com')">Yahoo</a> |

<script language="javascript">
<!--


//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window
var displaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<iframe id="external" style="width:99%;height:400px" src="http://www.google.com"></iframe>'

/////NO NEED TO EDIT BELOW HERE////////////

if (displaymode==0)
document.write(iframecode)

function jumpto(inputurl){
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=inputurl
else if (document.all&&displaymode==0)
document.all.external.src=inputurl
else{
if (!window.win2||win2.closed)
win2=window.open(inputurl)
//else if win2 already exists
else{
win2.location=inputurl
win2.focus()
}
}
}
//-->
</script>


Penerangan :
-Google: Gantikan dengan nama yang koran nak
-www.google.com: Gantikan dengan website yang korang nak


4. Save, klik preview dan jika berpuas hati, klik save.:)

Slamat Mencube......

Sabtu, 4 Jun 2011

Cara Menukar Cursor Blog...

Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

1. Buka website http://www.cursors-4u.com/

2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)

3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telah diwarnakan seperti dibawah

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

4. Kod akhir sepatutnya kelihatan seperti ini sahaja.
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

6. Save dan lihat hasilnya.

Mudah bukan.:)

Jumaat, 3 Jun 2011

Link Dalam Blog Warna-warni

Rainbow link merupakan salah satu trick yang diaplikasikan kepada link yang ada dalam sesebuah blog. asalkan cursor mouse dilalukan pada sesuatu link, link tersebut akan berubah menjadi warna-warni dengan warna yang tertentu.

Tutorial untuk menjadikan blog anda juga mempunyai link berwarna-warni adalah seperti berikut.

1.) Copy code di bawah ini.

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


2) Buka dashboard blog anda, kemudian pergi ke layout > page element > add a gadget
Bagaimana Letak Kod HTML pada blog

3) Cari HTML/javascript. Kemudian apabila sudah buka, paste code kat situ.
Bagaimana Letak Kod HTML pada blog

4) Siap dan save. Itu sahaja. Senang bukan.:)
Related Posts Plugin for WordPress, Blogger...