Belajar Cara Membuat Tulisan Dalam Kotak Di Postingan Blogger

Munkin sebagian bloger sudah mahir membuat tulisan dalam kotak. Namun mungkin juga ada yang masih bingung. 

Bagaimana cara membuat tulisan dalam kotak di blog, kali ini kita akan belajar Cara Membuat Tulisan Dalam Kotak Di Blog. 

Ngeblog dan membuat artikel merupakan suatu rutinitas bagi seorang Blogger setiap hari, dari mulai menentukan judul, membuat artikel sampai mempublikasikan hasil karyanya adalah hal yang biasa bagi mereka. 

Bagi blogger membuat postingan dengan baik dan rapih merupakan sesuatu yang harus diterapkan pada setiap artikel yang dibuat, contohnya  Seperti Cara Membuat Tulisan Dalam Kotak Di Blog. 

Dengan membuat isi konten yang rapih dan menarik tentunya dapat nilai seo pada mesin pencarian terlihat bagus dan juga dilihat oleh pengunjung pun akan merasa betah berlama-lama di blog kita.

Pada kesempatan kali ini mari kita belajar membuat tulisan dalam kotak agar terlihat rapih dan enak dilihat oleh pengunjung blog. 

Jika memang kotak/bingkai tulisan itu dibutuhkan, untuk membuat kotak untuk tulisan sangatlah mudan dan simpel. 

Bagi teman yang ingin belajar membuat kotaknya bisa ikuti langkahnya dibawah ini.

Langkah membuat tulisan dalam kotak

1. Masuk ke Blogger - Buat Entri Baru

2. Mulailah menetukan judul artikel dan lanjut membuat artikel pada mode Compose

3. Saat ingin memasukkan kode tulisan dalam kotak,masuk ke mode HTML dan pastekan kodenya yang ingin dipasang pada postingan.

4. Untuk melanjutkan menulis artikel,kembalikan ke mode Compose seperti pada no 2 dan lihat hasilnya jika berhasil akan ada kotak untuk menulis didalamnya.

Setelah kita selesai membuat kotak tersebut beserta artikelnya silahkan teman Pratinjau dahulu dan jika sesuai harapan silahkan Publikasikan artikel yang teman buat tadi, 

Langkah diatas adalah cara memasang kodenya pada postingan. Jika teman sudah mengerti cara memasangnya, Mari  kita lanjut pada langkah dalam membuat jenis kotak tulisan, border, Background.

Jenis Border dan Kodenya Untuk Tulisan

Ada berbagai jenis kotak yang unik untuk membuat tulisan pada kotak dan menarik untuk diterapkan agar setiap postingan yang membutuhkan border tersebut dapat terlihat menarik dan rapih.

Untuk jenis nya bisa lihat dibawah ini, kodenya juga sudah ada di dalam tiap kotak tingal dipraktekan saja sendiri yah.

Kotak Border Berwarna Gold

<div style="border: 3px #FFD700 Double; padding: 10px;background-color:#FFFFFF; text-align: left;">isi text disini</div>

Kotak Border Yang Bisa Disesuaikan
<textarea cols="60" onclick="this.focus();this.select()" readonly="readonly" rows="1">isi text di sini

Catatan:

Untuk isi kotak ganti tulisan isi text di sini dengan Isi text hanya bisa diganti Pada tampilan HTML saja yah

Kotak Border Background Blue

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;">isi text disini</p>

Kotak Border Background Samar

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">isi text disini</div>

Kotak Border Background Biru Tua

<p style="border: solid 1px #eceff5; background: #29447E; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">isi text disini</p>

Kotak Abu-abu Siku Melengkung

<p style="border: solid 1px #aaa; background: #ccc; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">isi text disini</p>

Kotak Border Putih Abu-abu

<p style="border: dashed 2px #eceff5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">isi text disini</p>

Kotak Border Orange Putus-putus

<p style="border: dashed 2px #ee3f10; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">isi text disini</p>

Kotak Background Yellow

<div style="border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;">isi text disini</div>

Kotak background Yellow border Putus-putus Pendek

<div style="border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;">isi text disini</div>

Kotak Background Kuning Kuning Hitam

<div style="border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;">isi text disini</div>

Kotak Disisipkan

<div style="border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 50px; width: 600px; text-align: left;">isi text disini </div>

Kotak Tabel 4 Kolom

isi kotak1	isi kotak2
isi kotak2	isi kotak2

Kode script :
<table border="1" style="width: 400px;">

<tbody>

<tr>

<td align="center">isi kotak1

</td>

<td align="center">isi kotak2

</td>

</tr>

<tr>

<td align="center">isi kotak2

</td>

<td align="center">isi kotak2

</td>

</tr>

</tbody></table>

Catatan: width: 400px bisa disesuaikan

Kotak Biru Sisi kiri Siku Melengkung

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">isi teks disini</div>

 Kotak Biru Sisi kiri Siku Melengkung

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">isi teks disini</div>

Kotak Sisi Shadow

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 200px; width: 500px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">isi text disini< /div></span></span></span>

Catatan : Ganti kata isi text disini pada setiap kode dengan kata-kata yang ingin dituliskan Semoga teman semua menemukan kotak yang sesuai dengan yang diharapkan. 

Dan menerapkannya pada blog teman sesuai keinginan. untuk warna bisa disesuaikan dengan kode warna, ukuran bisa disesuaikan sendiri.

Jika ada pertanyaan dan saran. Silahkan gunakan kolom komentar untuk bertanya. Terima kasih sudah membaca. Selamat untuk praktek.