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:

  1. Mantap pak, terimakasih banyak... membantu sekali

    ReplyDelete
  2. 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.

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

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

      Delete
  3. 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.

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

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

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...