Contoh Membuat Script Kotak Html Keren Pada Artikel Blog

Contoh Membuat Script Kotak Html Keren Pada Artikel Blog
Image source : Google

Menyematkan script kotak html dalam tulisan blog akan lebih terlihat menarik bagi pembaca, khususnya mereka yang malas membaca. Karena dengan kita membuat script kotak html yang menarik perhatian mata mereka maka mereka akan semkain tertarik untuk membaca artikel kita. Selain itu dengan membuat script kotak html kita dapat memetakan informasi-informasi yang penting atau intisari dari sebuah artikel kita.

Banyak blogger menggunakan script kotak html dalam postingan untuk menaruh informasi penting, salah satunya adalah script kotak html, java dan sebagainya. Namun kotak yang disematkan dalam postingan ini tidak disediakan defult oleh blogspot, olehnya itu kita dituntut membuatnya sendiri. Caranya mudah membuat script kotak html, ikuti langkah-langkah berikut ini.

Baca juga : 3 cara menyisipkan tabel excel pada artikel blog

1. Login ke blogger dan pilihlah ‘Entri Baru’

2. Buat tulisan ‘di sesuaikan dengan kebutuhan anda’ pada menu compose

3. Setelah itu copy paste script ini, dan kembali ke postingan Anda di blogger

<div style=”border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;”>
.pasarpanduan (Ganti pasarpanduan sesuai kebutuhan anda).</div>

4. Selanjutnya pilih menu html

5. Paste script yang tadi di copy di bawah postingan (bebas)

6. Kembali lagi aktifkan compose dan lihat hasilnya

7. Selanjutnya Anda sisa mengganti tulisan ‘.pasarpanduan (opsional atau terserah anda)’

dengan tulisan yang ingin Anda taruh disana, bisa berupa script atau tulisan lain

Namun mungkin Anda tidak setuju dengan tampilan kotak contoh diatas. Anda bisa merubahnya sesuka hati. Berikut ini penjelasan scriptnya.

<div style=”border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;”>
.pasarpanduan (Ganti pasarpanduan sesuai kebutuhan anda).</div>

1. border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.

2. Double : bentuk kotak. (kode ini bisa diganti dengan kode berikut atau juga bisa dihilangkan).

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
Nah itulah penjelasan kode HTML untuk membentuk kotak script dalam postingan. Silahkan memodifikasi sesuai dengan selera Anda

Akhir Kata
Terima kasih telah berkunjung jangan lupa untuk share karna berbagi itu indah agar bisa saling membantu bagi teman yang membutuhkan artikel ini, follow juga blog melalui email untuk terus mendapatkan update terbaru dari laman saya

Share on:

Tinggalkan komentar