Membuat Kotak Quote pada Postingan Blog dengan CSS

Sebenarnya pengaturan CSS untuk membuat kotak yang "lebih berwarna" pada postingan blog ini ada banyak. Kita bebas mengatur bagaimana warna background kotak, warna dan bentuk border, font yang digunakan, dan lain sebagainya.

CSS pada Cara Membuat Kotak Script di Postingan Blog yang saya bikin dengan kotak berwarna gelap dan border-left yang lebih gelap juga dapat digunakan. CSS pada Cara Membuat Tulisan di dalam Kotak pada Postingan Blog yang saya bikin untuk membuat kota "Baca juga" nan berupa kotak berlatar biru dengan border abu-abu pun bisa digunakan.

Kali ini, saya ingin membuat beberapa custom kotak pada postingan blog yang per Juni 2022 ini sedang digunakan di blog Taruih Baraja.

Membuat kotak quote dengan tanda petik ganda / tanda kutip

Tangkapan layar dari postingan Memonetisasi Blog vs Santuy Blog

Pertama, tulisan dibikin seperti contoh:

<div class="kutipan"><div class="isi-kutipan">Ikut lomba blog itu...</div></div>Lalu deklarasikan CSS-nya

Selanjutnya, masukkan kode CSS ini:

<style>
  .kutipan {
    background-color: #f3f3f3;
    font-size: 20px;
    padding-top:5px;
    padding-left: 5px;
    padding-right:5px;
  }
  .isi-kutipan {
    padding-left: 50px;
    padding-right:50px;
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .kutipan:before {
    content: "\201C";
    font-family: times;
    color: white;
    font-size:70px;
    font-weight: bold;
    line-height:0px;
    padding-top: 23px;
    float: left;
  }
  .kutipan:after {
    content: "\201D";
    font-family: times;
    color: white;
    font-size:70px;
    font-weight: bold;
    line-height:0px;
    float:right;
  }
</style>

Saya bagi menjadi kelas begitu karena saya ingin tulisannya tidak sejajar secara membujur dengan quotation mark-nya. Hmm, saat menulis ini, saya lagi mikir, apa lebih bagus saya bikin tulisannya jadi rata tengah ya? Tapi berhubung saya terinspirasi dari https://benlaksana.tumblr.com/ sepertinya saya urungkan dulu fufu.

Membuat kotak quote di blog dengan custom CSS sederhana

Kotak quotation sederhana yang sedang digunakan di Perpustakaan GOR Haji Agus Salim Padang: Rumah Baru Perpustakaan Kota Padang

Kode / script yang digunakan tidak jauh berbeda dengan script CSS di Cara Membuat Kotak Script di Postingan Blog.

Hanya saja, di sini saya tidak membuat class, tetapi langsung mendeklarasikannya di dalam script html seperti contoh:

<p style="background-color: white; border-left: 5px solid rgb(220, 220, 220); margin-left: 15px; padding: 15px; text-align: left;"><span style="background-color: transparent; text-align: justify;"><i>"The library card is a passport to ..."</i> -Libra Bay, penulis.</span></p>

Membuat kotak "Baca Juga" pada postingan blog

Kotak "Baca Juga" yang sedang dipakai di 5 Alasan Kenapa Saya Memilih Blogspot untuk Blogging

Sebetulnya tak jauh beda dengan yang saya catat pada postingan Cara Membuat Tulisan di dalam Kotak pada Postingan Blog. Pada kode di bawah, saya hanya mengedit warna background dan bentuk serta warna bordernya.

Caranya seperti contoh:

<ul style="background-color: none; border: 1px dashed rgb(128, 128, 128); padding: 15px; text-align: left;"><b>Baca Juga:</b><br /><dd><p></p><li><a href="https://www.taruihbaraja.com/2022/04/tips-optimasi-blog.html">5 Tips Blogging untuk Optimasi Blog</a></li><li><a href="https://www.taruihbaraja.com/2022/04/5-alasan-kenapa-ikut-bpn-30-day-ramadan.html">5 Alasan Kenapa Ikut BPN 30 Day Ramadan Challenge</a></li><li><a href="https://www.taruihbaraja.com/2022/04/tips-merampungkan-bpn-30-day-ramadan-challenge.html">5 Tips untuk Mewujudkan Keinginan Merampungkan BPN 30 Day Ramadan Challenge</a></li></dd><p></p><p></p></ul>

Saya memasukkan langsung di dalam html. Tentu bisa juga dengan mendeklarasikan class lalu mendeklarasikan CSS-nya di dalam tag style. Tapi saya begini saja dulu.

Nggak mesti pakai tag ul, pakai tag p juga bisa. Ini karena bikin daftar beberapa artikel "Baca Juga", maka saya masukkan dalam tag ul.

Begitulah beberapa custom CSS untuk kotak pada postingan blog yang sedang digunakan di beberapa postingan blog Taruih Baraja. Saya catat di sini supaya memudahkan saya untuk "mengambil" script ini kembali dan memasangnya di tempat lain. Terutama script dengan tanda petik ganda yang telah saya otak-atik sedemikian rupa oleh diri yang masih amatiran ini.

Terpikir juga, bahwa ini sangat manual. Berbeda dengan cara custom kotak quote CSS yang saya catat di Customize Blockquote CSS yang dapat terpanggil secara otomatis karena CSS nya sudah saya tempel di Edit HTML, bukan per postingan, dan menggunakannya cukup dengan klik icon Quote text pada toolbar dashboard Blogger ini. Jadi jika suatu hari mungkin saya bosan, saya tinggal ubah kode CSS di Edit HTML dan semua kotak quote di setiap postingan blog akan auto berubah. Sementara yang ini kan mesti edit satu-satu.. Hmm, apa saya perlu deklarasikan class-nya ya? Lalu tempel kode CSS di Edit HTML?

[Update 3 Juni: Saya sudah membuat postingan Membuat Kotak Quote pada Postingan Blog dengan CSS: Cara yang Lebih Praktis]

Sekian dulu, semoga bermanfaat.