Cara Membuat Kotak Warna Warni Di Blog

Salah satu niche blog yang paling populer dan sangat dicari di internet adalah tutorial blog. Niche ini biasanya memberikan informasi seputar dunia blogging, entah itu menyangkut adsense, widget, label, ataupun tips SEO

Memang cukup banyak blogger yang mencari informasi tentang cara ngeblog itu sendiri. Selain karena ingin berkembang, blogger juga ingin membuat blognya lebih profesional dan lebih enak dilihat oleh para pengunjung atau visitor yang datang ke blognya.

Blog atau website yang memiliki banyak artikel tentang tutorial biasanya memilki kotak script. Sebagaimana fungsinya, kotak script menjadi tempat untuk meletakkan kode-kode seperti script HTML, Java, dan sebagainya.

Walaupun terkadang kita bisa menggunakan fungsi icon quote pada menu posting, namun kotak script lebih dirasa perlu. Alasannya tidak lain dan tidak bukan adalah kebutuhan pembaca atau human friendly.

Dengan menggunakan kotak script, kode-kode HTML yang disematkan didalam artikel akan tampak menonjol. Sehingga, pembaca tau kode-kode yang ia butuhkan untuk dipasang pada blognya.

Jika blog anda membahas seputar tutorial dan anda belum menggunakan kotak script, ada baiknya untuk membuatnya secara manual. Karena blogspot sendiri belum menyediakannya secara default. Berikut tutorial membuat kotak script dalam postingan blog dengan berbagai warna.

Membuat Kotak Script dengan Berbagai Warna

1. Pertama masuk ke akun blogger anda

2. Buat artikel, lalu pilih ubah ke mode "HTML"

3. Setelah itu copy paste kode script dibawah ini kedalam artikel anda

<div style="background-color:#eaeaea; padding: 10px; text-align: left;">
AndromaxDewadewi (ganti tulisan ini). #eaeaea</div>

Keterangan:
Merah: Warna
Biru: Isi tulisan

4. Ganti tulisan "andromaxdewadewi (ganti tulisan ini)." dengan tulisan yang anda kehendaki

5. Ubah kembali mode menjadi "Compose" dan lihat hasilnya

6. Untuk memilih warna yang anda sukai silakan ganti kode berikut "#eaeaea", dengan kode warna yang saya rekomendasikan, silakan anda pilih sendiri dibawah

andromaxdewadewi (ganti tulisan ini). #eaeaea

andromaxdewadewi (ganti tulisan ini). #ff5c5c

andromaxdewadewi(ganti tulisan ini). #fff952

andromaxdewadewi (ganti tulisan ini). #ffbd4a

andromaxdewadewi(ganti tulisan ini). #35b729

andromaxdewadewi (ganti tulisan ini). #44d9e6

andromaxdewadewi (ganti tulisan ini). #5271ff

andromaxdewadewi (ganti tulisan ini). #666666

Cara Membuat Kotak Script dengan Scrool

Untuk membuat ukuran terlihat lebih rapih dan proporsional, anda juga bisa membuat kotak script dengan scrool pada artikel anda. Simak ulasannya berikut.

1. Copy paste kode script dibawah ini kedalam artikel anda, jangan lupa ubah mode Compose menjadi HTML

<div style="border: 4px #eaeaea solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 100px; width: 680px;
text-align: left;">
andromaxdewadewi</div>

Keterangan:
Merah: tinggi kotak script (ubah sesuai kebutuhan)
Biru: lebar kotak script (sesuaikan dengan template blog)
Hijau: Isi kotak script

2. Lalu ganti tulisan "andromaxdewadewi" dengan tulisan yang anda kehendaki

3. Untuk melihat demonya, silakan ubah kembali ke mode Compose

Itulah tutorial tentang membuat kotak script dalam postingan blog. Semoga artikel yang singkat ini dapat bermanfaat bagi teman-teman blogger. terimakasih telah berkunjung

Share this post