Cara Membuat Kotak Script Dalam Postingan Blog

Cara Membuat Kotak Script Dalam Postingan Blog

Ada yang pernah lihat blog tutorial yang di dalam blog tersebut terdapat check box atau Kotak Script? Kotak tersebut berguna banget untuk membedakan antara postingan dan script tutorial kalian. Beberapa postinganku juga sengaja aku tambahin kotak script seperti di tutorial di bawah ini : 

Cara Membuat Kotak Script Dalam Postingan Blog

Kotak script seperti ini, tidak disediakan langsung di menu default atau compose blogspot. Jadi untuk membuat kotak script ini, kalian harus menggunakan 'MENU POST  HTLM' dalam blog kalian. Lalu, gimana sih cara untuk membuat kotak script ini? mudah banget, kalian tinggal ikuti cara yang aku post berikut ini. 100%  working karena sudah aku coba. 

• Login ke blogger dan pilihlah 'Post atau Entri Baru'
• Lalu pastekan kode script di bawah ini di menu HTML. Contoh Seperti dalam Foto Berikut ini

<div style="background-color: white; border: 3px #1780dd double; padding: 10px; text-align: left;">
www.zhiangzieyie.com (Jemari Go Blog)  <=== Ganti tulisan yang berwarna merah dengan script atau tulisan yang kalian inginkan</div>

• Maka hasil yang kalian lihat akan seperti di bawah ini. 

www.zhiangzieyie.com (Jemari Go Blog)

Mudah sekali kan? Kalian juga bisa mengganti atau mengedit ulang background-color, ketebalan garis dan lebarnya. Contohnya lihat seperti di bawah ini. Untuk kode warna kalian bisa lihat di sini

Baca Juga : Kode Warna HTML 

<div style="background-color:  #98FB98 ; border: 1px #1780dd double; padding: 1px; text-align: left;">

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)  <=== Ganti tulisan yang berwarna merah dengan script atau tulisan yang kalian inginkan.

</div>

Catatan :

• background-color:  #98FB98 (Kalian bisa mengganti warna dengan 'kode warna html' 
• border: 1px (Kalian bisa mengganti ketebalan garisnya dengan mengubah angkanya saja)
• #1780dd : Warna Kotak Script. Untuk pilihan warna bisa lihat di 'kode warna html'
• double : Struktur Garis.  Kalian bisa mengganti kode garisnya dengan mengganti tulisan 'double' dengan tulisan yang akan aku kasih di kotak script di masing-masing boxnya.
• padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
• text-align:left; = posisi tulisan didalam kotak di kiri 
• Copas semua tulisan dalam kotak di atas, untuk mempermudah kalian mengganti di menu compose nantinya. 

<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.zhiangzieyie.com (Jemari Go Blog)

</div>

<div style="background-color: white; border: 3px #B22222 Solid; padding: 10px; text-align: left;">

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)

</div>

<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.zhiangzieyie.com (Jemari Go Blog)

</div>

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

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)

</div>

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

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)

</div>

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

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)

</div>

Itu tadi jika kalian ingin menggunakan Kotak Script dengan berbagai macam garis. Tapi, jika kalian tidak ingin menggunakan Garis dalam kotak tersebut, maka kalian cukup menghilangkan kode yang bertanda merah. Untuk lebih jelasnya silahkan copas kode di bawah ini.

<div style="background-color: Green; padding: 10px; text-align: left;">

Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)

</div>

Ada juga Kotak Script dengan menggunakan Scrooll Bar. Pasti kalian juga pernah melihatnya kan? Tenang, aku juga akan memberikan kode scriptnya di bawah ini, biar kalian nggak bingung-bingung nyari di blog lain.

Cara Membuat Kotak Script dengan Scroll di Blogspot

<div style="border: 3px #eeeeee solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 100px; width: 520px;
text-align: left;">

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

www.zhiangzieyie.com (Jemari Go Blog)
</div>

Yee... Jadi kan? Mau nyoba? udah dipraktekin aja. Kalau kalian suka sama tutorial ini, jangan lupa like fanspage Blog & Desain Tutorial untuk dapatin update terbaru di blog ini. Selamat mencoba.