Cara Membuat Mouseover Pada Gambar Posting (Mode Transparant)

Met pagi semua, mungkin trick ini sudah banyak yang tahu, yaitu cara membuat gambar pada postingan berefek transparant/mouseover. kiranya seperti itu, kebetulan saya lagi nyari-nyari ini trik, ehh akhirnya dapet juga. sekalian deh saya share disni juga.
Kembali ke topik.. Apa itu mouseover?
Mouseover adalah sebuah keadaan dimana mouse berada tepat di wilayah objeck. Nah biar lebih jelas mari langsung saja lihat gambarnya dan praktekin.

A. Cara yang pertama
Untuk contoh yang pertama kita akan membuat keadaan, dalam keadaan normal, maka gambarnya biasa, dan jika mouse tepat berada di wilayah gambar, maka gambar itu akan transparan. perhatikan gambar dibawah ini : 

Kode yang saya gunakan :

CSS
<img onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="Lokasi Gambar" style="opacity: 1;" />>

B. Cara yang Kedua
Cara kedua, kita akan membalikan keadaan, yaitu : dalam keadaan normal, gambar akan transparan, sedangkan jika disorot mouse, gambar akan biasa. lihat gambar di bawah ini : 



Kode yang saya gunakan :

CSS
<img onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="Lokasi Gambar" style="opacity: 0.4;" />

Keterangan :
Untuk kode yang bercetak warna biru, gantilah dengan alamat url gambar sobat.
Nahh.. ini ada trick lagi, seandainya kita tiap posting harus nempelin kode tersebut satu persatu pastilah menyita waktu kan ?? sekarang Bagimana kalo kita ingin semua gambar di posting anda ingin seperti keadaan diatas?

Ikuti langkah-langkah berikut :

1. Login ke blogger sobat
2. Pilih Rancangan (tata letak)
3. Klik Edit HTML
4. Cari kode : ]]></b:skin>
5. Lalu Simpan kode dibawah, tepat diatas kode : ]]></b:skin>

CSS
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

6. Kalau sudah Simpan Template, dan lihat hasilnya.

Wuookee.. selamat mencoba semoga sukses.

Read More

Memahami Tag Kondisional dan Pengunaannya

Memahami Tag kondisional dan cara pengunaanya. Tag kondisional harus dibayangkan terlebih dulu sebelum praktek atau mengunakannya. Karna itulah kadang susah bila kita belum paham betul fungsi dari tag kondisional tersebut. 

 

Hallo SObat Blogger,, setelah sekian lama, hampir 13 tahun vakum,, hhehe kali ini saya mencoba mengisi kesibukan dan karena sedikit nostalgia mengoprek bgog lagi,,, oke kita lanjut untuk pembahasan yg mudah saja dulu. 

Banyak sudah yang mengulas tag kondisioanl ini, begitu juga dengan tingakatan-tingakatannya. Sebelumnya sudah pernah saya bahas dijauh hari, tapi itu menutut saya kurang lengkap, jadi saya ulas lagi disini dengan pemahaman yang paling dasar dan tingkatanya.

Pemahaman Tag Kondisonal

Pemahaman tag kondisional yaitu sebuah tag yang digunakan untuk mengatur sebuah elemen, dimana elemen tersebut bisa kita atur/tampilkan sesuka hati.

Contoh Jenis-Jenis Tag Kondisional

1. Tag Kondisional Halaman Muka (HomePage)
Elemen hanya akan tampil di halaman muka saja.

2. Tag Kondisional Halaman Item (Halaman Selanjutnya/Postingan)
Elemen hanya tampil di postingan selanjutnya

3. Tag Kondisional Halaman Statis
Elemen page yang kita buat, contoh: http://kode-blogger.blogspot.com/p/about-me/html

4. Tag Kondisional Halaman Indeks
Halaman indeks, semua halaman selain halaman posting

5. Tag Kondisional Halaman Label
Hanya pada elemen label. contoh: http://kode-blogger.blogspot.com/search/label/BloggerTrick

6. Tag Kondisional Halaman Arsip
Arsip blog contoh: http://kode-blogger.blogspot.com/2012_01_03_archive.html

7. Tag Kondisional Halaman Tertentu
Elemen yang ingin ditampilkan atau disembunyikan pada halaman tententu.

8. Tag Kondisional Halaman Pencarian

9. Tag Kondisional Halaman Error 404

Nahh, cukup sekian pembahasan saya soal Tag kondisional dan penggunaanya.

Salam Blogging !!

Read More

Tips Mempercepat Loading Form Komentar Blog

Setelah kemarin mengulas trik URL Redirect pada blog, sekarang kita masuk kebagian optimasi loading blog, yaitu Cara Mempercepat Loading Form Komentar Blogspot.
Tips yang saya terapkan juga cukup mudah cuman 2 (dua) langkah, yaitu dengan sedikit mengedit kode HTML saja.
Sebelum saya jelaskan lebih lanjut pahami terlebih dahulu kode HTML untuk Form komentar blog dibawah ini.


1. Kode HTML Original Form Komentar
2. Kode Yang Sudah DiModifikasi
3. Tutorial

Sedikit ulasan, seperti yang kita tahu,form komentar blog ini mempunyai/mengandung banyak error dan tidak valid HTML. Setelah sobat lihat kode HTML yang Ori dan yang sudah dimodifikasi, pasti rada sedikit aneh kan dengan kodenya?? Anehnya karena pemanggilan iframe'nya dibuat terpisah menjadi dua bagian. Kode src yang biasanya digunakan untuk memanggil data external, lah koq dipisah. Inilah yang sedikit membuat loadingnya lambat.

Pehatikan saja load elemen bagian sidebar pasti lebih duluan nongol daripada form komentar. Seharusnya kan form komentar yang nongol duluan karena satu urutan setelah konten. Iya sih, sekilas memang tidak kelihatan/tidak terlalu diperhatikan. Tapi bila sobat ada yang merasakan hal yang sama dengan saya (haha kek lirik lagu galau aja yah!! :p ) Sobat bisa sedikit meminimalisir loading form komentar dengan cara berikut.

Tutorial

1. Langsung wae mlebu Edit HTML dan Lanjutkan. Jangan lupa centang pada "Expand Widget Template, dan tidak ada salahnya buat BackUp template sobat.

2. Cari kode dibawah ini

Kode HTML Original Form Komentar

CODE

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='520' id='comment-editor' name='comment-editor' src='' width='100%'/>

Penjelasan:
Perhatikan kode HTML diatas, pada data:post.commentFormIframeSrc dan juga src='' itu yang bikin aneh, target "src iframe" yang dibiarkan kosong.

3. Pindahkan kode data:post.commentFormIframeSrc kedalam target src'' yang kosong. Sehingga menjadi seperti dibawah ini:

Kode Yang Sudah DiModifikasi

CODE

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='520' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

Penjelasan:
Kalau dilihat kode tersebut ada 2, jadi ganti semuanya saja.

4. Langkah terakhir simpan template.

Seperti itulah Tips Mempercepat Loading Form Komentar Blog. Selamat mencoba dan ditunggu tanggapannya.

Read More