About Blog

Blog ini berisikan tentang Teknologi, Musik, Design, Humor, Photography dan cerita-cerita unik lainnya

Jumat, 11 April 2014

TIPS UNTUK MENGUBAH BLOG DAN POSTING KITA MENJADI LEBIH BAIK

berikut beberapa desain untuk membuat blog dan posting kita menjadi lebih baik..

Membuat DROPDOWN Menu

Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk meletakkan pelbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link kawan², link rujukan, link tips dan pelbagai lagi.

Contoh dropdown menu adalah seperti berikut
Cara Buat Dropdown Menu


Tutorial untuk membuat dropdown menu ini adalah seperti berikut.

1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget > HTML/javascript

2. Copy code berikut ke dalam ruangan html/javascript.

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="link 1" /> text 1
<option value="link 2" /> text 2
</select>
Contoh :
<option value="http://www.facebook.com/davis.lengkoan/" /> My Facebook</option>

penerangan :
Link 1: Masukkan link untuk dibuka
Text 1: Masukkan perkataan/ayat untuk link

Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select>
3. Apabila selesai, save hasil kerja anda.:)


TAMBAHAN:
Untuk kode di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada page/window yang berlainan, sila tukarkan kode:

<select onChange="document.location.href=this.options[this.selectedIndex].value;">


kepada kode ini.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Membuat CURSOR menjadi berkilauan

Tutorial ini akan menunjukkan bagaimana untuk menjadikan cursor anda menghasilkan 'bintang²' yang berkerlipan. Terdapat pelbagai jenis warna yang telah diletakkan untuk memudahkan pemilik blog sesuaikan dengan warna thema masing². Kata lain yang mungkin sesuai ialah untuk menjadikan cursor anda sparkle.(tak tahu istilah betul apa untuk effect ini.:)

Kalau masih tidak faham bagaimana hasilnya, boleh lihat contoh gambar di bawah.:)

Tutorial untuk membuatkan cursor anda menjadi sparkle adalah seperti berikut:

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Pada ruangan HTML/javascript, masukkan kode berikut.


<script src="URL JS" type="text/javascript"></script>


Note: untuk URL JS, tukarkan dengan kode berikut mengikut warna sprakle yang anda kehendaki

Biru - https://sites.google.com/site/unwanted86/javascript/biru.js

Hitam - https://sites.google.com/site/unwanted86/javascript/black.js

hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js

Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js

Putih - https://sites.google.com/site/unwanted86/javascript/putih.js

Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js

Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js

Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js

Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodenya adalah:

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


3. Apabila sudah masukkan kode, save dan lihat hasilnya..

Membuat GAMBAR bergerak pada postingan 
Membuat scrolling image dapat memberi pandangan yang berbeza berbanding memaparkan gambar secara statik. Kebanyakan scrolling image ini diaplikasikan oleh sesetengah blog yang mempunyai senarai list dalam bentuk gambar seperti banner ataupun mendapat tag daripada blogger lain.

Contoh scrolling image adalah berikut.



Pergerakan setiap gambar dapat diubah samada dari kiri ke kanan, bawah ke atas dan sebaliknya. Selain itu kelajuan pergerakan setiap gambar juga dapat dikawal.


Contoh kode bagi scrolling image adalah seperti berikut.


<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

Penerangan:

Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.

Nota:
1. Jika anda ingin menambah lebih banyak gambar, cuma copy paste kembali untuk bahagian gambar
2. Kode-kode ini dapat digunakan di dalam post entri ataupun pada bahagian gadget



Mudah bukan :)
SELAMAT MENCOBA YAA ;) 

https://www.facebook.com/davis.lengkoan 

Tidak ada komentar:

Posting Komentar