Membuat Border/Bingkai Pada Postingan Blog
Pada kesempatan kali ini, gesekan pena saya sedikit keluar dari tema biasanya, bukan wacana matematika namun lebih ke arah tutorial blog, yaitu cara membuat border atau bingkai pada postingan blog.
Postingan ini tolong-menolong sebagai catatan pribadi jikalau suatu dikala saya perlukan biar saya tidak perlu susah-susah lagi mencarinya, namun saya rasa tidak ada salahnya jikalau sekalian saya publikasikan biar bermanfaat bagi banyak orang.
Pada beberapa postingan saya sebelumnya seringkali saya memberi bingkai pada formula atau hal yang dianggap penting pada suatu tulisan, misalnya gesekan pena ini atau ini. Alasan kenapa saya beri bingkai yakni untuk memberi pemfokusan menyerupai 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 alhasil saya sisipkan. Cara tersebut tentu tidak salah, namun saya rasa kurang efektif. Setelah saya diskusi dengan ini namun ternyata ada kelemahannya, yakni perintah tersebut terbatas hanya bisa memuat equation saja serta tampilannya kurang menarik. Akhirnya kita cari inspirasi lain yakni dengan "mengakali" mode HTML, dan inilah postingan ia yang merupakan ilmu baru buat saya. Pada gesekan pena ia 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 penggalan yang bisa kawan-kawan edit sesuai selera, sebagai berikut: Keterangan (sesuai no di atas) :
1. $5px$ memperlihatkan tepal tipisnya bingkai2. #3498DB merupakan warna bingkai dalam kode warna HTML/HEX
3. #ECF0F1 memperlihatkan warna latar (backgroud) pada bingkai ini juga dalam kode warna HTML/HEX
4. $5px$ merupakan jarak gesekan pena 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 gesekan pena kali ini. biar bermanfaat, terimakasih.
Belum ada Komentar untuk "Membuat Border/Bingkai Pada Postingan Blog"
Posting Komentar