Widget HTML #1

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

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
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
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>
 
Code script kotak

Cara Membuat Kotak Teks di Postingan Blog yang Menarik
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

Hasilnya akan terlihat seperti ini.

Cara Membuat Kotak Teks di Postingan Blog yang Menarik
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

Hasilnya seperti ini, sobat tinggal isi teks disini

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

Hasilnya seperti ini, sobat tinggal isi teks disini

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

Hasilnya seperti ini, sobat tinggal isi teks disini

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

Hasilnya seperti ini, sobat tinggal isi teks disini

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

Hasilnya seperti ini, sobat tinggal isi teks disini

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
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