Cara Mudah Membuat Kotak (letter box) Untuk Meletakan Kode Script di Artikel Blog SEO dan CTR Tinggi untuk Blogspot

Banyak blogger yang masih binggung saat menggunakan fungsi letter box script. bagaimana cara membuatnya dan menampilkannya saat kita akan membagikan script yang akan kit atampilkan. Pada artikel kali ini saya akan mencoba mengulas dengan singkat langkah langkah dalam pengaplikasiannya di blogger kita semua., cekidot wae..

Langsung saja cara membuatnya :

1. Login ke blogger. Dan pilih entri baru.
2. Selanjutnya buatlah tulisan seperti dibawah ini.

3. Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script. 
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>
4. Untuk lebih jelasnya, lihat gambar dibawah ini.

5. Sekarang Klik Compose, maka akan ada kotak script. Contoh gambar:

6. Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan Klik Disini.
7. Terakhir, Masukan kode script yang ingin kamu masukan, didalam kotak itu. Selesai.

Keterangan Kode:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>

1. border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
2. Double; = Bentuk kotak, bisa diganti dengan, 
dashed
dotted
Double
Groove
inset
outset
ridge
3. Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
4. background-color:ffffff; = warna dalam kotak. 
5. Dan text-align:left; = posisi tulisan didalam kotak di kiri.

Kotak Script Dengan Scroll.

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
.kode script disini.</div>

1. Sama seperti cara diatas, masukan kode script ke HTML.
2. overflow:auto; = fungsi scrollnya. height(tinggi kotak) dan width(lebar kotak)
3. Kotak script bisa juga dipindahkan ke kanan, dengan menambahkan kode float: right; ditengah kode diatas.
4. Untuk yang posisi tengah, saya belum tau, nanti jika sudah tau, akan saya tambahkan kembali diposting ini. 

Fungsi menjadi scroll
dotted
Double
Groove
inset
outset
ridge

Fungsi dari letter box script ini dimaksudkan agar halaman blog akan terlihat lebih rapi. Dan tidak memakan banyak tempat. Tanpa harus mengurangi isi dari posting. Semoga Bermanfaat bagi sobat yang membutuhkannya. Salam..

Bagi teman-teman yang Kopi-paste scriptnya dari blog lainnya, sebaiknya di encoding dulu via tekst. Untuk jelasnya silahkan masukkan script sobat yang ingin di encode pada kolom dibawah ini, dan sesuaikan dengan keingginan sobat :

Keterangan:
Encodeing = Mengkonvert/ memparse ke format biasa
Decoding = Mengembalikan ke format html nya

Insert Your Text Below Do HTML Encoding Do HTML Decoding

Akhir kata saya ucapkan seamat berkreasi mempercantik dan memperganteng blog teman teman semua, salam Ngerapik Blog!

👉 Baca Artikel Lengkap lainnya tentang: 100 Masalah Error Blogger Lengkap Beserta Penyebab dan Cara Mengatasinya (Update 2026).

Artikel ini merupakan referensi dari blog pengguna-komputer