January 4, 2015

Cara Menambah Blok Kutipan (Blockquote) di Posting Blog

By Romeltea | Published: January 4, 2015

Cara Membuat, Memodifikasi, Mengubah, atau Memasang "Blok Kutipan" (Blockquote) di Posting Blog.

Cara Menambah Blok Kutipan (Blockquote) di Posting Blog
BLOCKQUOTE adalah salah satu aspek atau elemen penting dalam posting blog ataupun situs web. "Blok Kutipan" ini bagian dari highlight tulisan (teks) agar tulisan di media online lebih "user friendly" --bikin nyaman pembaca.

Fungsi blockquote yaitu memberi tekanan pada bagian/kalimat tertentu dalam naskah online dan/atau "kutipan beneran" --menampilkan kutipan langsung-- sebagaimana halnya Soundbite di radio atau Video Clips di televisi.

Ringkasnya, "blok kutipan" di postingan blog atau sajian naskah online berfungsi:
  1. Mempercantik tampilan naskah.
  2. Menarik perhatian (eye catching).
  3. Menunjukkan bagian penting.
  4. Meningkatkan "scannability" sebagaimana disarankan pakar web usability Jakob Nielsen.
Contoh penggunaan blockquote ada di posting Di Balik Kemenangan Persib Bandung. Ada dua kotak kutipan di sana. Cekidot saja ya :)

Alinea berikut ini juga contoh "blockquote" di posting blog:
Desain Web atau Template SEO Friendly biasanya sudah membuat kode khusus buat kotak kutipan. Kota tinggal "Select All" kalimat atau alinea yang akan di-blockquote lalu klik tombol "Quote".

Cara Menambah Blok Kutipan (Blockquote) di Posting Blog

Di template blog yang saya gunakan ini juga sadah ada, namun saya modif biar "lebih berasa" dengan kode yang saya comot dari CSS Trick berikut ini.

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Jika Anda akan menggunakannya juga di blog blogspot, tinggal:
1. Klik "Template" > "Edit HTML"
2. Cari (Ctrl+F) kode "blockquote".
3. REPLACE dengan kode di atas.
4. Save Template!

Contoh-contoh blockquote lainnya bisa disimak antara lain di Smashing Magazine.

JENIS BLOCKQUOTE GAMBAR
Jenis kotak kutipan lain yang lebih menarik adalah "image blockquote". Salah satu fungsinya, jika gambarnya menarik, akan di-share oleh pengunjung ke akun Pinterest mereka. Wasalam. (www.romelteamedia.com).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Cara Menambah Blok Kutipan (Blockquote) di Posting Blog

Post a Comment

Contact Form

Name

Email *

Message *