1 Tutorial Cara Membuat Kotak Script Dalam Postingan Blogger Dengan Mudah

Membuat Text Box Dalam Postingan - Dalam dunia blogger, selain konten yang berkualitas, tampilan blog yang menarik juga sangat dibutuhkan untuk membuat rasa nyaman pengunjung saat membaca artikel tersebut. Begitupun dengan informasi penting dalam artikel juga sangat diperhatikan dalam penulisannya, entah dengan menambahkan blockquote, cetak tebal dan sebagainya.

Salah satunya adalah penambahan kotak script atau text box yang disematkan ditengah-tengah penulisan. Seperti kotak/box yang berisikan script html, quote menarik maupun hal penting lainnya dengan dibingkai didalam kotak.

Seperti blog yang bertemakan tentang tutorial blogging, biasanya akan banyak mengunakan kotak/box semacam ini. Tujuannya biar terlihat menarik dan lebih tertata rapi, juga agar informasi berupa quote atau script html bisa mudah di copy-paste oleh pengunjung.

Baca juga Tutorial Cara Membuat Efek Zoom Otomatis Pada Gambar DI Blog

Cara Membuat Text Box Dalam Postingan Blog

Untuk cara membuat dan menyematkan Text Box dalam sebuah artikel cukup mudah. Langkah awal yang harus dilakukan adalah login dasboard blogger, buat laman post baru.

Pindah mode Compose ke mode HTML, copy script dibawah ini dan paste-kan di laman HTML tersebut

<div style="background-color: white; border: 3px #fffff double; padding: 10px; text-align: center;">
membuat text box dengan mudah </div>

Maka akan tampak seperti gambar dibawah ini.

Jika dilihat dari mode compose akan terlihat seperti ini

*Keterangan :

• padding 10px maksudnya panjang kotak kebawah dan untuk lebarnya mengikuti lebar dari theme blog

• backgroung-color :white digunakan untuk mengubah warna background dalam kotak

• text-align:center digunakan untuk merubah posisi tulisan dalam kotak, Anda bisa mengantinya dengan left atau right

• border: 3px untuk merubah ketebalan kotak dan #fffff (Hitam) untuk merubah warna kotak sedangkan Double merupakan bentuk kotak anda bisa menghilangkan kode ini atau mengantinya dengan script Outset, Dashed, Ridge, Dotted, Solid, dan Groove

Contoh kotak mengunakan Script Double dengan warna kotak aquamarin (#7FFFD4)

Contoh kotak mengunakan Script Dashed dengan warna kotak Brown (#A52A2A)

Contoh kotak mengunakan Script Dotted dengan warna kotak Pink (#FF1493)

Contoh kotak mengunakan Script Groove dengan warna kotak Merah (#FF0000)

Anda juga bisa membuat Kotak script atau Text box dengan variasi scroll, syaratnya tulisan didalam kotak box lebih banyak hingga melebihi batasan besarnya kotak. Atau dengan membuat ukuran text box nya lebih kecil.

Baca juga Panduan Menautkan (Embed) Status Instagram Kedalam postingan Blogger

Untuk membuat variasi seperti itu, Anda bisa menambahkan script height dan width kotak box juga menambahkan script overflow. Seperti contoh dibawah ini:

INI ADALAH CONTOH KOTAK SCROLL. SILAHKAN ANDA GANTI TULISAN INI DENGAN TULISAN ANDA

Kode Script yang MazzTutor masukkan sebagai berikut :

<center><div style="background-color: white; border: 3px double; height: 80px; overflow: auto; padding: 10px; text-align: center; width: 200px;">INI ADALAH CONTOH KOTAK SCROLL. SILAHKAN ANDA GANTI TULISAN INI DENGAN TULISAN ANDA</div></center>

Ubah Height: 80px dan width: 200px sesuai dengan kebutuhan, juga jangan lupa tambahkan script overflow: auto agar kotak box scroll bisa muncul.


Sumber: http://mazztutor.blogspot.com

Komentar →