Powered By Blogger

Kamis, 28 April 2011

cara membuat efek bayangan pada gambar posting blogger

Kali ini kita akan belajar untuk membuat sebuah efek bayangan pada gambar posting tidaklah sulit, cukup menambahkan sedikit kode CSS. tapi efek bayangan ini hanya akan berpengaruh di area posting blog atau di artikel blog saja. untuk banner dan lain-lain saya rasa itu tidak bisa, kecuali kalian mengeditnya dengan software edit foto. Jika kalian tertarik langsung saja lakukan langkah-langkah dibawah ini :
Cara buat efek bayangan gambar
1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Taruh kode berikut ini diatas kode ]]></b:skin>
.drop-shadow img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
6. Kalau sudah sekarang cari kode <data:post.body/> lalu ganti dengan kode di bawah ini
<div class='drop-shadow'><data:post.body/></div>
7. Kalu sudah selesai tinggal di simpan dan lihat hasilnya di blogger kamu.
Keterangan :
Pada efek shadow yang saya berikan diatas adalah efek shadow yang berwarna abu-abu, kalian juga bisa menggantinya dengan warna pink, merah atau biru sesuai keinginan tapi dengan syarat kalian harus membuat gambar seperti "http://i30.tinypic.com/1qsh1h.jpg" dan merubah shadow pada gambar tersebut menjadi warna yang kalian inginkan. Setelah itu upload gambar hasil editan kalian tadi kemudian ambil URL nya dan ganti alamat http://i30.tinypic.com/1qsh1h.jpg pada kode CSS diatas dengan URL gambar yang telah kalian edit

0 komentar:

Posting Komentar