Pada kesempatan kali ini saya ingin berbagi bagaimana Cara Membuat / Memodifikasi Blockquote Setiap Posting Blog Dengan CSS.

Secara umum pada sebuah tulisan Blockquote atau yang lebih dikenal dengan kutipan sebagaimana dilambangkan dengan "tanda kutip" digunakan untuk menuliskan sebuah kutipan baik untuk mengutip artikel ataupun paragraf dari sumber lainnya sebagai tambahan atau sebagai referensi pada sebuah tulisan. Tapi terkadang  blockquote juga digunakan untuk menuliskan paragraf yang ingin ditonjolkan dari paragraf lainnya seperti untuk menuliskan inti dari postingan yang dapat berupa kode html, css, javascript dan lainnya.

Sebagian besar blogger membuat blockquote dalam postingannya tersebut dengan diapit oleh tanda kutif, menggunakan huruf miring /italic, sebagai pembeda dengan pargraph lain. Pada posting kali ini akan diberikan tips cara membuat / memodifikasi blockquote agar tampak lebih menarik.

Berikut ini contoh tampilan dari blockquote yang dibuat secara otomatis dalam setiam postingan blog ini, adapun cara membuatnya adalah dengan memasukkan kode CSS ke dalam template blog
Adapun cara membuatnya adalah sebagai berikut:
  • Login ke template Blogger
  • Pilih menu template kemudian jangan lupa backup template terlebih dahulu, untuk menghindari terjadinya resiko rusaknya template blog
  • Pilih "edit HTML" dan centang kotak "expand widget template"
  • Cari kode: ]]></b:skin>
  • Copy dan paste kode berikut diatas kode ]]></b:skin>
    blockquote{overflow:hidden; width:85%;
       margin-left:30px;
       padding:5px 5px 5px 10px;
       background:#f2fbf4 url(http://i41.tinypic.com/35a8ayb.jpg) no-repeat right bottom;
       border:#017b19 solid 1px;
       border-left:#f906fc solid 10px;
  • Edit tampilan blockquote agar sesuai dengan keinginan dengan cara mengganti kode  tersebut pada template 
  • Setelah selesai, klik pratinjau terlebih dahulu, jika sudah OK, maka Save template. dan lihat hasilnya
Berikut contoh lainnya dan perhatikan perbedaannya dari contoh diatas:
blockquote {
   width:85%;
   margin-left:10px;
   padding:5px 5px 5px 10px;
   color:#0066cc;
   background:#fff url(http://i40.tinypic.com/erlch4.jpg) no-repeat left top;
   border:#364999 solid 1px;
 }
hasilnya akan tampak seperti ini
Berikut ini contoh tampilan dari blockquote yang lain jika kode yang dimasukkan ke dalam template seperti kode tersebut di atas

Adapun cara yang mudah untuk membuat blockquote pada sebuah paragraf yang terdapat pada postingan adalah dengan cara menuliskan paragraf terlebih dahulu kemudian block paragraf tersebut dengan klik dan drag kursor/maouse kemudian klik icon tanda kutip yang terletak di bagian atas post editor, sehingga Kode HTML nantinya akan otomatis diawali oleh <blockquote> dan diakhiri dengan </blockquote>

Demikian postingan kali ini mengenai tips bagaimana  Cara Membuat Blockquote pada setiap Postingan Blog secara otomatis dengan kode CSS

Informasi produk alat marawis, rebana, qosidah, hadrah / hadroh dan lainnya silahkan chat dengan CS kami di no WA yang sudah tertera di website ini atau klik tombol WA di pojok kanan bawah
informasi produk kami :