Cara Membuat Kotak Scroll Keren Pelengkap Postingan Blog

Cara Membuat Kotak Scroll

Cara Membuat Kotak Scroll - Sebuah postingan blog tanpa kotak Scroll ibarat sayur tanpa garam, bagaimana tidak mengingat pentingnya kotak scroll di blog, selain untuk keindahan postingan juga memiliki fungsi utama yaitu untuk menaruh kata-kata penting seperti kata mutiara, quote, script 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 blogger cocoknya pasang yang mana, ini contohnya bisa sobat blogger 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.

Berlangganan update artikel terbaru via email:

2 Responses to "Cara Membuat Kotak Scroll Keren Pelengkap Postingan Blog"

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini!, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi, bila berkomentar tidak sesuai dengan kebijakan Blogger maka tidak di terbitkan!.
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel