Cara Membuat Kotak Teks Table Keren Menggunakan Kode HTML JavaScript di Postingan Blogger

IrfanBae.com - Hallo Sobat Blogger apa kabar hari ini ? Semoga kita semua diberi kesehatan jasmani dan rohaninya ya... :)

Diera sekarang ini banyak sekali para blogger yang menggunakan Kotak Teks / Text Bok untuk mempercantik tampilan artikel blog mereka.

Sebetulnya Text Bok / Kotak Teks ini penting gak penting sih, tapi akan sangat penting jika sobat membutuhkannya seperti untuk menulis artikel yang berisi materi tentang pembelajaran Matematika atau lain sebagainya.

Dimana hal itu membtuhkan Kolom Teks berwarna maupun polos dengan table yang responsive guna memisahkan kata/angka. Selain itu Table Text Bok juga dapat difungsikan agar tampilan artikel kita tersusun rapih terlihat lebih elegan, kreatif dan menarik.

Dalam kesempatan kali ini saya akan berbagi sedikit tips Cara Membuat Kotak Teks Keren Menggunakan Kode HTML JavaScript di Postingan Blogger khususnya untuk blogger pemula seperti saya yang mungkin sebagian belum tau dan belum faham bagaimana cara membuat-nya.

"Penasaran dengan cara nya ? Ok langsung saja kita masuk ketahap pembuatannya seperti apa dan bagaimana ? simak sampai selesai yah sobat. Disini saya akan berikan Kode Script lengkap dengan tutorial-nya..."

Cara Membuat Kotak Teks Keren di Postingan Blog.

1.Langkah Pertama - Cara yang pertama dan paling utama adalah sobat harus masuk ke Dasboard Akun Blog sobat terlebih dulu, kemudian pada bagian kiri atas Klik Postingan Baru.

2.Langkah Kedua - Silahkan sobat buat judul postingan dan tulis artikelnya sesuai keinginan masing-masing.

3.Langkah Ketiga - Tempel kan code script (Kotak Teks) dilembar postingan yang sudah sobat salin, sebelum menaruh Code Script Kotak Teks, jangan lupa sobat harus ubah dulu tulisan menjadi Tampilan HTML seperti pada gambar dibawah ini :

4.Langkah Terakhir - Selanjutnya mari sobat ubah Tampilan HTML yang tadi kembalikan lagi ke Tampilan menulis untuk melihat hasilnya.

Setelah sobat mengikuti langkah nya dengan benar maka akan tampil Kolom Teks seperti gambar diatas, silahkan sobat copy saja berbagai Code Script yang sudah saya sediakan dibawah ini :

1.Kode Html Kotak Teks Double.

Code Script Html :

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double rgb(255, 255, 255); padding: 10px; t-align: left;">Silahkan Buat Tulisan Sobat Disini...</div>

Hasil Yang Pertama Seperti ini :

Silahkan Buat Tulisan Sobat Disini...

2.Model Kotak Teks Left Border.

Code Script Html :

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #febf80; border-left: 5px solid rgb(255, 51, 0); border-radius: 10px; padding: 10px; t-align: left;">Silahkan Buat Tulisan Sobat Disini...</div>

Hasil yang kedua seperti ini :

Silahkan Buat Tulisan Sobat Disini...

3.Model Kotak Teks Dashe.

Code Script Html :

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed rgb(170, 170, 170); padding: 10px; t-align: left;">Silahkan Buat Tulisan Sobat Disini...</div>

Hasil Yang Ketiga Seperti ini :

Silahkan Buat Tulisan Sobat Disini...

4.Model Kotak Teks Gradient.

Code Script Html :

<div style="background-image: linear-gradient(to right, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;">Silahkan Buat Tulisan Sobat Disini...</div>

Hasil Yang Keempat Seperti ini :

Code Script anda di sini...

5.Model Lainnya.

Kode Script Html :

<div style="background-color: #f6f6f6; border-radius: 10px; border: 5px outset rgb(250, 250, 252); padding: 17px; text-align: left;">Kode Script di sini...</div>

Hsilnya sepert ini :

Script anda di sini...

Kode Script Html :

<div style="background-color: #2c323c; border-radius: 0px 10px; padding: 17px; text-align: left;">Kode Script di sini...</div>

Hasilnya seperti ini :

Script anda di sini...

Penjelasan singkat :

• Didalam kode script ada beberapa elemen yang dapat sobat rubah, seperti tulisan 1px; jika sobat ganti dengan angka yang lebih besar maka garis pinggir yang di hasilkan akan semakin tebal.

• Tulisan : #f6f6f6; adalah elemen kode warna background, dimana kode tersebut bisa sobat ubah sesuai warna yang di inginkan.

• Tulisan : padding: 10px; jika sobat ganti dengan angka yang semakin besar maka otomatis kotaknya pun akan semakin lebar.

• Tulisan : text-align: left; merupakan posisi teks didalam kolom berada pada bagian kiri, jika sobat menginginkan tulisan yang ada di dalam kotak teks tersebut berpindah kesebelah kanan sobat bisa ubah dengan text-align: right; atau ubah posisi tengah.

Begitupun dengan Kode Script lainnya semua memiliki elemen yang hampir sama dan bisa diubah, silahkan sobat lakukan experimen saja sesuai keuletan dan kekereatifan masing-masing agar hasilnya semakin memuaskan.

* * * * *

Selesai.

Nah itulah tadi langkah-langkah Cara Membuat Kotak Teks Table Keren Menggunakan Kode HTML JavaScript di Postingan Blogger.

Sangat mudah bukan... ? Selamat mencoba dan Semoga bermanfaat.

Berbagi :