Blogcahti: Cara Membuat Kotak Script Keren didalam Postingan Blogger

Cara Membuat Kotak Script Keren didalam Postingan - Halo sobat blogcahti, kali ini saya akan membagikan tutorial membuat kotak script. Apa itu kotak script? Kotak script atau script box adalah sebuah kotak yang didalamnya berisi script atau kode program. Menggunakan scriptbox akan membuat tulisan script pada postingan sobat menjadi lebih rapi. Bayangkan jika script yang kamu tulis berantakan, pasti tidak menarik dimata pengunjung.

Cara Membuat Scriptbox

Sebagai contoh kamu bisa lihat kotak script yang ada di beberapa postingan blogcahti. Pasti menarik kan? Kamu bisa mencobanya dengan mengikuti langkah-langkah berikut.

Cara pertama

Cara pertama sering digunakan oleh blogger. Membuat kode html dan css secara langsung di mode html pada postingan memang cukup mudah.

1. Login ke blogger > Entri Baru
2. Pada mode penulisan, pilih HTML

3. Masukkan kode berikut

<pre style="background: #f1f1f1; border-left: solid 5px #0288d1; padding: 12px;margin:10px 0px; width:auto; height:auto; max-height:130px; overflow:auto;">Masukkan script disini</pre>

5. Setelah itu ubah mode penulisan ke Compose, maka akan muncul kotak script seperti gambar dibawah. Lalu ganti tulisan Masukkan script disini dengan script sobat atau sobat bisa menuliskannya di mode HTML namun jika script sobat berupa html, sobat harus mem-parse terlebih dahulu script tersebut disini.

Cara kedua

Cara pertama memang mudah, tapi itu membuat kamu harus menulis kode html dan css nya disetiap kamu memposting artikel. Tentu cara ini kurang efektif karena kamu harus menghafal kodenya dan menulisnya panjang lebar. Misal kamu menulis di beberapa script box, pasti capek kan harus mengulang? Repot banget tinggal copas aja min? Iya copas gak apa, kalau suatu saat ingin nulis lagi gimana? Nah, cara kedua ini akan memudahkan kamu dalam membuat script box pada postingan karena cukup menuliskan class nya saja, nanti akan otomatis dieksekusi oleh kode CSS.

1. Login ke blogger > Tema > Edit HTML
2. Masukkan kode berikut sebelum </:bskin>

.scriptbox{background: #f1f1f1; border-left: solid 5px #0288d1; padding: 12px;margin:10px 0px; width:auto; height:auto; max-height:130px; overflow:auto;}

Catatan : kamu bisa mengubah warna background pada kode yang diberi tanda berwarna merah

3. Save Template
4. Masuk ke "Entri Baru", pilih mode penulisan HTML. Masukkan kode berikut <pre class="scriptbox">Masukkan script disini</pre>
5. Setelah itu tinggal ganti tulisan Masukkan script disini dengan script sobat

Cara ini menerapkan langsung kode css kedalam class yang bersangkutan di template blogger. Selanjutnya class dipanggil jika ingin digunakan. Kamu hanya perlu mengingat nama class nya saja sehingga kamu tidak perlu repot menulis panjang lebar kodenya.

Saya rasa cukup sekian artikel tentang Cara Membuat Kotak Script Keren didalam Postingan Blogger semoga bermanfaat buat sobat semua.