Skip to main content

Membuat Blockquote / Kotak Catatan di Postingan Blog


cara membuat blockquote keren di postingan blog

cara membuat blockquot keren di blog memasang kotak catatan di postingan blog, keren dan rapi berikut kode CSS dan cara pemasangannya pada blog yang dapat anda ikuti dengan mudah.


Demo Kotak Catatan

Untuk membuat maupun mengganti tampilan kotak catatan sebenarnya cukup sederhana, hanya menambahkan maupun mengubah beberapa kode dalam CSS untuk blockquote dalam style tema.

Buat yang masih bingung berikut tutorial lengkapnya yang dapat anda ikuti dengan mudah

CARA MEMBUAT BLOCKQUOTE KEREN DI POSTINGAN BLOG

1. Login atau masuk di Blogger › Pilih Tema › Edit HTML
2. Dalam <style type='text/css'> atau <b:skin> cari kode blockquote dan hapus semua kode.
3. Ubah dengan CSS dibawah ini.

  /*CSS Blockquote*/
  .post-body blockquote {position:relative;text-align:left;background:#6591c2;color:#fff;display:block;padding:55px 20px 20px;border-radius:3px;margin:10px 0;}
  .post-body blockquote:before {content:'Catatan';background:rgba(255,255,255,1);position:absolute;left:3px;display:block;top:3px;font-weight:700;color:#6591c2;padding:5px 20px;border-radius:3px 3px 0 0;right:3px;}
  .post-body blockquote:after {position:absolute;content:'\f027';bottom:5px;font-style:normal;font-size:160%;color:rgba(255,255,255,.6);font-family:FontAwesome;right:10px;font-weight:normal;}


4. Simpan tema.
content:'Catatan'; untuk mengubah tulisan catatan dengan teks yang lain

Adapun cara membuat catatan dalam postingan blog, berikut langkah-langkahnya.

PENULISAN PADA POSTINGAN


cara membuat blockquote CSS keren di blog

1. Buat Entry baru › Pilih HTML.
2. Pilih Tanda petik seperti gambar, maka akan muncul kode <blockquote></blockquote> masukan tulisan di dalam kode tersebut.

3. Untuk hasilnya dapat dilihat di pratinjau atau setelah publis.

Mudah bukan, selain mempermudah pengunjung jika terdapat info penting, kotak catatan junga membuat tampilan blog menjadi lebih rapi dan enak dilihat.