Cara Mempercantik Tampilan Blockquote Pada Blogger

Cara mempercantik tampilan blockquote pada blogger – Sudah tahu blockquote ? Blockquote sering kita lihat pada sebuah artikel postingan blog, biasanya terletak ditengah-tengah artikel berupa beberapa kalimat atau potongan script yang diberi kotak khusus dan kadang kala dengan tampilan yang berbeda dengan tulisan pada artikel tersebut. Tujuannya adalah untuk menandakan tulisan yang didalam kotak tersebut sangat penting dan perlu diperhatikan. Itulah blockquote. 

Pada awalnya Blockquote pada pemograman adalah elemen html yang berfungsi untuk memperjelas bagian tertentu dari teks ataupun kalimat yang diambil dari website lain atau sumber lainnya. 

Tapi saat ini penggunaannya banyak dimanfaatkan untuk hal lain seperti menampilkan rumus matematika dari suatu artikel yang membahas masalah keteknikan ataupun untuk menampilkan beberapa baris script pada artikel yang membahas masalah pemograman dan lain sebagainya.

Meskipun penggunaannya tidak lagi hanya sekedar menampilkan kutipan kalimat, penggunaan blockquote pada sebuah artikel sangat efektif untuk membantu penekanan pada sebuah kalimat ataupun menandakan kalimat atau teks tertentu tersebut sangat penting dan harus menjadi fokus utama pembaca. 

Berikut beberapa blockquote ada yang tampil seadanya , memakai kode tanda kutip atau menggunakan bawaan blogger sendiri. 

Dengan melakukan sedikit editan pada program, blockquote dapat tampil lebih cantik dan tentu saja kesan professional dari sebuah blog akan kelihatan. 

Berikut beberapa contoh blockquote yang sering kita lihat ditengah-tengah artikel postingan. 

Dan ini tampilan blockquote hasil editan saya sendiri : 

Cara mempercantik tampilan blockquote pada blogger, tidak susah.
Dengan blockquote baru tampilan blog kelihatan lebih professional. 

Tertarik untuk membuatnya ? 

Ok, yang pertama kamu harus lakukan adalah membuat gambar untuk tampilan blockquote dengan ukuran sesuai keinginan, kebetulan ukuran yang saya buat adalah 34 x 276 type file PNG , seperti dibawah ini : 

Langkah berikutnya upload ke blogger melalui postingan baru, misalnya draft. Boleh juga postingan yang lain, tujuannya adalah untuk mendapatkan link gambar yang kita upload tersebut. 

Setelah itu tampilkan pada postingan, kemudian pilih model HTML sehingga pada tampilan model HTML terlihat link gambar yang kita upload. Copy link tersebut. 

Setelah link gambar didapat, buka menu edit html, cari kode ]]></b:skin>  .

Tepat diatas kode ]]></b:skin>  tambahkan script dibawah ini .

.post blockquote{-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTDpSsGBYgRIDb8vxWV6oGtMbYkMH4y2qnrA9bVzX7h4R1G-4tFprvwkvwBX2ZzdFr7Wdxwdfi8u26DgLluereLtxsdbS1lvcSMiYk6KJyEg2eHxp8t9VSZfpCzescnLAqUuxHdgpsWyY/s1600/blockquoteacc.png);/*ganti dengan link gambar kamu*/
background-position: 0% 0%;
background-repeat: no-repeat repeat;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221);
border-style: solid;
border-top-left-radius: 6px; /* untuk mengatur bentuk sudut pada kotak segiempat blockquote*/
border-top-right-radius: 6px; /* untuk mengatur bentuk sudut pada kotak segiempat blockquote*/
border-width: 1px;
color: black;
font-family: Consolas, 'Courier New', Monaco, Courier, monospace;
line-height: 18px;
margin: 0px 20px;
overflow: hidden; padding: 10px 20px 10px 45px;} 

Save dan coba buka artikel kamu yang menggunakan quote. Menarik bukan ??? 

Besarnya huruf, warna, bentuk sudut segi empat, besarnya radius dan lain sebagainya dapat kamu atur sesuai keinginan. Coba saja bereksperimen dengan mengganti parameter tersebut sehingga kamu mengerti fungsi – fungsi dari masing – masing parameter diatas. 

Untuk hal yang meragukan, silahkan tanyakan lansung lewat komentar dibawah artikel ini.

Selamat mencoba dan bereksperimen.

Terima kasih.