Tutorial Kostumasi Quote Pada Blogger

Pada tutorial blogger kali ini kita akan mecoba mengkostumasi quote di blogger. Kostumasi disini maksudnya merubah tampilan keseluruhan dari quote mulai dari warna, garis tepi, background, ukuran huruf, sampai jenis dan stylenya. 

Apa sih quote itu?

Quote digunakan untuk mengutip. Haha (tinggal ganti bahasanya ja tu..)

Secara umum definisi quote di blog adalah untuk:

• Mengulang atau mengkopi kata-kata dari orang lain dengan menyertakan sumbernya
• Kutipan atau referensi untuk ilustrasi atau pembuktian
• Mengulangi bagian penting dari artikel atau untuk catatan kaki

Quote default bawaan blogger seperti yang kita tau sangat tidak menarik biasanya berbentuk kotak atau dengan latar abu-abu. 

Cara menggunakan quote dalam blogger :

• Blok teks yang akan di jadikan quote
• Kemudian klik tombol quote pada toolbar blogger

Ini akan mengubah teks yang terblok tadi menjadi quote dengan disain default dari template blogger kita seperti ini :

Jadi apa yang akan kita lakukan?

Oke, pertama kita akan bermain dengan kode css (CSS style) template blogger, kita harus menemukan kode css yang akan kita ubah, seperti  ini :

blockquote{

background:#e9d8eb);

margin:0px 25px 15px 25px;

padding:10px 20px 15px 15px;

border-top:1px solid #dddddd;

border-right:1px solid #666666;

border-left:1px solid #dddddd;

border-bottom:1px solid #666666}

Caranya klik menu bar LAYOUT > EDIT HTML > Scrol sampai menemukan code css yang kita cari atau untuk lebih cepatnya gunakan CTRL + F dan kopi paste sebagian kode diatas...

Kemungkin besar  untuk setiap template berbeda dalam kode css nya, tetapi secara umum sama dalam fungsinya...

kode berikut satu contoh css yang sudah diubah,  kita hanya perlu men DELETE kode diatas tadi dan menggantinya dengan kode berikut ini :

blockquote{

background:#e9d8eb url(http://i54.tinypic.com/64h6yo.jpg);

margin:0px 25px 15px 25px;

padding:10px 20px 15px 15px;

border-top:1px solid # #FF6600

border-right:1px dashed # #FF6600;

border-left:1px solid # #FF6600;

border-bottom:1px dashed # #FF6600;

font-size: 1em;

font-style:italic, bold;

line-height:2em;}

Tampilan quote standar template blogger tadi akan berubah menjadi seperti ini:

Perhatikan variabel-variabel yang kita ubah...

Colour (untuk mengubah warna baik background dan border ditentukan dengan nilai heksadesimal setelah tanda #) untuk memudahkan pemilihan warna gunakan ColorZilla 2.2.2

Font size (untuk mengubah ukuran huruf)

Font style (mengubah style huruf)

Margin (spasi antara box dan konten)

Padding (spasi antara teks quote dan borders)

Url (menmbahkan gambar background quote, ingat ubah alamat urlnya sesuaikan dengan image yang kamu gunakan..)

Jika ada pertanyaan silahkan comment...