Cara Membuat Kotak Script Dalam Postingan Blog
Menyematkan kotak dalam tulisan blog terlihat menarik dan indah. Banyak blogger menggunakan kotak dalam postingan untuk menaruh informasi penting, salah satunya adalah script HTML, Java dan sebagainya.
Namun kotak yang disematkan dalam postingan ini tidak disediakan defuld oleh blogspot, olehnya itu kita dituntut membuatnya sendiri. Caranya mudah, ikuti langkah-langkah berikut ini.
Mungkin Anda tidak setuju dengan tampilan kotak contoh diatas. Anda bisa merubahnya sesuka hati. Berikut ini penjelasan scriptnya.
Namun kotak yang disematkan dalam postingan ini tidak disediakan defuld oleh blogspot, olehnya itu kita dituntut membuatnya sendiri. Caranya mudah, ikuti langkah-langkah berikut ini.
- Login ke blogger dan pilihlah 'Entri Baru'
- Buat tulisan, contoh seperti gambar. Lihat yang berwana merah, posisi tulisan adalah 'Compose'.
- Setelah itu copy paste script ini, dan kembali ke postingan Anda di blogger.
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Stres Mikir (ganti tulisan ini).</div>
text-align: left;">
.Stres Mikir (ganti tulisan ini).</div>
- Selanjutnya pilih 'HTML' ( jelasnya lihat gambar).
- Paste script yang tadi di copy di bawah postingan (terserah mau menaruhnya dimana).
- Kembali lagi aktifkan 'Compose' dan lihat hasilnya. sudah ada kotak.
- Selanjutnya Anda sisa mengganti tulisan '.Stres Mikir (ganti tulisan ini).' dengan tulisan yang ingin Anda taruh disana, bisa berupa script atau tulisan lain. Mudah kan...!
Mungkin Anda tidak setuju dengan tampilan kotak contoh diatas. Anda bisa merubahnya sesuka hati. Berikut ini penjelasan scriptnya.
.<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Sters Mikir (ganti tulisan ini).</div>
text-align: left;">
.Sters Mikir (ganti tulisan ini).</div>
- border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
- Double : bentuk kotak. (kode ini bisa diganti dengan kode berikut atau juga bisa dihilangkan).
.Stres Mikir (Dashed).
Code nya : <div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: left;">.Stres Mikir (Dashed).</div>
.Stres Mikir (Dotted).
Code nya :<div style="background-color: white; border: 3px #1780dd dotted; padding: 10px; text-align: left;">.Stres Mikir (Dotted).</div>
.Stres Mikir (Groove).
Code nya :<div style="background-color: white; border: 3px #1780dd Groove; padding: 10px; text-align: left;">.Stres Mikir (Groove).</div>
.Stres Mikir (Inset).
Code nya :<div style="background-color: white; border: 3px #1780dd inset; padding: 10px; text-align: left;">.Stres Mikir (Inset).</div>
.Stres Mikir (Outset).
Code nya :<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;">.Stres Mikir (Outset).</div>
.Stres Mikir (Ridge).
Code nya :<div style="background-color: white; border: 3px #1780dd ridge; padding: 10px; text-align: left;">.Stres Mikir (Ridge).</div>
.Stres Mikir (Solid).
Code nya :<div style="background-color: white; border: 3px #1780dd solid; padding: 10px; text-align: left;">.Stres Mikir (Solid).</div>
- padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
- background-color:ffffff; = warna dalam kotak.
- Dan text-align:left; = posisi tulisan didalam kotak di kiri
Nah itulah penjelasan kode HTML untuk membentuk kotak script dalam postingan. Silahkan memodifikasi sesuai dengan selera Anda. Tidak susah bukan. Dipostingan selanjutnya kita akan buat kotak dengan scroll dalam postingan, so... stay cool.
Untuk blog ini, script diatas saya modifikasi seperti kotak berikut.
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
.stresmikir (script kotak di blog ini)
</div>
Oke,,. mantap
Penginapan Netral
If you spend time trying to be good at everything, you will never be great at anything
