Tutorial : membuat blockquote berbackground

salam bahagia,

tutorial ini adalah panduan untuk kawan2 blog yang belum pernah buat @ ada blockquote berbackground. contoh blockquote, boleh lihat di n3 ini.

untuk blogspot :
1. log-in , Design > Edit HTML > tak perlu tick expand widget dan cari kod ini

]]></b:skin>

2. masukkan kod dibawah sebelum kod diatas

.post blockquote  {  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4OY0mITbJ5t5p7YLdRBQeiJFhus0gnv-NQIMjKKYr6vjPJo-55ZNdz3KbEBjMR2cXH9YvEWiJjerIu-i2A-A2IbGJFQFa4RZz2Libkginj8pb7aMW8zCT7Df3P29_madCeGqItGSFuOn/); -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; padding: 10px; Border: 3px solid #FF0080; margin:1em 20px; }

note:

• boleh tukar background ikut citarasa sendiri.. yang dihighlightkan kuning itu adalah background
• boleh ubah warna border ikut warna pilihan sendiri.. yang dihighlightkan hijau adalah warna border
• boleh ubah jenis garisan kotak blackquote ikut, contoh tukar perkataan solid kepada dotted; dan boleh ubah ketebalan garisan dengan tukor 3px ke 5px @ lebih .. trial n error okay..

bila dah siap, jangan lupa SAVE TEMPLATE.

ini adalah rupanya bila dah dimasukkan dalam Edit HTML

Untuk wordpress :

1. log-in > Appearance > Editor > Stylesheet (style.css) dan cari kod di bawah ini

blockquote {     font-style: italic;

2. masukkan kod seperti yang no 2 untuk blogspot, dibawah kod dan tukarlah mana2 yang perlu ikut sesuaian dan bila selesai klik ‘Update File’.

dan ini lah rupanya apabila sudah dimasukkan kod.

selamat mencuba..

p/s :

ade banyak versi koding untuk membuat blockquote ini dan ibu dah cuba permudahkan nya.

untuk background tu kome buleh ajer google, nak guna gambar sendiri pun buleh & kalo nak customize background sendiri.. sila2 lah pm ibu ya >> kakyong72@gmail.com

salam kasih sayang,