Cara Membuat Kotak Scroll Keren Pelengkap Postingan Blog

ARDINTORO |dot| COM - Sebuah postingan blog tanpa kotak Scroll ibarat sayur tanpa garam. Bagaimana nggak mengingat pentingnya kotak scroll di blog, selain untuk keindahan postingan juga memiliki fungsi utama yaitu untuk menaruh kode atau kata penting seperti, kata mutiara, quote, script, HTML dll. 

Mungkin ada yang belum tau apa itu kotak scroll. Menurut pemahaman saya kotak scroll adalah sebuah tolls berisi kode-kode script yang berfungsi untuk memperpendek sebuah halaman blog atau fungsi lain untuk membingkai sebuah kalimat di postingan blog agar lebih rapi, indah serta enak di lihat. 

Ada beberapa jenis kotak Scroll yang bisa Kalian gunakan pada umumnya ada 4 jenis yaitu scroll minimalis responsive, scroll horisontal, scroll vertikal dan scroll gabungan horisontal dan vertical. Tergantung kebutuhan Sobat cocoknya pasang yang mana, ini contohnya bisa Sobat pasang di blog masing-masing:

1. Scroll Minimalis Responsive 

Contoh Script 1:

<br />
<div style="background-color: mistyrose; border: 2px #610b38 dashed; padding: 10px;">
TULISAN DISINI</div>

Bila di Pasang Menjadi:

TULISAN DISINI

 

Contoh Script 2:

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
TULISAN DISINI</div>

Bila di Pasang Menjadi:

TULISAN DISINI

  
Contoh Script 3:

<br />
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightsteelblue; border-radius: 10px; border: 4px dashed coral; padding: 6px; t-align: left;">
TULIS DISINI</div>

Bila di Pasang Menjadi:

TULIS DISINI

2. Scroll vertical

Contoh Script-nya:

<div style="background-color: #f9f8de; border: 1px #dedede double; height: 60px; overflow: auto; padding: 10px; text-align: left; width: auto;">
TULISAN DISINI
</div>

Bila di Pasang Menjadi:

TULISAN  DISINI

3. Scroll Horisontal

Contoh Script-nya:

<div style="background-color: #f9f8de; border:1px #dedede double;width:auto ;height:60px;overflow-y:hidden;overflow-x:scroll;"> <p style="width:2500%;">
  TULISAN DISINI </p> </div>

Bila di Pasang Menjadi:

TULISAN DISINI

4. Scroll gabungan Horisontal dan Vertical

Contoh Script-nya:

<div style="background-color: #f9f8de; border:1px #dedede double;width:auto;height:60px;overflow-y:scroll;overflow-x:scroll;"> <p style="width:2500%;">
  TULISAN DISINI
</p> </div>

Bila di Pasang Menjadi:

TULISAN DISINI
.
.
.
.
.

Cara pasang kotak Scroll di Postingan Blog :

• Kalian login ke akun blogger Sobat.
• Klik entri baru.
• Ganti tipe postingan dari compose ke HTML.
• Lalu masukkan code script Kemudian ganti kata-kata "TULISAN DISINI", dalam kotak scroll sesuai keinginan.
• Terahir klik Publikasikan dan lihat hasilnya.

Itulah cara membuat kotak scroll di postingan blog. Semoga bermanfaat ya, bila ada yang masih binggung cara pasang mau bertanya silahkan tulis di kolom komentar.

Baca Juga: Cara Membuat Kotak Kode HTML atau CSS pada Postingan Blog

Share :