Cara Membuat Blockquote Sederhana pada Blog

byKurazone Net -
KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya akan berbagi mengenai Cara Membuat Blockquote Sederhana pada Blog. Blockquote yang ditampilkan pada blog nantinya akan memiliki desain yang lebih menarik dan tidak monoton. Hasil jadi Blockquote pada tutorial kali ini bisa dilihat pada akhir artikel.

Cara Membuat Blockquote Sederhana pada Blog

Memasang kode Blockquote pada Blog

1. Buka Akun Blogger >> PIlih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu paste (letakkan) diatas kode 
blockquote{font-style:italic;padding:10px;margin:0;border-left:4px solid green;color:#aaa;background:#fff}
blockquote:before,blockquote:after{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;color:#aaa;line-height:1}
blockquote:before{content:'\f10d';margin:0 10px 0 0}
blockquote:after{content:'\f10e';margin:0 0 0 10px}

Note : untuk kode blockquote bawaan template, alangkah baiknya didelete saja supaya tidak bentrok dengan kode diatas. Silakan cari kata kunci "blockquote" pada template blog kalian. Lalu hapus.

Keterangan :
  1. border-left:4px solid green Untuk mengganti warna garis tepi dan tebal garis
  2. color:#aaa Untuk mengganti warna font dan simbol quote
  3. background:#fff Untuk mengganti warna background

DEMO
Ini adalah demo Blockquote yang sesuai dengan tutorial di artikel ini. Silakan ganti warna border, ketebalan border, warna background maupun warna teks pada CSS Blockquotenya sesuai selera kalian

Note : Apabila ikon dan nya tidak tampil didalam Blockquote, maka silakan kalian pasang library FontAwesome nya. Silakan baca panduannya pada artikel :
Cara Memasang dan Menggunakan FontAwesome pada Blog (ini khusus template yang belum terpasang library FontAwesome). Abaikan note ini apabila template blog kalian sudah terpasang library FontAwesome.

CARA PENGGUNAAN BLOCKQUOTE

1. Buat artikel baru atau edit artikel yang sudah ada
2. Blok tulisan yang akan dijadikan Quote
3. Pilih menu blockquote yang ber-ikon seperti ikon ini >> ()
4. Publikasi artikelnya. Selesai deh !!

Nah, itulah informasi mengenai "Cara Membuat Blockquote Sederhana pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck!!

CONTOH MODIFIKASI #1
Ini adalah contoh Blockquote yang sudah dimodifikasi sesuai selera. Penggunaan warna harap disesuaikan dengan warna tema pada template yang kalian gunakan, sehingga blockquote nya akan terlihat menyatu dengan tema blog

CONTOH MODIFIKASI #2
Ini adalah contoh Blockquote yang saya sesuaikan dengan warna tema pada template blog Kurazone, bewarna biru gelap dan sedikit bergradasi (perpaduan dua warna).

Baca juga :

1. Cara Membuat Tampilan Blockquote seperti Kurazone
2. Cara Membuat Background Gradasi Linear CSS3 pada Blog
3. Cara Memasang dan Menggunakan FontAwesome pada Blog
Tags





أحدث أقدم