Membuat Kotak Script Dalam Postingan Blog

Daftar Isi

Membuat Kotak Script Dalam Postingan Blog

Pernahkah Anda melihat tutorial blog yang berisi kotak centang atau Kotak Script di dalamnya? Kotak ini sangat berguna untuk membedakan antara postingan dan script tutorial Anda.

Kotak script seperti ini tidak tersedia secara langsung di menu default pada blogspot. Jadi, untuk membuat skrip kotak ini, Anda harus menggunakan 'MENU POST HTML' di blog Anda. Bagaimana cara membuat skrip kotak ini? Sangatlah mudah, Anda hanya perlu mengikuti langkah-langkah pada postingan berikut ini. Saya sudah mencobanya dan hasilnya 100% berhasil.

Cara Membuat Kotak Script Dalam Postingan Blog

1. Login ke Blogger

2. Pilih postingan yang ingin di tambahkan kotak script

3. Ubah tampilan ke Mode HTML, Kemudian tempelkan Script berikut di postingan tersebut

Disini codepelajar memberikan empat kotak yang sering digunakan untuk wadah script, silahkan salin sesuai kebutuhan kamu.

Satu garis tepi

<div style="background-color: white; border: 3px Blue Ridge; padding: 5px; text-align: left;">

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.codepelajar.com

</div>

Hasilnya

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini. www.codepelajar.com

Garis putus-putus tebal

<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;">
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.codepelajar.com

</div>

Hasilnya

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini. www.codepelajar.com

Garis putus-putus bulat

<div style = "background-color: white; border: 3px Red Dotted ; padding: 5px; text-align: left;">

Jika kalian menggunakan kode di atas, maka hasil jadinya akan ditampilkan pada tampilan ini.
www.codepelajar.com

</div>

Hasilnya

Jika kalian menggunakan kode di atas, maka hasil jadinya akan ditampilkan pada tampilan ini. www.codepelajar.com

Kotak Script dengan Scroll

<div style = "border: 3px #eeeeee solid; padding: 10px; background-color: #ffffff;
overflow: otomatis; tinggi: 100px; lebar: 520px; perataan
teks: kiri;">


Jika kamu menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.codepelajar.com
</div>

Hasilnya

Jika kamu menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini. www.codepelajar.com

Ingat! Cara ini bisa untuk wordpress tanpa CSS dan JavaScript karena hanya perlu menggunakan HTML saja, ganti warna background terlebih dahulu dan cocokkan dengan tema kamu.

Penutup

Oke mungkin itu saja yang dapat codepelajar sampaikan semoga dengan ini blog kamu akan terlihat lebih menarik dan banyak dikunjungi orang.