CARA MEMBUAT KOTAK DALAM BLOG - KODE HTML KOTAK POSTINGAN BLOG

Kode HTML Kotak Postingan Blog

Aplikasi Penulisan blog sangat berbeda dengan aplikasi penulisan dokumen lainnya misalnya Ms. Word. Tampilan penulisan blog sangat terbatas pada bagian tools atau menu yang dapat digunakan untuk mengedit tulisan atau dokumen. Misalnya saja, pada Ms. Word, kita dapat menambahkan berbagai jenis gambar, shape, atau grafik dengan sangat mudah. Bagian inilah yang merupakan salah satu perbedaan besar antar Ms. Word dengan Aplikasi Blog.

Untuk memudahkan para blogger dalam penulisan postingan blog, maka terlebih dahulu, seorang blogger harus mengedit tulisannya di Ms. Word atau sejenisnya dan kemudian meng-copas hasil editan tersebut ke halaman edit Aplikasi Blog. Tapi, bagian yang dapat diedit sangatlah terbatas, yakni hanya pada bagian huruf atau tulisannya saja. Sementara jikalau seorang blogger ingin menambahkan gambar atau shape dalam postingannya, maka ia harus meng-upload gambarnya melalui tools yang tersedia dalam menu edit, dan untuk Membuat Kotak Dalam Postingan Blog, maka seorang blogger hanya bisa menmbahkannya dengan menggunakan Kode HTML dari bentuk atau jenis shapes yang diinginkan.

Bagaimanakah Cara Membuat Kotak Dalam Postingan Blog?

Berikut ini adalah beberapa contoh kotak atau shape yang dapat anda gunakan dalam menunjang aktivitas penulisan postingan blog Anda.

Silahkan Anda Copy kode berikut ini (Sesuai Selera) Dan pastekan kodenya pada bagian yang Anda Inginkan.

Keuntungan Penggunaan Kotak Dalam Postingan Blog;

"Dapat menambah nilai seni postingan yaitu dapat menjadikan psotingan menjadi tertata rapi"

Caranya Menggunakan Kotak Pada Postingan Blog

Ø  Log ini ke blog Anda

Ø  Buat Postingan baru

Ø  Pilih Edit HTML

Ø  Paste KODE yang  telah Copy sebelumnya.

Ø  Ganti tulisann “Blogger Solution” menjadi tulisan Anda sendiri

Versi 1 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #fff; border-radius: 10px; border: 2px dashed

#6fa8dc; padding: 10px; t-align: left;">Blogger Solution</div>

Versi 2 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #fff; border-radius: 10px; border: 2px dashed

#6fa8dc; padding: 10px; t-align: left; width: 300px;">Blogger Solution</div>

Versi 3 

<div style="-moz-border-radius: 30px; -webkit-border-radius: 30px; background-color: #fff; border-radius: 30px; border: 2px dashed

#6fa8dc; padding: 10px; t-align: left;">Blogger Solution</div>

Versi 4 

<div style="-moz-border-radius: 30px; -webkit-border-radius: 30px; background-color: #fff; border-radius: 30px; border: 2px dashed

#6fa8dc; padding: 10px; t-align: left; width: 300px ">Blogger Solution</div>

Versi 5 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #fff; border-radius: 10px; border: 10px dashed

#6fa8dc; padding: 10px; t-align: left;">Blogger Solution</div>

Versi 5 

<div dir="ltr" style="text-align: left;" trbidi="on">

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #5f94c1; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">

<span style="color: white;">Blogger Solution</span></div>

Versi 6 

<div dir="ltr" style="text-align: left;" trbidi="on">

<div style="-moz-border-radius: 30px; -webkit-border-radius: 30px; background-color: #5f94c1; border-radius: 30px; border: 4px double #fff; padding: 20px; t-align: left;">

<span style="color: white;">Blogger Solution</span></div>

Versi 7 

<div dir="ltr" style="text-align: left;" trbidi="on">

<div style="-moz-border-radius: 50px; -webkit-border-radius: 40px; background-color: #5f94c1; border-radius: 100px; border: 6px double #fff; padding: 50px; t-align: left;">

<span style="color: white;">Blogger Solution</span></div>

Versi 8 

<div style="-moz-border-radius: 30px; -webkit-border-radius: 30px; background-color: #eeaa52; border-radius: 30px; border: 2px dashed

#6fa8dc; padding: 10px; t-align: left; width: 300px ">Blogger Solution</div>

Versi 9 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Teks Anda Di Sini</div>

Versi 10 

<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">Teks Anda Di Sini</div>

Versi 11 

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">TULISAN Anda DISINI</div>

Versi 12 

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
TEKS ANDA DISINI</div>

Versi 13 

<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
TULISAN DISINI</div></div>

Versi 14 

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Teks Anda Di Sini…….</div> 

Versi 15 

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Disini
</div>

Versi 16 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #0E0A11; border-radius: 10px; border: 7px double #9A23E7; padding: 10px; t-align: left;">Tulis Kode Anda Disini</div>

Versi 17 

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Kode Script Sobat Disini</div>

Dari beberapa bentuk shape di atas, dapat disimpulkan bahwa bentuk, ukuran, jenis garis, warna garis, Dan warna background dapat diubah-ubah sesuai selera masing-masing.

Caranya yaitu terletak pada bagian kode-kode tertentu.

Misalnya:

Ø  background-color: #fff  (Untuk mengubah warna background)

Ø  border: 2px dashed #6fa8dc (Untuk mengubah Jenis Dan warna garis)

Ø  t-align: left (Untuk mengubah posisi teks)

Ø  width: 300px; (Untuk mengatur lebar shape)

·        Jika Anda Ingin Shape yang responsive, caranya yaitu:

-         Hapus saja kode width: 300px; atau

          -    Tambahkan “max-“ sebelum kata width sehingga menjadi
               “max-width: 300px;”