Cara Membuat Kotak Script dengan Pilihan Berbagai Warna

Share:
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, ataupun tips ngeblog.

Memang cukup banyak blogger yang mencari informasi tentang cara ngeblog itu sendiri. Selain karena ingin berkembang, blogger juga ingin membuat blognya lebih profesional.

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"
mode html

3. Setelah itu copy paste kode script dibawah ini kedalam artikel anda
<div style="background-color:#eaeaea; padding: 10px; text-align: left;">
gangkutu blog (ganti tulisan ini). #eaeaea</div>
Keterangan:
Merah: Warna
Biru: Isi tulisan

4. Ganti tulisan "gangkutu blog (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

gangkutu blog (ganti tulisan ini). #eaeaea
gangkutu blog (ganti tulisan ini). #ff5c5c
gangkutu blog (ganti tulisan ini). #fff952
gangkutu blog (ganti tulisan ini). #ffbd4a
gangkutu blog (ganti tulisan ini). #35b729
gangkutu blog (ganti tulisan ini). #44d9e6
gangkutu blog (ganti tulisan ini). #5271ff
gangkutu blog (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;">
gangkutu blog </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 "gangkutu blog" dengan tulisan yang anda kehendaki

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

Baca Juga: Cara Terbaru Memperbaiki Tombol Share yang Menutupi Judul di Template Brosense

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

No comments