Bingkai Tulisan pada Blogspot

Mukadimah

Bagi blogger yang memuat tulisan matematis, bingkai semacam di samping ini tentu diperlukan untuk melengkapi unsur keindahan pada suatu tulisan. Dua orang teman, ini dan itu, mengingatkan saya akan hal itu.

Di dalam $\LaTeX$, dalam modus matematis bentuk tayang (display), bingkai semacam itu tentu dapat dibuat dengan menggunakan perintah \boxed{...} dari paket amsmath. Namun hasilnya hanya dapat memuat rumus (equation) saja dan tampilannya kurang begitu baik.

Tidak ada pilihan lain, kita harus beralih ke modus HTML. Berkat panduan dari sini dan dari sana akhirnya saya dapat menuliskannya kembali untuk Anda.

Teknis Penulisan

Di mana pun pada bagian tulisan kita, letakkan kode berikut ini dalam modus HTML.

<div style="border: 5px double #C92020; padding: 5px; max-width:500px;">
...
</div>

Pada opsi $\textrm{border}$, 

• opsi $5\,\textrm{px}$ menyatakan ketebalan garis tepi bingkai; kita dapat mengubahnya sesuai dengan keperluannya; 
• opsi $\textrm{double}$ menyatakan bentuk garis tepi bingkai; kita dapat memilih yang lainnya, yaitu: $\textrm{dashed}$, $\textrm{groove}$, $\textrm{ridge}$, $\textrm{inset}$, atau $\textrm{outset}$);
• Opsi $\#\textrm{C}92020$ menyatakan warna bingkai dalam bentuk HEX; kita dapat menentukan warna HEX lainnya di situ atau oleh warna dasar, seperti: red, blue, green, yellow.

Pada opsi $\textrm{padding}$, $5\,\textrm{px}$ menyatakan jarak antara teks di dalam bingkai ke tepi bingkai; kita dapat mengubahnya sesuai dengan keperluannya. 

Pada opsi $\textrm{max-width}$, $500\,\textrm{px}$ menyatakan lebar bingkai yang mencakup teks di dalamnya; kita dapat mengubahnya sesuai dengan keperluannya.
Kemudian titik tiga itu kita isi oleh teks yang diinginkan di dalam tulisan tersebut. 

Sebagai contoh, bila kita nyatakan

<div style="border: 5px double #C92020; padding: 5px; max-width:500px;">
Misalkan $N$ menyatakan banyak angka nol berurutan di hasil akhir dari $n!$, maka
\begin{equation*}
N =\left\lfloor\frac{n}{5}\right\rfloor+\left\lfloor\frac{n}{5^2}\right\rfloor+\left\lfloor\frac{n}{5^3}\right\rfloor+\cdots+\left\lfloor\frac{n}{5^k}\right\rfloor
\end{equation*}
dengan $k$ memenuhi $5^k\le n$.
</div>

maka akan menghasilkan

Misalkan $N$ menyatakan banyak angka nol berurutan di hasil akhir dari $n!$, maka $$\begin{equation*} N =\left\lfloor\frac{n}{5}\right\rfloor+\left\lfloor\frac{n}{5^2}\right\rfloor+\left\lfloor\frac{n}{5^3}\right\rfloor+\cdots+\left\lfloor\frac{n}{5^k}\right\rfloor \end{equation*}$$ dengan $k$ memenuhi $5^k\le n$.

Lalu, bagaimana bila kita ingin agar sudut-sudut bingkai itu lengkung seperti tampak pada gambar pada awal tulisan ini?

Untuk hal itu kita harus menambahkan opsi

border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;

sehingga berbentuk

<div style="border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 5px double #C92020; padding: 5px; max-width:500px;">
...
</div>

Tentu, ukuran kelengkungannya itu dapat kita ubah sesuai dengan yang kita inginkan. Dengan menggunakan opsi kelengkungan tersebut, perhatikan hasilnya berikut ini.

Misalkan $N$ menyatakan banyak angka nol berurutan di hasil akhir dari $n!$, maka $$\begin{equation*} N =\left\lfloor\frac{n}{5}\right\rfloor+\left\lfloor\frac{n}{5^2}\right\rfloor+\left\lfloor\frac{n}{5^3}\right\rfloor+\cdots+\left\lfloor\frac{n}{5^k}\right\rfloor \end{equation*}$$ dengan $k$ memenuhi $5^k\le n$.

Bagaimana mudah, bukan?

Penutup

Tidak ada yang tidak mungkin sehubungan dengan hal teknologi informasi, kita hanya perlu meluangkan sedikit waktu untuk mempelajarinya.
Demikian semoga bermanfaat.

$\square$ Adjie Gumarang Pujakelana 2017