Membuat Border/Bingkai Pada Postingan Blog
Pada kesempatan kali ini, goresan pena saya sedikit keluar dari tema biasanya, bukan ihwal matematika namun lebih ke arah tutorial blog, yaitu cara menciptakan border atau bingkai pada postingan blog.
Postingan ini bergotong-royong sebagai catatan langsung kalau suatu ketika saya perlukan biar saya tidak perlu susah-susah lagi mencarinya, namun saya rasa tidak ada salahnya kalau sekalian saya publikasikan semoga bermanfaat bagi banyak orang.
Pada beberapa postingan saya sebelumnya seringkali saya memberi bingkai pada formula atau hal yang dianggap penting pada suatu tulisan, misalnya goresan pena ini atau ini. Alasan kenapa saya beri bingkai yaitu untuk memberi penitikberatan seperti 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 kemudian saya sreenshoot dan gambar akibatnya 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 dapat memuat equation saja serta tampilannya kurang menarik. Akhirnya kita cari inspirasi lain yaitu dengan "mengakali" mode HTML, dan inilah postingan dia yang merupakan ilmu gres buat saya. Pada goresan pena dia 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 memakai arahan HTML border-border di atas sangat mudah, tinggal copy dan pastekan arahan HTML pada postingan blog kawan-kawan (pada mode HTML/bukan compose) dan ada beberapa bab yang dapat kawan-kawan edit sesuai selera, sebagai berikut:
Keterangan (sesuai no di atas) :
1. $5px$ mengatakan tepal tipisnya bingkai2. #3498DB merupakan warna bingkai dalam arahan warna HTML/HEX
3. #ECF0F1 mengatakan warna latar (backgroud) pada bingkai ini juga dalam arahan warna HTML/HEX
4. $5px$ merupakan jarak goresan pena terhadap bingkai
5. $500px$ lebar bingkai
Jika tidak mengetahui arahan warna HTML yang diinginkan, kita dapat memanfaatkan HEX genrator online pada link di bawah ini:
HEX Generator Online Klik Disini
sekian dulu goresan pena kali ini. semoga bermanfaat, terimakasih.
0 Response to "Membuat Border/Bingkai Pada Postingan Blog"
Posting Komentar