Cara membuat kotak script postingan blog - 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.
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 :
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.
Selanjutnya teman-teman copy paste kode dibawah ini :
Nah hasilnya nanti seperti kotak dibawah ini, dimana sebuah kotak dengan
garis tepi hitam tanpa warna latar belakang atau background.
2. Kotak Kedua
Hasilnya seperti kotak dibawah ini, dimana sebuah kotak dengan garis tepi dan warna background :
3. Kotak ke tiga
Hasilnya seperti dibawah ini kotak tanpa garis tepi namun tetap dengan
background hanya ditambah lengkingan pada sisi ujung kotak saja.
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 :
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?
Keterangan kode-kode diatas :
- Background-color : silahkan teman-teman ganti sesuai keinginan teman-teman, misal red, pink, blue.
- Untuk ,border, border-radius, font-size : silahkan teman-teman ganti angka-angkanya saja
Untuk desain kotak dengan warna lainya seperti ini :
Atau dengan cara mudah membuat kotak script pada postingan blog seperti dibawah ini:
1. Style Minimalis
2. Style Left Border
3. Style Dotted
4. Style Double
5. Style Dashed
6. Style Scroll
7. Style Solid
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.
1. Style Minimalis
<div
style="border: 1px solid #444; padding: 10px; background-color:
#eaeaea; text-align: left;">Pasang Kode Script Anda Di Sini</div>
2. 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;">Pasang Kode Script Anda
Disini</div>
3. Style Dotted
<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">Pasang Kode Script Anda Disini</div>
4. 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;">Pasang Kode Script Anda Disini</div>
5. 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;">Pasang Kode Script Anda Disini</div>
#aaa; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
6. Style Scroll
<div
style="background-color: #82cafa; border: 2px #006400 solid; height:
50px; overflow: auto; padding: 10px; text-align: left; width:
300px;">Pasang
Kode Script Anda Disini</div>
Kode Script Anda Disini</div>
7. Style Solid
<div
style="-moz-border-radius: 10px; -webkit-border-radius: 10px;
background-color: #ff8d8d; border-radius: 10px; border: 2px solid
#aaa; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
#aaa; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
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.
sumber : dawaipagihari.blogspot.com
