Membuat Kotak Quote pada Postingan Blog dengan CSS: Cara yang Lebih Praktis

Sebelumnya saya sudah mencatat kodingan Custom CSS untuk membuat kotak quote dalam postingan Membuat Kotak Quote pada Postingan Blog dengan CSS. Dalam postingan sebelum ini, kodingan CSS dideklarasikan pada setiap postingan. Jadi, kalau saya ingin mengubah style CSS-nya, seperti mengubah warna backround misalnya, maka saya perlu menyunting postingan satu per satu atau style kotak di postingan itu tidak ikut berubah alias mengikuti desain lama.

Maka, pada postingan ini, saya akan mencatat bagaimana membuat kotak quote (dan juga kota "Baca Juga") dengan meletakkan script CSS-nya di bagian Edit HTML, supaya nanti kalau mau mengubah gaya kotak, maka tidak perlu mengedit satu per satu postingan, melainkan cukup mengedit di bagian Edit HTML saja. Lebih praktis, dan sebaiknya memang beginilah cara yang patut diterapkan sejak awal ya?

Membuat kotak quote dengan tanpa petik ganda / tanpa kutip

Karena saya sudah mendeklarasikan class di script ini, jadi nggak perlu ada perubahan sih, kecuali script CSS-nya yang pada awalnya saya taroh di postingan, saya pindahkan ke Edit HTML.

Hanya saja, kali ini saya mengubah nama class-nya jadi quote-besar. Kalau nggak diubah jadi quote-besar juga nggak masalah. Saya ganti nama class-nya biar matching aja, ada quote-besar dan ada quote-kecil.

Hasilnya tetap sama. Jadi saya nggak akan naroh screen capture-nya di sini ya. Ckckck, emang mageran saat ini.

Membuat kotak quote di blog dengan custom CSS sederhana

Style pada script ini saya taroh di bagian html. Tinggal mindahin script style-nya ke CSS, dan mendeklarasikan class untuk script ini.

Dari yang tadinya saya bikin:

 <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> 

Jadinya begini:

 <p class="quote-kecil"><i>"The library card is a passport to ..."</i> -Libra Bay, penulis.</span></p>

Hasilnya juga tetap sama. Jadi saya nggak akan naroh screen capture-nya di postingan ini ya.

Membuat kotak "Baca Juga" pada postingan blog

Style pada script ini juga saya taroh di bagian html. Saya pun mindahin script style-nya ke CSS, dan mendeklarasikan class untuk script ini.

Tapi ternyata nggak cukup sampai di situ.

Tulisan "Baca Juga"nya jadi mepet ke atas. Saya atur padding-top, gak ngaruh. Entah di bagian CSS mana yang perlu diedit. Tapi akhirnya saya menyisatinya dalam kode html.

Dari yang tadinya saya bikin:

 <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>

Jadinya begini:

 <ul class="baca-juga"><p><b>Baca Juga:</b></p>><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>

Jadi, bedanya ada di class, juga pada <br/> yang saya hapus, dan saya ganti dengan <p></p> yang mengapit tulisan Baca Juga.

Hasilnya? Kurang lebih sama, kecuali padding kiri-kanan-nya terlihat lebih panjang. Saya coba deklarasikan padding-left dan padding-right -nya, tapi tidak berpengaruh. Saya belum tahu cara memperbaiki supaya padding-nya jadi lebih ramping kembali. Namun saat ini saya sudah berpuas hati dengan hasilnya.

Kotak "Baca Juga" hasil tangkapan layar 5 Alasan Kenapa Saya Memilih Blogspot untuk Blogging. Terlihat padding yang berbeda dengan yang di-ss di postingan sebelumnya, Membuat Kota Quote pada Postingan Blog dengan CSS. I think this is not a big deal.

Nah, untuk script CSS yang saya taroh di bagian Edit HTML adalah:

/* Custom CSS Bikin kotak di postingan
----------------------------------------------- */

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

.quote-kecil {
background-color: white;
border-left: 5px solid rgb(220, 220, 220); 
display: block;
margin-left: 15px;
padding: 15px;
text-align: left;
}

.baca-juga {
background-color: none;
border: 1px dashed rgb(128, 128, 128)
display: block;
text-align: left;
}

Sekian, semoga bermanfaat,