Menulis Pesan Notice di Jekyll Blog

1 menit saja |

Menulis pesan notice hanya menambahkan {: .notice} diakhir blok kalimat.

Contoh:

Ini notice standar, kita coba otak atik warnanya biar cocok CSS nya dengan selera dan lebih jelas dilihat.

Primary Notice: Kalau yang ini format notice primary. Pakai {: .notice--primary} di akhir blok kalimat.

Info Notice: Sedangkan ini format notice jenis info, pakai {: .notice--info} di akhir blok kalimat.

Warning Notice: Pakai {: .notice--warning} di akhir blok kalimat.

Danger Notice: Pakai {: .notice--danger} di akhir blok kalimat.

Success Notice: Pakai {: .notice--success} di akhir blok kalimat.


Ini pake markdown, harus pake template blog capture untuk membuat blog notice.

Source codenya seperti ini

{% capture pesan %}
#### Fitur Terbaru 

* Lebih cantik dan fleksibel
* Otomatis membuat draft dan publikasi
{% endcapture %}

<div class="notice">{{ pesan | markdownify }}</div>

dan hasilnya:

Fitur Terbaru

  • Lebih cantik dan fleksibel
  • Otomatis membuat draft dan publikasi

Kalau pakai HTML tinggal menambahkan class=notice sesuai pilihan diatas.

Contoh source codenya:

<div class="notice">
  <h4>Pesan</h4>
  <p>Isi pesan notice.</p>
</div>

Dan contoh hasilnya:

Pesan

Isi pesan notice.

Terlihat lebih cantik hasil HTML karena bisa pakai blog pesan, dan juga multi line. Terlihat lebih mudah cara pakainya untuk multi line di HTML daripada markdown. Karena pakai markdown harus digabungkan dengan HTML. Dan juga mungkin karena lebih biasa coding pake HTML :-D