1.13.2010

Membuat blockquote berlatar belakang gambar

Terlebih dahulu silahkan baca artikel pertama saya tentang blockquote di sini agar anda mengerti bagaimana cara memasang blockquote pada blog anda. Nah setelah mengerti bagaimana memasangnya sekarang kita modifikasi blockquote menjadi gambar, lha bisa toh? bisa aja, asal kita tau cara untuk mengotak atik script dan kode maka apapaun bisa jadi di buat, menjadikan block quote berlatar belakang gambar hanya merupakan seni untuk mempercantik blog saja lebih pada seni pageview baiklah mari kita mulai.

Bila dalam blog anda belum ada blockquote nya silahkan pasang blockquote dengan lopas kode berikut di atas kode ]]></b:skin> :

blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;

background: #b3b3b3 url(http://url.gambar.anda.com) repeat-y;

border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}
simpan template dan selesai.

keterangan :
http://url.gambar.anda.com ganti alamat url gambar anda usahakan ukuran gambar di sesuaikan dengan lebar blockqoute caranya? eksperimen aja sendiri ntar klo di jelaskan malah ribet ya kan? yang jelas paling ndak lebar 400 px karena kebanyakan content wrapper dari blog yang biasa di pakai (3 kolom) adalah 400-500 px, maka cukuplah width 400 px untuk ukuran gambar anda karena harus di kurangi margin blockquote top,bottom,left,right sebesar 10,10,10 dan 20 px.

repeat-y adalah bila anda ingin gambar background terulang ke bawah
repeat-x bila ingin gambar terulang ke samping kanan
no-repeat bila ingin gambar tidak terulang dan berada di kiri atas, contohnya adalah blockquote milik saya ini hehehe.

color: #000000; adalah warna teks yang ada di dalam blockquote ganti dengan kode warna yang sesuai dengan selera anda
border: 2px solid #4aa02c; dan border-left: 20px solid #4aa02c adalah warna garis tepi dari blockquote mohon untuk dua bagian ini di beri warna yang sama sesuai selera anda.

kemudian saat posting silahkan tambahkan kode berikut :
<blockquote>
Bagian dari artikel yang ingin di masukan ke dalam blockquote bisa berupa gambar maupun teks
</blockquote>

akhir kata udah maleeeemmmm...ikan bobooookkkkkkk....hehehehe

4 komentar temen:

rio2000 mengatakan...

thank's ilmunya.. btw blog kamu lebih baru dariku tapi lebih ramai dari punyaku... boleh tahu jurus blogwalking-nya? sehari bw berapa kali, kebanyakan di blog mana? blogspot/wordpress?

Sohra Rusdi mengatakan...

Inilah jawaban dari pertanyaan saya selama ini, makasih

Asri Production mengatakan...

minta templet nya dong

BRI Jakarta Veteran mengatakan...

coba dulu sahabat, makasih ya...