Membuat Atau Modifikasi Blockquote Blogger

blockquote berfungsi untuk mempertegas suatu kalimat yang dianggap penting dalam posting. Mungkin Anda pernah melihat variasi atau modifikasi blockquote yang ada di blog rekan lain, sebenarnya ada berbagai cara dalam memodifikasi blockquote, dalam hal ini kita akan bahas cara modifikasi dengan sedikit menambahkan kode CSS pada .post blockquote.


Secara default kode CSS blockquote pada blogger sebagai berikut;

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

Dengan sedikit menambahkan kode perintah untuk gambar tanda petik,  garis tepi dan lain sebagainya  maka kode default blogger harus diganti seperti berikut;

.post blockquote {
text-align: justify;
margin:1em 20px; 
padding-left:30px; 
padding-right:5px; 
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9lakT9TPRLRScieqOIAbbwrPkMwPrAjsZ4OHvT57FGaLhmJuelY8FkGfQuJ7YRehBOgzW4_uePZXLahV3jyS8WhCCwYRcLcopgq1zkgajWKGM6O0HGaAKwRM7Wy0q7TzxWQny3XqN9DE/s1600/qoute-icon.png") no-repeat 0 .0em; color:#666; border:1px dotted #ccc;
}

.post blockquote p {
text-align: justify;
margin:.75em 0; 
padding-right:5px; 
padding-left:5px; 
border:1px dotted #ccc; 
background:#F7F7F7;
} 

Hasilnya sebagai berikut;

Seperti ini hasilnya blockquote yang berfungsi untuk mempertegas isi kalimat dalam posting yang diangap penting atau bisa juga untuk mempertegas posting kode HTML dalam blog.

Untuk menerapkan blockquote pada posting blog agar supaya dapat berfungsi, kita harus menambahkan kode sebagai berikut;

<blockquote><p> ..... </p></blockquote>

Jadi untuk contoh diatas penulisanya sebagai berikut;

<blockquote><p> Seperti ini hasilnya b yang berfungsi untuk mempertegas isi kalimat dalam posting yang diangap penting atau bisa juga untuk mempertegas posting kode HTML dalam blog. </p></blockquote>

Catatan :

Anda dapat mengganti latar belakang gambar dengan gambar Anda. Untuk border dan jarak tepi serta posisi teks, bisa Anda sesuaikan dengan template blog Anda.

Daftar Isi Lengkap di sini «« klik disini.