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/AVvXsEi6Ys2s_Bqea8uHjBW2trByq_zCgROtzYK_CEbfIUvEWW4WqtyZJZjuSlAmkvS7A6vFM0kdz_zk9wAHEG4LDqsl4IIsSiQ40-vGHnCZ6QYu8pFFxA4k4wiCRrjX1eLOWFwciVcdTaOaWdE/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..^_^

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post

• Cara Mengubah Icon Cursor Untuk Memperindah Tampilan Blog Hy Sobat Blogger semua, apa anda bosan dengan Icon Cursor yang standart di blog anda? apa anda i
• Algoritma Pencarian Baru Google Bernama Hummingbird Seiring dengan bertambahnya usia sang Master Google si mesin pencari yang paling populer di dun
• Ekspor dan Impor Artikel di Blogspot Ekspor dan Impor Artikel di Blogspot - Mungkin ini adalah postingan yang paling sederhana dan sepe
• Cara Disable Fungsi Blok Teks (Ctrl+C, A dan U) Pada Blog Setelah sebelumnya saya share tentang cara Disable Klik Kanan Pada Blog, yang fungsinya untuk me
• Perkembangan Algoritma Google 2013 - Google Penguin Setelah pada postingan yang lalu membahas tentang Algoritma Google Panda, maka pada artikel ini
• Cara Membuat Text Area di Blog Hay Sobat Free Download dan Tutorial, Setelah sebelumnya saya share tentang Cara Membuat Translat