Cara mempercantik Blockquote di Blog

Assalamualaikum sobat semua, berikut saya akan memberikan sedikit contoh blockquete yang bsa sobat jadika referensi dan mungkin bisa juga sobat pasang di blognya.Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger.tepatnya di menu postingan saat kita menulis sebuah postingan yaitu gambar tanda koma ("), akan tetapi kalau qt mengandalkan tampilan standar atau bawaan dari template kita, pendapat saya sendiri kurang menarik. bukan berarti gak menarik, nah berikut saya akan uraikan sedikit gmn caranya agar tampilan blockquete kita jadi lebih menarik..langsung aja sob..!!! cekidottt....

Berikut trick'nya sob ;

Tentunya Login dulu ke blog sobat, pilih tata letak, tambah gatged HTML/javascript, Copas script di bawah ini sesuai dengan tampilan yang sobat inginkan.

Blockquote gambar

Scriptnya ;

.post blockquote {background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkf8rUfHdAJw00I2X4fnT4kz5gGK7qM7mV0EzMGEHA3nW_5fozROCaqYNDdqHb0FaJk-7tYOY0xX_vI5hzdwITLKHIFjccGpJ53fyYuA2zEJZEbKzyd-ZBF5oAZSBG5AUbZpV2zTsnKzY/s400/quotes_icon.gif) no-repeat scroll 5px 5px;color:#3B0B0B;border:2px outset #E6E6E6;margin:10px;padding:10px 10px 10px 40px;}

hasilnya ;

Keterangan ;

#F9F9F9 adalah warna background.

(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkf8rUfHdAJw00I2X4fnT4kz5gGK7qM7mV0EzMGEHA3nW_5fozROCaqYNDdqHb0FaJk-7tYOY0xX_vI5hzdwITLKHIFjccGpJ53fyYuA2zEJZEbKzyd-ZBF5oAZSBG5AUbZpV2zTsnKzY/s400/quotes_icon.gif) adalah URL gambar, kalau sobat punya gambar lain silahkan diganti boleh ko.

padding:10px 10px 10px 40px --->> perhatikan saja yang 40px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 40px-nya.

Blockquote border dan warna

Scriptnya ;

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

Hasilnya ;

Blockquote tulisan besar pada baris pertama
Scriptnya ;

.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 dengan Model tulisan
Scriptnya ;

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

Hasilnya ;