News
Loading...

Cara Membuat Kotak dan Scroll untuk Script Dalam Postingan Artikel di Blog Terbaru

Sarjanabersama-Baiklah pada artikel kali ini akan membahas mengenai cara membuat kotak script dalam postikan blog sekaligus membuat scrollnya. Sebelum ke tahapnya, berikut penjelasan singkat mengenai kotak scriptnya.

Cara Membuat Kotak dan Scroll untuk Script Dalam Postingan Artikel di Blog Terbaru

Kotak script disebut juga yaitu text box adalah sebuah kotak yang didalam nya terdapat tulisan atau script kode. Biasanya untuk mengisi script lebih baik menggunakan fungsi scroll agar terlihat rapi dan teratur pada sebuah artikel/postingan di blogspot, wordpress atau website sehingga para visitor pun nyaman ketika sedang membaca artikel yang ada di situs web/bog tersebut. Untuk membuat kotak html blog tersebut, hanya perlu menambahkan kode script ke dalam posting blog dan dapat kita sesuaikan bentuk maupun warna kotak script supaya tampilannya terlihat indah dan bagus.

Oke, langsung saja ke langkah-langkahnya pembuatannya

Cara membuat Kotak Script didalam Postingan :
1. Bukalah kotak HTML dengan cara masuk ke Dasboard blog --> New Entri --> pilih HTML
Maka tampilannya akan seperti berikut
Cara Membuat Kotak dan Scroll untuk Script Dalam Postingan Artikel di Blog Terbaru

Masukkan Judul Artikel kalian

2. Masukkan Kode HTML berikut //didalam HTML

<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 Kode Script Kalian.</div>

//Ganti tulisan warna merah dengan kode Script kalian

Cara Membuat Kotak dan Scroll untuk Script Dalam Postingan Artikel di Blog Terbaru

Jika sudah, kembali ke Compose untuk melihat tampilannya seperti berikut

Cara Membuat Kotak dan Scroll untuk Script Dalam Postingan Artikel di Blog Terbaru

Cara Membuat Scroll didalam Kotak Script
Sama seperti dengan cara diatas, cuma hanya menambahkan beberapa script untuk mengfungsikannya.
1. Copylah kode script yang bewarna hijau berikut dan pastelah seperti berikut 

<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;  height: 100px; width: 520px; overflow: auto;">
Masukkan Kode Script Kalian.</div>

Jika sudah, kembali ke compose dan tambahkan beberapa tulisan agar scrollnya terlihat seperti gambar berikut

Cara Membuat Kotak dan Scroll untuk Script Dalam Postingan Artikel di Blog Terbaru

Untuk kalian yang ingin bentuk desain lain, berikut adalah berbagai macam bentuk dan warna Text Box/Kotak Script yang bisa kalian gunakan

Kotak script berwarna :
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #DAA520; padding: 10px; t-align: left;">
Masukkan Kode Script Kalian.</div>

<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;">
Masukkan Kode Script Kalian.</div>

<div style="background-color: deepskyblue; border: 2px #0000FF dotted; padding: 10px; text-align: left;">
Masukkan Kode Script Kalian.</div>

<div style="background-color: lime; border: 3px #964B00 double; padding: 10px; text-align: left;">
Masukkan Kode Script Kalian.</div>

<div style="background-color: salmon; border: 2px #610b38 dashed; padding: 10px;">
Masukkan Kode Script Kalian.</div>

Kotak script simpel :
<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 Kode Script Kalian.</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: silver; border-radius: 10px; border: 4px outset #fff; padding: 10px;">
Masukkan Kode Script Kalian.</div>

<div style="background-color: white; border: 3px #000000 double; padding: 10px; text-align: left;">
Masukkan Kode Script Kalian.</div>

<div style="background-color: #eaeaea; border: 1px solid #444; padding: 10px; text-align: left;">
Masukkan Kode Script Kalian.</div>

Jika kalian ingin menambahkan Scroll pada kotak script tersebut, ikutilah langkah2 cara menambahkannya diatas tadi.

Baiklah itu saja pembahasan kali ini mengenai Cara Membuat Kotak dan Scroll untuk Script Dalam Postingan Artikel di Blog, semoga bermanfaat untuk kita semua khususnya bagi pembaca. Tetap semangat, pantang menyerah dan teruslah belajar dan terus belajar. Semoga sukses. Selamat mencoba. Terimakasih ...



Baca juga : Jaringan Ad-Hoc, Penjelasan dan Cara Membuatnya
Baca juga :14  Trik Komputer Yang Harus Diketahui Semua Orang

Post a Comment

0 Comments