Cara Membuat Kotak Teks di Postingan Blog yang Menarik dan Benar
 |
| Cara Membuat Kotak Teks di Postingan Blog |
Cara Membuat Kotak Teks di Postingan Blog yang Menarik dan Benar. Saat ini sudah mulai banyak para blogger yang menggunakan Kotak Teks ( text Box ) untuk merubah penampilan postingan mereka. Terkadang ada sebagian orang yang bosen karena tampilan blog mereka begitu-begitu saja.
Dengan menambah Kotak Teks di postinganya membuat postinganya akan terlihat berbeda, bahkan tampilan postinganya bisa menjadi lebih berwarna dan terlihat hidup.
Fungsi kotak teks sebenarnya ada banyak, tergantug mau digunakan untuk apa. Pada umumnya kotak teks digunakan karena adanya informasi yang penting, seperti penulisan scrip HTML, java dan lain-lain.
Untuk Kotak Teks sebenarnya modelnya sangat banyak sekali, tergantung dengan kreatifitas masing-masing. semakin kreatif maka semakin bagus juga hasilnya.
Bagi sobat Blogger yang mau membuat kotak teks disini mastagul.com akan membagikan Cara Membuat Kotak Teks di Postingan Blog yang Menarik.
Baca juga: Cara Mempebaiki Breadcrumb yang Eror atau Bermasalah di Google Search Console
Bagi sobat yang mau membuat kotak teks alangkah baiknya sobat mengetahui hal-hal dasar sebagai berikut:
- Border adalah garis yang mempunyai bentuk kotak, yang garisnya bisa dirubah ketebalanya sesuai dengan keinginan pengunanya, biasanya untuk merubah ketebalannya dengan mengganti angka di depan px.
- Background Color adalah suatu kode yang berfungsi untuk merubah warna yang berada di dalam kotak.
- Text Align adalah mempunyai fungsi untuk merubah posisi teks, kondisinya mau rata sebelah kiri, rata sebelah kanan atau posisinya maua di tengah-tengah. biasanya menggunakan left, right dan Center.
- Padding adalah mempunyai fungsi untuk merubah ukuran panjang atau lebar pada kotak script. untuk merubah ukuranya cukup denga mengganti anggka di depan px.
- Kode Double adalah tampilan kotak script, untuk pin ini bisa di ganti dengan kode dotted, solid, groove, inset, ridge.
Ituah beberapa hal dasar yang perlu sobat ketahui sebelum membuat kotak teks.
Cara membuat kotak di postingan blog
Langkah 1: Masuk pada Menu Postingan Baru
Masuk ke blog sobat masing-masing kemudian Klik Entri Baru
 |
| Cara Membuat Kotak Teks di Postingan Blog yang Menarik |
Langkah 2: Tulis Artikel
Buatlah tulisan atau artikel terlebih dahulu di Halaman Compose ( seperti pada gambar dibawah perhatikan kotak warna merah )
 |
| Cara Membuat Kotak Teks di Postingan Blog yang Menarik |
Langkah 3: Masuk Halaman HTML
Kemudian setelah membuat tulisan atau artikel menuju Halaman HTML ( lihat gambar dibawah perhatikan kotak merah 1), kemudian tempelkan Code script kotak dibawah kedalam Halaman HTML ( lihat gambar dibawah kotak merah 2 ).
<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;">Kode Script Anda Disini</div>
 |
| Cara Membuat Kotak Teks di Postingan Blog yang Menarik |
Langkah 4: Kembali ke Halaman Compose
Setelah Code script terpasang di halaman HTML, kemudian sobat kembali ke Halaman Compose ( lihat gambar dibawah perhatikan kotak merah 1 ). Maka Hasilnya akan Terlihat seperti dibawah ini ( di gambar bawah akan terlihat di kotak merah 2 ).
Baca juga: Cara Membuat SITEMAP Blog Per Label Terbaru Dengan Mudah dan Terlihat Rapi
 |
| Cara Membuat Kotak Teks di Postingan Blog yang Menarik |
Langkah 5: Selesai
Tinggal di publikasikan, selesai.
Itulah beberapa langkah untuk membuat Kotak Teks di dalam postingan Blog, setelah sobat mengetahui cara pemasanganya sekarang mastagul.com akan memberikan beberapa script kotak yang bisa sobat gunakan.
Model Script Kotak Teks
1. Kotak Minimalis
Code Script
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Kode Script Anda Di Sini</div>
Hasilnya
Keteranga:
- tulisan 1px jika di ganti dengan angka yang lebih besar maka garis pinggir kotak akan semakin tebal, semakin besar angkanya, akan semakin tenal garis kotaknya.
- Tulisan #eaeaea; menunjukan warna begraound yang sedang digunakan, jika ingin mengganti warna backgroundnya maka tinggal mengganti Code warnanya.
- Pada tulisan left menunjukkan bawa tulisan yang berada di dalam kotak memiiki pisisi rata sebelah kiri.
- Tulisan padding: 10px semakin tinggi angkanya maka kotaknya akan semakin panjang kebawah.
Untuk Code Scrip lainya juga intinya hampir sama, nanti silahkan sobat-sobat bereksperimen sesuai dengan kreatifitas masing masing.
Baca juga: Cara Membuat Menu Navigasi Profil di Header Blog yang Keren dan Profesianal
2. Kotak Left Border
Code Script
<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;">Kode Script Anda Disini</div>
Hasilnya
3. Kotak Dotted
Code Script
<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Kode Script Anda Disini</div>
Hasilnya
4. Kotak Double
Code Script
<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;">Kode Script Anda Disini</div>
Hasilnya
5. Kotak Dashed
Code Script
<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;">Kode Script Anda Disini</div>
Hasilnya
6. Kotak Scroll
Code Script
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
Kode Script Anda Disini…… </div>
Hasilnya
Hasilnya seperti ini, sobat tinggal isi teks disini
Hasilnya seperti ini, sobat tinggal isi teks disini
Hasilnya seperti ini, sobat tinggal isi teks disini
Hasilnya seperti ini, sobat tinggal isi teks disini
Bagaimana, tidak seribet yang sobat bayangkan bukan, sobat hanya perlu mgambil Code script kemudian tempel pada postingan, jadi deh.
Itulah beberapa Code script yang bisa mastagul.com berikan, silahkan berkomentar jika ada hal yang belum sobat pahami. kita nanti diskusikan bersama dan belajar bersama.
Cek Berita dan Artikel yang lain di Google News.
Recommended By The Author
Cara Membuat Backlink Di Blogger
Cara Membuat Daftar Isi Otomatis di Postingan Blogger
Cara Membuat Daftar Isi dalam Satu Label Tertentu di Postingan Blog dengan Benar
Cara Membuat Halaman Daftar Isi yang Benar, SEO dan Mudah di Pahami di Blog
Cara Membuat Halaman Grid dan List di Blog dengan Mudah dan Profesional
