Cara mengganti tampilan block quote pada blogger

Block Quote ini adalah kutipan kata-kata yang akan tampil beda jika digunakan dan block quote ini sering digunakan untuk menampilkan kode pada posting blog yang membahas tutorial-tutorial blog untuk lebih membedakan kode dengan tulisan biasa.

Anda bisa melakukan banyak sekali perubahan pada block quote ini dengan menggunakan code css diposting kali ini saya akan memberikan 10 contoh dan code untuk merubah tampilan block quote pada blog anda sekaligus cara memasang nya pada blog anda.

Cara mengganti tampilan block quote pada blogger

Bagi anda yang belum tau apa itu block quote pada blog berikut adalah contoh dari tampilan blog quote milik saya.

Contoh tampilan block quote pada blog milik saya.

nah anda bisa memvariasikan tampilah block quote tersebut agar cocok dengan tampilan template bilik blog anda dan juga anda bisa merubah sesuai dengan keinginan anda dengan mengubah code gambar yang ada pada code yang akan saya berikan dibawah ini.

5 Tampilan block quote terbaik veri yuli agustiani

Tampilan 1

 code tampilan 1

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7Jc7LO9B5c181tnlFmZmkRldBz0sraYO2uSOuM35yksLRA_LOKp4RfspuSU6DpPM7BjdNslYJCHFtwTO2GW8aoTqY78U9rEBGmFPs1YeqPpWxGKo97_Tsx-l5SjoNTEp6tHhyphenhyphen-URuTs/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Tampilan 2

code tampilan 2

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsiTvqk7zzSpxMnyZoJ6J316-KyswlMNClzd1_7kCY2VHhfMpkayjL9pldtVhgRJUo35T3XIKJQoU60bQ8kMeG0CAITtR9dcbZJwMHedZ0NUV6iVbMFyj_N4YAI7RsyPHzgs_blQr36Yg/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; } 

Tampilan 3

code tampilan 3

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrpTW8nsVNs0YkSyXVj0u6VfVSheT7XL6rDUg9WUwAnu4wiHvcD3_COAd0fh39-Nb675g7fkCpJVDBb0Spn_8z1joj0nfXitZYoHK8YZqVMMGgexD15_31szSZoN4wl32Xarq_cIF1_GU/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Tampilan 4

code tampilan 4

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5PHVnaIdKrQvon1kH-ta9OLbWBYsLqppB1_qZCI1UMGBt6M3OXq6gOql3lwlcTqQbU4xNwgdZHhxZNli7mlcK7N2gbgAmz9zoNA6D-bnRWwFsksbR48a3XvGgcqGXh4mFJtaYMHhCevEb/s1600/quote.png") 5% no-repeat #FFF8DD; }

Tampilan 5

code tampilan 5

 .post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhub7ERlB1HqLPYJoP3-OoXju3w1LvmsYVvtSrYypgoCO44aDmFc5lJ2dR9zsAGaRIfMCs57TbpVOQ_Qd_WCilW6poTR-Cj5Jf9QVXrWIoDXk_TNoEVxk19_xoHumnewmp8wbp6-H3OXW8/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Tampilan ke 5 ini adalah tampilan yang saya gunakan pada blog saya ini karena diantara yang lain nya saya lebih tertarik dengan yang nomer 5 tersebut dan jika anda ingin merubah atau meng costum tampilan block quote milik anda sendiri bisa ikuti langkah dibawah ini.

 .post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhub7ERlB1HqLPYJoP3-OoXju3w1LvmsYVvtSrYypgoCO44aDmFc5lJ2dR9zsAGaRIfMCs57TbpVOQ_Qd_WCilW6poTR-Cj5Jf9QVXrWIoDXk_TNoEVxk19_xoHumnewmp8wbp6-H3OXW8/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Catatan:
Pada code diatas terdapat url gambar yang sengaja saya beri warna merah dan jika anda ingin merubah beckgroun dari block quote dilahkan ubah url nya sesuai dengan gambar yang anda inginkan.

 

untuk memasang code tampilan block quote pada blog anda silahkan ikuti langkah-langkah berikut dengan baik:

Cara mengganti tampilan block quote pada blogger.

1. Silahkan login ke blog milik anda.

2. Langsung menuju Template => Edit HTML

3. Masukan code block quote sesuai keinginan anda diatas code ]]></b:skin>

4. Simpan template. 

Nah setelah melakukan pemasangan silahkan lihat tampilan dari block quote milik anda, semoga berhasih ya, terimakasih telah membaca diblog milik aya ini.

Cara mengganti tampilan block quote pada blogger 2015-06-04T22:00:00-07:00 Rating: 4.5 Diposkan Oleh: IrfanHD