Cara Membuat Tulisan di dalam Kotak pada Postingan Blog

Saya merasa ingin menyisipkan "Baca Juga" di setiap postingan Taruih Baraja dengan harapan semoga bisa membangun internal link-nya. Meski "related posts" bisa dibuat pakai tools maupuun script yang nantinya akan menambahkan related posts secara otomatis, namun kali ini saya ingin menambahkan dan mengaturnya secara manual. Supaya tidak menyatu dengan tulisan artikel, saya akan meng-highlight-nya dengan memasukkannya ke dalam kotak.

Sebetulnya kotak ini tidak mesti memuat "Baca Juga", bisa juga digunakan untuk meng-highlight tulisan penting atau quotes, atau bisa juga untuk dijadikan sebagai kotak script (Baca juga: Cara Membuat Kotak Script di Postingan Blog), gapapalah ya, saya bikin "Baca Juga"-nya dalam kurung biasa saja pada postingan ini, hehehe. Suka-suka saja V^_^ Lagipula yang ini beda lagi karena bener-bener nyambung dengan yang sedang dibahas.

Nah, untuk menambahkan kotak pada postingan blog, saya perlu menempatkan kode ini di dalam postingan:

 <ul style="background-color: #E3F5FA; border: groove; display: block; padding: 15px; text-align: left;">
  <b> Baca Juga: </b><br/>
  <dd>
    <p>
  <li><a href="#" target="_blank">Judul<br /></a></li>
  <li><a href="#" target="_blank">Judul</a><br /></li>
  <li><a href="#" target="_blank">Judul</a></li>
    <p>
  </dd>
</ul>

Sebenernya yang bagian bullet <li> itu gak langsung dibuat pakai codingan sih, itu diketik mode Compose view aja tadi, bukan di HTML view, cuman sekalian aja lah dilampirkan di catatan ini, supaya jelas.

Sementara, awalnya begini:

 <ul style="background-color: #E3F5FA; border: groove; display: block; padding: 15px; text-align: left;">  
  <b> Tulisan </b><br/>
 </ul>

Seperti biasa, warna oranye bisa disesuaikan sesuai dengan selera.

Di referensi yang saya dapatkan sih menggunakan tag <p> jadi <p style .... >, namun ketika saya mencoba memakai tag <ul> maka akan terjadi error. Apakah tag <ul> tidak bisa berada di dalam tag <p>? Saya belum ngulik lebih jauh, yang jelas, di blog ini terjadi error.

Hasilnya:

Cara membuat kotak dalam postingan blog
Ditangkap dari postingan 5 Website yang Membayar Penulis Lepas

Sekian, semoga bermanfaat.