Cara Membuat Kotak Script Dalam Postingan Blogspot

Masih banyak sahabat blogger kita yang bingung dan bertanya bagaimana Cara Membuat Kotak Script Dalam Postingan Blogspot. Karena blogspot tidak menyediakan secara default fitur ini maka kita harus membuatnya sendiri dan memasukkan nya kedalam artikel postingan dengan cara manual.

Sebenarnya cara membuat kotak ini sudah banyak di posting oleh teman blogger kita lainnya, yang berbeda mungkin hanya cara penyampaiannya saja.

Apa Sih Fungsi Kotak ini ?

Fungsinya hanya sebagai kotak keterangan dengan desain di dalam sebuah artikel blog yang mungkin berisi tulisan penting dari artikel blog, kotak ini juga memberikan desain agar postingan artikel blog kita terlihat bagus dan enak dipandang. Kotak ini biasanya diisi dengan kode-kode html, link, atau keterangan penting yang disematkan oleh penulis kedalam postingan artikel blognya.

Contohnya gimana mas?

Contohnya lihat apa yang saya sematkan dibawah ini, ini lah bentuk desain kotak dan isi nya :

"INI CONTOH KOTAK KODE SCRIPT DALAM POSTINGAN ARTIKEL BLOG"

Nah bentuk kotak diatas ini bukan sebuah gambar, melainkan adalah kode style dan html yang di buat secara manual kedalam artikel.

Sebenarnya ada banyak sekali bentuk desain kotak ini selain dari bentuk kotak diatas, ada yang menggunakan border yang memiliki garis tepi dan ada juga dengan menggunakan text area, pada contoh kotak diatas saya membuatnya hanya dengan menggunakan backgroud warna atau warna latar belakang saja sedangkan tepi kanan dan bawah saya beri bayangan "box shadow". 

Bikinnya Sulit gak mas?

Untuk membuatnya tidak sulit dan teman-teman bisa untuk mempelajarinya satu demi satu, langkah demi langkah. Teman-teman cukup copy paste saja dulu dari artikel blog ini dan selanjutnya teman-teman bisa merubah desainnya sendiri nanti sesuai keinginan teman-teman. Artinya saya memberikan contoh cara membuatnya dan teman-teman tinggal aplikasikan saja di blog teman-teman.

Langsung aja mas gimana cara buatnya?

Oke..oke siap teman-teman hehehe..... sabar ya... saya akan memberikan contoh cara membuatnya dan bisa teman-teman copy paste untuk teman-teman pelajari.

Cara Membuat Kotak Script Dalam Postingan Blogspot

Pertama silahkan buka notepad dan copy paste kode ini di notepad teman-teman "agar teman-teman lebih mudah merubah isinya" sebelum teman-teman menyematkannya di artikel postingan blog teman-teman.

1. Kotak Pertama

Selanjutnya teman-teman copy paste kode dibawah ini :

<div style="border: 1px solid black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;"> ISI DENGAN KAMLIMAT YANG AKAN DISAMPAIKAN </div>

Nah hasilnya nanti seperti kotak dibawah ini, dimana sebuah kotak dengan garis tepi hitam tanpa warna latar belakang atau background.

ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN

2. Kotak Kedua

<div style="background-color: #D3D3D3; border: 1px solid black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;"> ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN </div>

Hasilnya seperti kotak dibawah ini, dimana sebuah kotak dengan garis tepi dan warna background :

ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN

3. Kotak ke tiga

<div style="background-color: #D3D3D3; border-radius:5px; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;"> ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN </div>

Hasilnya seperti dibawah ini kotak tanpa garis tepi namun tetap dengan background hanya ditambah lengkingan pada sisi ujung kotak saja.

ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN

Terus gimana mas kalau saya ingin kotaknya seperti kota biru yang mas contohkan pada awal artikel ini tadi?

Oke.. jika teman-teman ingin seperti kota saya sebagai contoh diatas tadi dengan warna latar belakang, lengkungan sisi kotak, bayangan pada kotak dan isi teks atau tulisannya miring, silahkan teman-teman copy paste kode dibwah ini :

<div style="background-color: powderblue; border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;"> <i>"ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN"</i></div> <br>

Nah ini dia bentuk kotak seperti yang saya contohkan diatas pada awal artikel ini tadi, kelihatannya kotak ini seperti mengambang pada halaman artikel teman-teman, coba perhatikan... hehehehe... yaaa kan?

"ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN"

Keterangan kode-kode diatas :
1. Background-color : silahkan teman-teman ganti sesuai keinginan teman-teman, misal red, pink, blue.
2. Untuk ,border, border-radius, font-size : silahkan teman-teman ganti angka-angkanya saja

Untuk desain kotak dengan warna lainya seperti ini :

"ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN"

"ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN"

"ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN"

"ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN"

"ISI DENGAN KALIMAT YANG AKAN DISAMPAIKAN"

Silahkan teman-teman pelajari satu persatu kode tersebut yaaa...  nanti kalau copy paste terus teman-teman bisa-bisa tidak akan mengerti cara merubah-rubah desainnya nanti.

Perlu teman-teman ketahui kotak script diatas ini sudah responsive, artinya ketika teman-teman membuka lewat perangkat mobile kotak tersebut akan menyesuaikan lebarnya.

Mas gimana nih cara menyematkan / memasukkan kotak ini di postingan artikel blog?

Oh..iya maaf saya hampir lupa,, hehehe...
Oke teman-teman.. begini caranya "simak baik-baik ya... siip.." :

Caranya teman-teman ketika ingin memposting suatu artikel (Entri Baru), di menu compose dan Html silahkan teman-teman buka yang Html dan masukan kode scriptnya kedalam postingan artikel, kemudian untuk melihatnya silahkan teman-teman klik kembali ke compose lagi atau dengan klik pertinjau.

Link Sumber : http://dawaipagihari.blogspot.co.id/