Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah] - Hallo sobat blogger yang berbahagia Tips & Trik SEO, Posting yang saya unggah pada kali ini dengan judul Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah] , Artikel ini bertujuan untuk memudahkan kalian mencari apa yang kalian inginkan, kami telah mempersiapkan artikel ini dengan baik untuk kalian baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel desain, Artikel tips trik blogging, yang kami tulis ini dapat kalian pahami dengan baik, semoga artikel ini berguna untuk kalian, jika ada kesalahan penulisan yang dilakukan oleh penulis mohon dimaafkan karena penulis masih newbie. baiklah, selamat membaca.

Judul : Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah]
link : Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah]

Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah]

Cara Memasang EfekTransparan pada Gambar di Blogger � Ada banyak efek CSS yang dapat dipasangkan pada gambar di blog. Seperti efek zoom gambar yang pernah saya bahas beberapa waktu yang lalu. Kali ini topiknya tidak jauh � jauh dari CSS, yaitu efek transparan pada gambar di blog. Efek ini akan memberikan kesan transparan saat pointer mouse tidak diletakkan diatas gambar. Gambar akan kembali terlihat jelas apabila pointer mouse diletakkan diatas gambar.

Untuk preview-nya, silahkan lihat disini.

Pada dasarnya, kode CSS efek transparan pada gambar ini tidak jauh berbeda dengan kode CSS untuk efek yang pernah saya bahas sebelumnya. Perhatikan kode CSS dibawah ini :

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

Kode tersebut jika dipasangkan akan memberikan efek seperti pada preview diatas. Untuk mengubah transparasi gambar, gantilah variable opacity: 0.5 dan opacity=50 pada baris pertama. Untuk opacity: 0.5 Anda dapat menggantinya dengan angka yang lebih kecil dari 1.0. Sedangkan untuk opacity=50, Anda dapat menggantinya dengan angka bernilai lebih kecil dari 100. Kedua kode tersebut berfungsi untuk menentukan seberapa transparan gambar Anda nantinya. Anda dapat mengubahnya, atau membiarkannya seperti semula.

Untuk memasang efek tranparan pada gambar di blog Anda, ikuti langkah � langkah dibawah ini :

1.     Buka akun blogger Anda, lalu klik Template.

2.     Buat sebuah backup / cadangan dari template blog Anda.

3.     Lalu klik Edit HTML.

4.     Klik kotak dengan kode HTML yang muncul, lalu tekan ctrl+f.

5.     Carilah kode ]]></b:skin>, lalu pastekan kode CSS berikut ini tepat diatas/sebelum kode ]]></b:skin>.

.brl-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.brl-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}

6.     Terakhir, klik Simpan Template.

Sedangkan, untuk mengaplikasikan kode CSS ini pada gambar di blog Anda, tambahkan kode class=�brl-transparan� pada HTML gambar. Contoh pemasangan efek transparan pada kode HTML gambar di blog :

<img class=�brl-transparan� border=�0� src=�http;//urlgambar.anda� />

Untuk memasang kode CSS ini pada link tambahkan kode class=�brl-transparan� setelah <a.

Contoh :

<a class=�brl-transparan� href=�http://urlgambar.anda� ... />

Selamat mencoba, dan salam blogger!

Demikianlah Artikel Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah]

Sekianlah artikel Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah] kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Memasang Efek Transparan pada Gambar di Blogger, [SEOSangatMudah] dengan alamat link https://seosangatmudah.blogspot.com/2013/06/cara-memasang-efek-transparan-pada.html

Tweet