Friday, June 30, 2017

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

8 comments:

Alkawarizmi said...

Mantap pak, terimakasih banyak... membantu sekali

Catatan Matematika said...

Wah hebat! Terimakasih! Pak, mohon pencerahan, bagaimana buat tulisan teks biasa nyatu dgn rumus matematika. Saya pakai mathjax di blog untuk latexnya. Contoh: saya mau buat:
akar-akar persamaan ax^2 + bx + c adalah x1 dan x2.
Nah di blog saya tampil:
Akar-akar persamaan
ax^2 + bx + c = 0
adalah
X1
dan
X2
Gimana agar tampilannya nyatu ke sampjng teks akar-akar persamaan kuadrat.

Eman Sulaeman said...

Gunakan saja tanda dollar. ... teks $ax^2+bx+c=0$ teks ....

Eman Sulaeman said...

Akar-akar persamaan $ax^2+bx+c=0$ adalah $x_1$ dan $x_2$.

Catatan Matematika said...

Sudah saya buat pak! Saya pakai mathjax. Jika saya ketik tanda dolar ax^2 + bx + c = 0 tanda dolar gak work juga! Atau jangan2 script yg saya buat di template blogger perlu di perbaiki..! Mohon pak, bagikan scriptnya. Terimakasih.

Eman Sulaeman said...

Saya menggunakan ini: http://menulislatex.blogspot.co.id/2014/07/mathjax-menulis-dengan-smalllatex-di.html

Catatan Matematika said...

terima kasih pak! sudah bisa saya buatnya! Semoga bapak sehat selalu panjang umur, sehingga semakin banyak ilmu yang bisa bapak bagikan!

Eman Sulaeman said...

Aamiin. Terima kasih!

Related Posts Plugin for WordPress, Blogger...