Cara Membuat Kotak Script dalam Postingan - Pdt. Gerry Atje
Akhirnya, mau tidak mau harus mencatat data juga sebagai dokumentasi supaya tidak lupa. Sama sekali tidak bermaksud ganti haluan topik blog menjadi blog tutorial html, hahaha .. Saya mah gak bisa sebenarnya (hanya otodidak dari mbah google) ... Akan tetapi dirasa-rasa kok ya perlu juga untuk belajar dan mencatat beberapa hal tentang cara berkreasi menulis di blog. 

Saya tertarik dengan kreasi menulis di postingan blog. Kalau kreasi edit html template blog, gak sanggup saya jelasinnya ... lebih baik langsung saja ke tutor yang berlimpah di google.

Sebagai langkah awal, bisa dimulai dari topik ini: Cara Membuat Kotak Script di Postingan Blog. Kotak script yang dikutip dari berbagai sumber ini jika merujuk pada kebutuhan blog renungan seperti yang sahabat sedang baca sekarang, bisa digunakan untuk mencatat teks Alkitab atau pointer dalam renungan, dll.

1. MEMBUAT KOTAK SCRIPT WARNA DENGAN FUNGSI SCROLL

Copy script dibawah ini dalam laman menulis blog bagian HTML (bukan di Compose ya).

<div style="background-color: #cccccc; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;">MASUKKAN TEKS SCRIPT DISINI</div>

Contoh penerapan:

Isteri yang cakap siapakah akan mendapatkannya? Ia lebih berharga dari pada permata. Hati suaminya percaya kepadanya, suaminya tidak akan kekurangan keuntungan. Ia berbuat baik kepada suaminya dan tidak berbuat jahat sepanjang umurnya. ... Ia mengawasi segala perbuatan rumah tangganya, makanan kemalasan tidak dimakannya. Anak-anaknya bangun, dan menyebutnya berbahagia, pula suaminya memuji dia: Banyak wanita telah berbuat baik, tetapi kau melebihi mereka semua. Kemolekan adalah bohong dan kecantikan adalah sia-sia, tetapi isteri yang takut akan TUHAN dipuji-puji.

Keterangan pada kode:
1. border: 3px = ketebalan kotak script. dan #eeeeee = warna kotak script.
Warna bisa diganti, lihat misalnya di https://omkicau.com/sukses-bikin-blog/kode-warna-html/
2. solid; = Bentuk kotak, bisa diganti dengan:
dashed, dotted, double, groove, inset, outset, ridge
3. Padding:10px = panjang kotak ke bawah (height), width = lebar kotak. (Bisa juga menggunakan persentase 100% atau 75% dll)
4. background-color:#cccccc; = warna dalam kotak. 
5. Dan text-align:left; = posisi goresan pena didalam kotak di kiri.

BAWAAN TEMPLATE

<pre data-codetype="JavaScriptku" title="JavaScript"><code class="javascript-markup">Kode Disini</code></pre>

<pre data-codetype="HTMLku" title="HTML"><code class="leangue-markup">Kode Disini</code></pre>

<pre data-codetype="CSSku" title="CSS"><code class="css-markup">Kode Disini</code></pre>

<pre data-codetype="jQueryku" title="jQuery"><code class="javascript-markup">Kode Disini</code></pre>

Kode Disini

Kode Disini

Kode Disini

Kode Disini

2. BEBERAPA CONTOH LAIN:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="background-color: #f3f3f3; border-left: 5px solid #2288dd; padding: 10px; t-align: left;"> MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px 10px 10px 10px; background-color: rgb(221 , 229 , 209); border: 4px dotted rgb(255 , 255 , 255); color: rgb(204 , 0 , 0); line-height: 1.5em; padding: 5px;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="background-color: transparent; border-radius: 30px; border: 4px solid #254779; box-shadow: 0px 0px 10px; padding: 10px; text-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="padding:20px 30px;text-align:left; background: #999 no-repeat right; color: #fff;font-size: 16px;line-height: 1.4; border: 0;border-radius: 10px;margin: 0 30px 10px;display: block; box-shadow: 11px 10px 0px #555; ">MASUKKAN TEKS SCRIPT DISINI</div>

Cara Membuat Kotak Script dalam Postingan

Akhirnya, mau tidak mau harus mencatat data juga sebagai dokumentasi supaya tidak lupa. Sama sekali tidak bermaksud ganti haluan topik blog menjadi blog tutorial html, hahaha .. Saya mah gak bisa sebenarnya (hanya otodidak dari mbah google) ... Akan tetapi dirasa-rasa kok ya perlu juga untuk belajar dan mencatat beberapa hal tentang cara berkreasi menulis di blog. 

Saya tertarik dengan kreasi menulis di postingan blog. Kalau kreasi edit html template blog, gak sanggup saya jelasinnya ... lebih baik langsung saja ke tutor yang berlimpah di google.

Sebagai langkah awal, bisa dimulai dari topik ini: Cara Membuat Kotak Script di Postingan Blog. Kotak script yang dikutip dari berbagai sumber ini jika merujuk pada kebutuhan blog renungan seperti yang sahabat sedang baca sekarang, bisa digunakan untuk mencatat teks Alkitab atau pointer dalam renungan, dll.

1. MEMBUAT KOTAK SCRIPT WARNA DENGAN FUNGSI SCROLL

Copy script dibawah ini dalam laman menulis blog bagian HTML (bukan di Compose ya).

<div style="background-color: #cccccc; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;">MASUKKAN TEKS SCRIPT DISINI</div>

Contoh penerapan:

Isteri yang cakap siapakah akan mendapatkannya? Ia lebih berharga dari pada permata. Hati suaminya percaya kepadanya, suaminya tidak akan kekurangan keuntungan. Ia berbuat baik kepada suaminya dan tidak berbuat jahat sepanjang umurnya. ... Ia mengawasi segala perbuatan rumah tangganya, makanan kemalasan tidak dimakannya. Anak-anaknya bangun, dan menyebutnya berbahagia, pula suaminya memuji dia: Banyak wanita telah berbuat baik, tetapi kau melebihi mereka semua. Kemolekan adalah bohong dan kecantikan adalah sia-sia, tetapi isteri yang takut akan TUHAN dipuji-puji.

Keterangan pada kode:
1. border: 3px = ketebalan kotak script. dan #eeeeee = warna kotak script.
Warna bisa diganti, lihat misalnya di https://omkicau.com/sukses-bikin-blog/kode-warna-html/
2. solid; = Bentuk kotak, bisa diganti dengan:
dashed, dotted, double, groove, inset, outset, ridge
3. Padding:10px = panjang kotak ke bawah (height), width = lebar kotak. (Bisa juga menggunakan persentase 100% atau 75% dll)
4. background-color:#cccccc; = warna dalam kotak. 
5. Dan text-align:left; = posisi goresan pena didalam kotak di kiri.

BAWAAN TEMPLATE

<pre data-codetype="JavaScriptku" title="JavaScript"><code class="javascript-markup">Kode Disini</code></pre>

<pre data-codetype="HTMLku" title="HTML"><code class="leangue-markup">Kode Disini</code></pre>

<pre data-codetype="CSSku" title="CSS"><code class="css-markup">Kode Disini</code></pre>

<pre data-codetype="jQueryku" title="jQuery"><code class="javascript-markup">Kode Disini</code></pre>

Kode Disini

Kode Disini

Kode Disini

Kode Disini

2. BEBERAPA CONTOH LAIN:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="background-color: #f3f3f3; border-left: 5px solid #2288dd; padding: 10px; t-align: left;"> MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> MASUKKAN TEKS SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px 10px 10px 10px; background-color: rgb(221 , 229 , 209); border: 4px dotted rgb(255 , 255 , 255); color: rgb(204 , 0 , 0); line-height: 1.5em; padding: 5px;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="background-color: transparent; border-radius: 30px; border: 4px solid #254779; box-shadow: 0px 0px 10px; padding: 10px; text-align: left;">MASUKKAN TEKS SCRIPT DISINI</div>

<div style="padding:20px 30px;text-align:left; background: #999 no-repeat right; color: #fff;font-size: 16px;line-height: 1.4; border: 0;border-radius: 10px;margin: 0 30px 10px;display: block; box-shadow: 11px 10px 0px #555; ">MASUKKAN TEKS SCRIPT DISINI</div>

Terimakasih sudah membaca renungan di blog ini. Sahabat dapat menerima renungan langsung melalui email dengan mendaftarkan email Sahabat di kotak subscribe. Tuhan memberkati selalu.


SUBSCRIBE OUR NEWSLETTER