MEMBUAT BORDER/BINGKAI PADA POSTINGAN BLOG
Thursday, July 6, 2017
Pada kesempatan kali ini, tulisan saya sedikit keluar dari tema biasanya, bukan tentang matematika namun lebih ke arah tutorial blog, yaitu cara membuat border atau bingkai pada postingan blog.
Postingan ini sebenarnya sebagai catatan pribadi jika suatu saat saya perlukan biar saya tidak perlu susah-susah lagi mencarinya, namun saya rasa tidak ada salahnya jika sekalian saya publikasikan agar bermanfaat bagi banyak orang.
Pada beberapa postingan saya sebelumnya seringkali saya memberi bingkai pada formula atau hal yang dianggap penting pada suatu tulisan, misalnya tulisan ini atau ini. Alasan kenapa saya beri bingkai adalah untuk memberi penekanan seolah-olah saya memberi tahu pembaca "ini penting lho" :) dan tentunya menambah nilai estetika pada tulisan.
Pada tulisan-tulisan saya sebelumnya bingkai saya buat dengan cara menyisipkan gambar hasil sreenshoot. jadi rumus itu saya tulis terlebih dahulu pada Ms. Word lalu saya sreenshoot dan gambar hasilnya saya sisipkan. Cara tersebut tentu tidak salah, namun saya rasa kurang efektif. Setelah saya diskusi dengan ini namun ternyata ada kelemahannya, yaitu perintah tersebut terbatas hanya bisa memuat equation saja serta tampilannya kurang menarik. Akhirnya kita cari ide lain yaitu dengan "mengakali" mode HTML, dan inilah postingan beliau yang merupakan ilmu baru buat saya. Pada tulisan beliau tersebut saya rasa sudah dikupas cukup detil dan lengkap, sementara pada postingan saya ini hanya menambahkan beberapa variasi (model) bingkai/border saja.
Berikut beberapa variasi bingkai yang saya maksud beserta Kode HTML nya:
1. SOLID
Ketaksamaan Chaucy Schwarz Engel (CS Engel):
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
KODE HTML:
<div style="border: 5px solid #3498DB; background-color:#ECF0F1; padding: 5px; width: 500px;"> Isi Tulisan di sini</div> 2. DASHED
Ketaksamaan Chaucy Schwarz Engel (CS Engel):
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
KODE HTML:
<div style="border: 5px dashed #3498DB; background-color:#ECF0F1; padding: 5px; width: 500px;"> Isi Tulisan di sini</div> 3. DOTTED Ketaksamaan Chaucy Schwarz Engel (CS Engel):
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
KODE HTML:
<div style="border: 5px dotted #3498DB; background-color:#ECF0F1; padding: 5px; width: 500px;"> Isi Tulisan di sini</div> 4. DOUBLE
Ketaksamaan Chaucy Schwarz Engel (CS Engel):
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
KODE HTML:
<div style="border: 5px double #3498DB; background-color:#ECF0F1; padding: 5px; width: 500px;"> Tulisan anda di sini</div>5. GROOVE
Ketaksamaan Chaucy Schwarz Engel (CS Engel):
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
KODE HTML:
<div style="border: 5px groove #3498DB; background-color:#ECF0F1; padding: 5px; width: 500px;"> Tulisan anda di sini</div> 6. OUTSET
Ketaksamaan Chaucy Schwarz Engel (CS Engel):
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
KODE HTML:
<div style="border: 5px outset #3498DB; background-color:#ECF0F1; padding: 5px; width: 500px;"> Tulisan anda di sini</div> 7. RIDGE
Ketaksamaan Chaucy Schwarz Engel (CS Engel):
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
Untuk sembarang bilangan Real $t_1, t_2, t_3, ..., t_n$ dan sembarang bilangan real positif $w_1, w_2, w_3, ... , w_n$ berlaku
$$\frac{{t_{1}}^{2}}{w_{1}}+\frac{{t_{2}}^{2}}{w_{2}}+\frac{{t_{3}}^{2}}{w_{3}}+...+\frac{{t_{n}}^{2}}{w_{n}}\leq\frac{(t_1+t_2+t_3+...+t_n)^{2}}{w_1+w_2+w_3+...+w_n}$$
KODE HTML:
<div style="border: 5px ridge #3498DB; background-color:#ECF0F1; padding: 5px; width: 500px;"> Isi Tulisan di sini</div> Cara menggunakan kode HTML border-border di atas sangat mudah, tinggal copy dan pastekan kode HTML pada postingan blog kawan-kawan (pada mode HTML/bukan compose) dan ada beberapa bagian yang bisa kawan-kawan edit sesuai selera, sebagai berikut:
Keterangan (sesuai no di atas) :
1. $5px$ menunjukkan tepal tipisnya bingkai2. #3498DB merupakan warna bingkai dalam kode warna HTML/HEX
3. #ECF0F1 menunjukkan warna latar (backgroud) pada bingkai ini juga dalam kode warna HTML/HEX
4. $5px$ merupakan jarak tulisan terhadap bingkai
5. $500px$ lebar bingkai
Jika tidak mengetahui kode warna HTML yang diinginkan, kita bisa memanfaatkan HEX genrator online pada link di bawah ini:
HEX Generator Online Klik Disini
sekian dulu tulisan kali ini. semoga bermanfaat, terimakasih.