Cara Membuat Blockquote Keren di Blog

Hai sobat blogger, setelah sebelumnya saya membahas tentang Cara Membuat Tombol Kembali keatas (Back to Top), maka pada postingan kali ini, saya akan share tentang Cara Membuat Blockquote Keren di Blog. Blockquote digunakan untuk menampilkan atau mempertegas sebuah kutipan yang dirasa penting untuk dibaca, dengan cara memberi kotak atau bingkai pada tulisan tersebut. contohnya sebagai berikut :

Masukkan tulisan yang akan kita jadikan blockquote di sini

Sekarang bagaimana membuat blockquote dengan tampilan yang menarik dan keren seperti diatas? silahkan ikuti cara berikut ini.

Cara Pertama : Membuat Blockquote Langsung dari Halaman Posting

1. Login ke akun blogger anda
2. Klik Entri baru untuk memulai tulisan baru
3. Lalu klik Tab HTML tepat disamping tulisan Compose
   
4. Copy script dibawah ini, lalu paste di dalam halaman entri baru dengan Tab HTML
   

   <blockquote style="background-color: #f6ebc1; border-left: 5px solid #fce27c; margin: 0; margin: 1em 3em; padding: .5em 1em;"> Masukkan tulisan yang akan  dijadikan blockquote di sini </blockquote>

   maka hasilnya seperti ini:

   Masukkan tulisan yang akan kita jadikan blockquote di sini

    
5. contoh lainnya :
   

   <blockquote style="border-left: 2px solid #999; color: #999999; margin: 1em 3em; padding-left: 1em;"> Masukkan tulisan yang akan kita jadikan blockquote di sini </blockquote>

   maka hasilnya seperti ini :
   

   Masukkan tulisan yang akan kita jadikan blockquote di sini





6. Setelah itu Klik Pratinjau atau Publikasikan untuk melihat hasilnya.
7. Script yang berwarna biru bisa anda edit sesuai keinginan anda.

Cara Kedua : Membuat Blockqoute dengan mengedit Template

1. Login ke akun Blogger anda
2. Klik Template > Edit HTML kemudian centang pada Expand Template Widget
3. Sebaiknya backup dahulu template anda untuk menghindari kegagalan proses editing template, yang belum tahu cara mem-backup template silahkan klik DISINI
4. Cari kode ]]></b:skin> Setelah itu, Copy kode dibawah ini, tepat diatas kode ]]></b:skin>
   

   blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF03X-DZPRTSDCN0lx3WaO_M7dB07BQFAwmQMTGZmRqpwvtvdzfu7leiE2tIhyxrDlzplir81-Lk1Bsl_ON5_GB-3XnhUu2GDZX1BS-gbnESsFOhipaVU5h8gQfbSIbNR0VgxXKub9u0I/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; }

5. Tulisan yang berwarna Hijau, adalah kode warna background blockquote, silahkan anda ganti sesuai keinginan sobat.
6. Setelah selesai, Klik Simpan Template.
7. untuk melihat hasilnya, ikuti langkah berikut ini :
• Klik Entri baru
• Klik ikon blockquote yang ada pada halaman postingan, kemudian ketikkan kata yang akan dijadikan Blockquote.
  
• Kemudian tekan tombol pratinjau atau Publikasikan untuk melihat hasil. jika berhasil maka gambarnya seperti ini.
  
8. Selesai.

Silahkan dicoba dan Semoga Bermanfaat..^_^