Cara Membuat dan Mempercantik Blockquot

Saya akan berikan sedikit contoh blockquote yang bisa sobat jadikan referensi dan mungkin bisa dipasang pada blog.  
Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger. blogquote juga sebagai penanda tulisan yang memang penting pada blog agar tampil lebih berbeda dan lain dari tulisan lainnya. kali ini blogquote menggunakan background gambar yang bisa anda coba pasang dan tampilkan pada blog anda.
Blockquote Gambar
 
Sama seperti yang ada di blog ini, kode css-nya :

.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_pzUUmLyWZNVk9Ro2YLVS9EZM37moed9tx861DAL3msTuhlT1jkv8N1V3YdCMAa19gU4UPTPLefskUKk41U_OWlrnH2vMPGM5NxxLk7YDc_T4yIBaQu_YXII98xsHfMOVo-S9xi0KGMM/s400/quotes_icon.gif) no-repeat scroll 0 0;
color:#3B0B0B;
border:1px outset #FFF;
margin:10px;
padding:10px 10px 10px 36px
}

Hasilnya :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Keterangan :

• #F9F9F9 adalah warna background.
• padding:10px 10px 10px 36px --->> perhatikan saja yang 36px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 36px-nya.
• Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.

Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas,
kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.

Blockquote Border dan Warna

Kode css :

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

Hasilnya :



Blockquote Tulisan Besar Pada Baris Pertama

Kode css :

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;
}
.post blockquote p:first-line {
font-variant: small-caps;
}

Hasilnya :



Blockquote Warna dan Model Tulisan

Kode css :

.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}

Hasilnya :


Berikut cara pemasangannya :

• Login ke blogger.
• Tuju Tata Letak.
• Pilih Edit HTML.
• Cari kode .post blockquote { …………………………………dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
• Jangan Lupa Simpan Template.

Mudah-mudahan bermanfaat ya.