Memodifikasi Tampilan Quote di Blog

Tanda kutip atau Quote dalam bahasa inggris, dan kalau dalam komputer nih yang di dalam kurung ( " ), eh ternyata di ada juga lho di blog. bukan apa-apa, hanya kode <blockquote> dan diakhiri dengan kode </blockquote> kode itu digunakan untuk menandai sebuah catatan penting, misalnya sebuah kata mutiara dan lainnya. dan pada keadaan standarnya, Quote akan menjadikan paragraf menjorong ke dalam, maksudnya kayak menggunakan tab gitu deh kalo di MS WORD.

Berikut Contoh Quote:
untuk membuat Tanda kutip atau quote Cukup mudah, silahkan gunakan kode <blockquote> dan akhiri dengan </blockquote>

Misalnya:
<blockquote>Contoh Quote: Kegagalan adalah sebuah langkah awal menuju suatu keberhasilan, dan jadikanlah kegagalan anda menjadi pelajaran bagi anda untuk tidak mengulanginya dikemudian hari.</blockquote>

Untuk menampilkan Quote pada saat pengaturan/posting, silahkan gunakan tombol tanda kutip di menu atas biasanya di samping Bullet List.

hasilnya seperti gambar di bawah:

di sana terlihat agak menjorok ke kanan. nah sekarang pembahsan utamanya adalah memodifikasi kode Quote supaya tampilannya lebih cantik dan bagus tentunya.


Modifikasi Quote

Untuk memodifikasinya, cukup mudah yaitu dengan sedikit otak-atik kode CSS di blog atau situs kita. Caranya seperti ini:

1. Login ke blogger dan Klik Layout
2. Pilih Edit HTML dan gak perlu klik Expand Widget Template.
3. Cari kode blockquote { dan kalau sudah ada silahkan hapus dan ganti dengan kode dibawah: jika belum sada silahkan pasang kode di bawah.

Tambahkan Kode berikut: ini: dan pasang diatas kode ]]></b:skin>

Kodenya :  

blockquote {
margin: 10px 0px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #00ff00r;
background: #fcffd4;
border: 2px solid #C2CD43;
}

Itu akan memberikan kotak pada Quote dan hasilnya seperti ini:



Nah itu contohnya Itu standar, mungkin teman teman ingin dengan hal baru misalnya Gambar pada bcakgrounnya cukup memodifikasinya pada bagian background: #fcffd4;

Jarak padding contohnya yang ditunjukan oleh warna merah sedangkan margin jarak text dengan batas /border. garis biru. Color untuk warna tex Quote, line-height untuk besarnya garis tepi atau border, silahkan atur besarnya. Border untuk menampilkan garis tepinya. bisa diatur berupa garis titik-titik atau minus.

Contoh ke dua menggunakan background gambar:

blockquote { margin: 10px 10px 10px 10px; padding: 5px 10px 5px 50px; color: #86AA3F; background: url(http://i261.photobucket.com/albums/ii65/adephotobucket/tanda_kutip.png)top left no-repeat; }

Berikut ini haslinya:


Silahkan Padukan dengan Kreasi anda, dan ganti dengan background yang anda inginkan. cukup mengganti kode di atas. 



NB : bila agan ingin quote seperti yang ada di blog saya,dapat menggunakan kode di bawah ini :

blockquote {
margin:10px 0px 10px 20px;
padding:10px 15px 10px 15px;
line-height:1.6em;
color:#101010;
background:#f5f5f5;
border:2px solid #555}

Sekian tutorial untuk Memodifikasi Tampilan Quote di Blog
semoga berguna sobat ^^

• Tweet
• Share

Artikel Terkait