Energy Saver Untuk Blog Anda.

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


p/s: Original code : www.onlineleaf.com/

Tutorial Buat Tab Menu / 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. Anda boleh lihat contoh tab menu yang ringkas di sini







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







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 tukarkan 'Link' dengan link yang anda mahu letak di tab menu.

Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>



Selepas selesai masukkan link yang dikehendaki,

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>

7. Drag ke bawah element header, save dan lihat hasilnya.:)









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

Tips Menaip Entri Dalam Blog : Part 2

Sambungan daripada tips menaip entri dalam blog part 1, entri kali ini akan memberikan 3 lagi point yang boleh dititikberatkan jika anda menaip entri di dalam blog. Bagi yang belum membaca part 1, anda boleh baca dahulu sebelum sambung entri ini. Atau mana-mana dahulu pun boleh.:)



Untuk kali ini, 3 lagi point yang anda perlu pertimbangkan untuk menaip adalah seperti berikut.

1. Gambar

Meletakkan gambar adalah penting untuk sesebuah entri. Kewujudan gambar akan lebih mencorakkan lagi apa yang anda taip di dalam blog. Jadi gambar sememangnya mempengaruhi minat pengunjung untuk membaca kandungan entri anda.


Kalau anda baca buku, kan best kalau ada diselitkan gambar. Begitu juga entri blog. Paling kurang gambar yang ada adalah sekeping atau berapa banyak yang dirasakan perlu. Tetapi pastikan juga jangan letak terlalu banyak gambar dalam entri melainkan entri yang memang berbentuk penerangan bergambar.


2. Provokasi

Adakah bagus untuk melakukan provokasi semasa menaip blog.?. Jawapannya adalah YA. Menaip entri yang berbentuk provokasi sememangnya salah satu teknik menaip yang mampu menarik lebih ramai pengunjung untuk membaca dan komen.


Tetapi harus diingatkan, jangan melakukan provokasi yang bersifat keras. Lakukan provokasi yang lebih bersifat lembut dan menarik orang untuk membaca dan komen yang bernas, bukannya membaca dan di balas dengan cacian. Dan jika anda hendak tahu, entri yang melakukan provokasi pada jantina yang berlainan lagi bagus.:)

Provokasi akan membuatkan pembaca berasa 'geram' untuk baca dan komen..:). Contoh provokasi 'lembut' untuk lelaki, Lelaki memang banyak bagi alasan macam ni eh.?, dan contoh provokasi 'lembut' terhadap perempuan yang pernah ditaip sebelum ini.,Perempuan memang selalu macam ni eh. So entri ini akan membuatkan pembaca akan berasa relax untuk membaca dan rasa hendak komen je berbanding entri berbentuk fakta.:)


3. Persoalan.

Tinggalkan persoalan untuk entri anda. Persoalan juga boleh memacu pembaca untuk ingin selalu mengikuti setiap entri anda. Selain itu, persoalan juga membolehkan pembaca lebih berminat untuk menghantar komen.



Contoh, jika anda buat persoalan, "Hendak tahu apa yang terjadi lepas tu.? Nanti aku cerita dalam entri akan datang ye.". Apabila membaca, pembaca ingin tahu apa yang berlaku dan kemungkinan akan datang lagi untuk membaca. Kerana entri anda menimbulkan pertanyaan di pikiran mereka.

Juga boleh tinggalkan persoalan di akhir entri untuk pendapat, seperti " Apa yang korang rasa, perlu tak aku teruskan hubungan ini?"..(psst:tetapi janganla setiap entri ada persoalan pula.:)

Entri sebegini akan membentuk satu pembacaan yang bercorak pelbagai, bukan entri yang berbentuk mendatar sahaja.:)

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

Kebiasaaannya, untuk menghasilkan entri yang menarik, ianya lebih kepada pendekatan psikologi dan pengetahuan anda kepada sifat dan perlakuan manusia. Sebab jika anda menaip entri sebenarnya banyak pandangan orang dari perspektif yang berbeza. So ianya bergantung bagaimana anda tackle emosi pengunjung blog anda. Dan cara untuk tackle adalah hasilkan entri yang menarik perhatian mahkluk bernama manusia.:)

Tutorial Buat Scroll Box Untuk Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)



Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.



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

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>

Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas


4. Save dan lihat hasilnya.:)

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


Untuk scroll box widget lain yang menggunakan html code, boleh rujuk tutorial scroll box untuk widget

Kesan Khas Pada Gambar Apabila Dilalukan Cursor

Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.



Anda boleh lihat kesannya secara real di test blog ini.:)


Tutorial untuk membuat kesan khas pada gambar ini adalah seperti berikut.


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

2. Dengan menggunakan fungsi find (ctrl + F), cari kod a img {

3. Delete kod selepas a img {, dan gantikan kod di bawah.

-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:
Sebelum



Selepas


4. Save dan lihat hasilnya..:)

UPDATE:
Bagi yang tidak jumpa kod a img {,
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Note:
Anda boleh mengubah warna hover effect. Default warna pink (warna kegemaran perempuan ni.:).
Kalau hendak tukar warna lain, tukarkan FF66CC dalam kod di atas dengan kod warna yang anda suka. (kod warna lain boleh rujuk di sini)