Cara Membuat Quote Klasik di Posting Blog

Cara membuat Quote Klasik di Posting Blog. Hi Sobat, pada kesempatan kali ini cariduit-dot akan berbagi cara membuat blockquote/blok kutipan klasik di postingan blog. Blok Kutipan ini merupakan salah satu elemen yang penting pada postingan blog, karena postingan blog tersebut akan terlihat lebih friendly, lebih elegan, dan tentunya akan lebih menarik perhatian para pengunjung blog/web. Blok kutipan ini biasanya terletak diawal kutipan, yang diberi tanda kutip buka (open quote) dan pada bagian akhir diberi tanda kutip tutup (close-quote).
 
Fungsi dari blockquote itu sendiri salah satunya ialah untuk mempercantik tampilan postingan artikel, menarik perhatian pengunjung, sehingga pengunjung blog tidak merasa bosan melihatnya. Lalu sebagai bentuk penekanan pada bagian kalimat-kalimat tertentu yang dirasa sangat penting
 
Sebelumnya saya bertanya di forum Blogger Indonesia bagaimana cara membuatnya, dan al hamdulillah teman di grup ada yang memberikan postingan yang sangat bagus sekali tentang cara membuat quote blog ini. Karena bagi blogger pemula tentunya pasti bingung bagaimana cara membuatnya. Namun tidak ada salahnya cara ini kembali saya posting, setelah saya mencobanya dan berhasil.
 
Sebetulnya banyak sekali jenis-jenis tampilan blok quote yang lebih menarik, namun kali ini saya hanya berbagi blokquote yang dari segi tampilan lebih simpel dan lebih klasik, karena tampilan ini sudah umum dipakai termasuk dari template Evo Magz karya Mas Sugeng ini.
 
Ok sobat, lebih jelasnya bagimana cara membuat blockquote klasik di posting blog, langkah-langkanya sebagai berikut:

1.    Login ke akun blogger.com dengan akun google sobat
2.    Setelah masuk dashboard, klik menu template, lalu klik edit HTML
3.    Selanjutnya cari blockquote dengan CTRL + F, setelah ketemu inilah tampilan kodenya:

Cara Membuat Quote Klasik Di Blog

4. Setelah itu copy kode blockquote dibawah ini, dan pastekan di blockquote bawaan template sebelumnya. Lihat kode diatas yang dilingkari. Lalu simpan template.
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;
}
Gambar:
Cara Membuat Quote Klasik Di Blog

5. Langkah selanjutnya, untuk menerapkan blockquote pada postingan, Silahkan sobat membuat postingan/artikel, caranya blok postingan yang penting dan klik tanda Quote diatas, ini contohnya:


Cara Membuat Quote Klasik Di Blog
   
6. Setelah selesai membuat postingan, dan membuat blockquotenya, maka seperti biasa sobat klik publikasikan, lalu lihat hasilnya. Maka kalimat-kalimat yang penting sudah diberi quote. 


Cara Membuat Quote Klasik Di Blog
 
Demikianlah langkah-langkah cara membuat quote klasik di posting blog, terima kasih atas kunjungannya, selamat mencoba semoga berhasil dan bermanfaat.

Subscribe to receive free email updates:

18 Responses to "Cara Membuat Quote Klasik di Posting Blog"

  1. wah keren juga ie gan ...bisa membuat gaya blog kita klasik

    ReplyDelete
  2. wahhmantapgan keren.nih :D ane ijin coba boleh?

    ReplyDelete
  3. kalau kayak gini bikin berat gak gan?

    ReplyDelete
  4. Wah ilmu yang sangat bermanfat buat sobat blogger gan.makasih ya gan infonya jangan lupa kunjungan balik gan

    ReplyDelete
  5. Izin nyoba ya gan,,semoga berhasil terimakasih

    ReplyDelete
  6. Alhamdulillah sering saya gunakan cari ini, kalau ada kalimat yang perlu diperlihatkan secara unggul supaya terlihat jelas dan seperti hadits, kata mutiara atau kata motivasi. Umumnya sudah diterapkan, makasih mas.

    ReplyDelete
  7. wah menarik nih infonya tapi kita musti uprek uprek teplet ya mas..?

    ReplyDelete
  8. Unik dan menarik nih Quotenya pas banget kalo diterapin juga diblog saya :D
    yhx tutornya gan

    ReplyDelete
  9. Tutorialnya baguss gan, dan quotenya juga menarik. tapi saya lebih suka pakai yang biasa-biasa saja. Terimakasih gan

    ReplyDelete
  10. wah ini nih yang saya cari, karna saya suka bingung mau bikin quote gmna caranya sob,, thx banyak sob tuk tutorial lengkapnya, ijin sedotttt :)

    ReplyDelete
  11. wah ini nih yang saya cari, karna saya suka bingung mau bikin quote gmna caranya sob,, thx banyak sob tuk tutorial lengkapnya, ijin sedotttt :)

    ReplyDelete
  12. Tidak hanya membuat menjadi lebih menarik saja tapi quote berfungsi sebagai resume dari bacaan sebelumnya. Kan ada tuh org yg baca tiba2 di paragraf tengah2 dan bingung ini bacaan apa nah quote ini yg membantu pembaca menemukan inti dari bacaan sebelumnya

    ReplyDelete
  13. Perlu diterapkan ke blog omtopik.com juga ini, makasih om ilmunya sangat membantu ,, :-)

    ReplyDelete
  14. Thanks gan, triknya. Ada rencana mau saya terapkan di salah satu template blog saya nih..

    ReplyDelete
  15. wahhh, baru tau ni gan, makasih infonya ya, bakal ane praktekin ke blog ane

    ReplyDelete
  16. Oh jadi gitu caranya buat quote ya bang, thanks ya word di ane

    ReplyDelete

Semoga bermanfaat, silahkan bagikan artikel ini. Mohon berkomentar yang relevan, tidak membuat spam, dan jangan lupa, tinggalkan saran, atau masukan teman-teman di kolom komentar. Terimakasih