Cara Membuat Kotak Script Keren Di Postingan Blog

Sebagai seorang blogger tentunya ingin tampilan postingan blognya menarik bukan? dalam pembuatan postingan blog terkadang kita ingin menyisipkan sesuatu di dalam postingan blog seperti contoh memasang script HTML, memasang text link dan lain sebagainya.

Namun sayangnya, itu semua tidak tersedia secara otomatis dari blogspot karena kekurangan dari blogspot itu gratis selebihnya kita yang mempercantiknya dengan cara membuatnya sendiri semenarik mungkin.

Bagi kalian yang masih bingung dengan caranya terutama bagi para blogger pemula, di pembahasan kali ini saya akan membagikan tutorial bagaimana cara membuat kotak script HTML di dalam artikel blog agar tampilan postingan blog sobat-sobat lebih menarik.

Sebelum masuk ke dalam langkah-langkahnya, ketahui terlebih dahulu beberapa macam kriteria atau tampilan kotaknya sesuai selera masing-masing yang kalian sukai. Berikut beberapa macam kotak script HTML :

1. Style Left Border

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #febf80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">
Letakkan Kode Script Anda Disini</div>

2. Style Minimalis

<div style="background-color: #eaeaea; border: 1px solid #444; padding: 10px; text-align: left;">
Letakkan Kode Script Anda Di Sini</div>

3. Style Double

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
Letakkan Kode Script Anda Disini</div>

4. Style Dotted

<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Letakkan Kode Script Anda Disini</div>

5. Style Scroll

<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
Letakkan Kode Script Anda Disini</div>

6. Style Dashed

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">
Letakkan Kode Script Anda Disini</div>

7. Style Webkit Border

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #2be92f; border-radius: 10px; border: 8px outset #D4771A; padding: 10px; t-align: left;">
Letakkan Kode Anda Disini</div>

8. Style Left-Right Border

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #0000cc; border-radius: 10px; border-right: 5px solid #0000cc; padding: 10px;">
Letakkan Kode Anda Di Sini</div>

9. Style Border

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #8f7992; border-radius: 10px; border: 4px solid #CC0027; padding: 10px; t-align: left;">
Letakkan Kode Anda Disini</div>

10. Style simple

<div style="background-color: #eaeaea; border-radius: 10px; border: 4px double #fff; padding: 10px; text-align: left;">
Letakkan kode Anda Disini</div>

Nah itulah beberapa variasi kotak script HTML. Selanjutnya untuk memasang kotak yang ada di dalam postingan lebih baik itu di gunakan untuk menempatkan kode script ataupun informasi-informasi yang lain.

Beberapa variasi bentuk kotak dan tampilan di atas silahkan kalian sesuaikan dengan selera masing masing. Untuk pemasangan kotak script HTML berikut langkah langkahnya :

Langkah Pertama : Silahkan buka terlebih dahulu pada postingan yang ingin Anda pasangi kotak di dalam postingan tersebut, selanjutnya klik HTML seperti gambar di bawah ini :

Langkah Kedua : Masukkan salah satu script kotak dan tampilan yang sudah di cantumkan di atas, lalu letakkan kode script yang sudah Anda Copy. Ketika memasukkan script harus berada dalam posisi edit HTML. Contoh gambar di bawah ini :

Langkah Ketiga : Setelah di masukkan kode script tersebut, kemudian masukkan kode script atau informasi yang ingin Anda cantumkan di dalamnya.

Selesai sudah pembuatan kotak script HTML di dalam postingan blog. Bagaimana? Cukup mudah bukan dan nggak ribet? tentunya dong! Semoga pembahasan ini bisa menjadi wadah informasi yang berguna dan bermanfaat bagi sobat-sobat.

Share this post