Cara Membuat Kotak Kode HTML Di Postingan


Cara Membuat Kotak Script Dalam Postingan Blog - Sebagai seorang blogger tentunya harus tau yang namanya script HTML, dimana hal ini biasanya digunakan untuk merubah tampilan blog sesuai dengan yang diinginkan. Apalagi bagi blogger yang membahas postingan tentang HTML tentunya cara membuat kotak di blog ini sangat diperlukan. Dimana dengan membuat kotak di blogspot tentunya akan membuat postingan yang kita buat akan terlihat rapi dan tidak menghabiskan banyak tempat.
Cara Membuat Kotak Kode HTML Di Postingan ini sebenarnya tidak terlalu sulit, karena anda hanya perlu menambahkan beberapa kode HTML di HTML postingan anda. Nah apabila anda sudah mengetahui kodenya tentunya anda tinggal memasang saja di postingan yang anda perlukan penggunaan script box di blog ini.
cara membuat script box

Ada bnayak sekali model script box yang bisa anda gunakan, dan anda sendiri sebenarnya bisa menyesuaikan tampilannya seperti ukuran, warna dan yang lainnya sesuai dengan kebutuhan anda. Disini saya akan memberikan beberapa model script box yaitu yang berbentuk kota biasa dan juga kotak yang bisa digeser atau kotak script dengan scroll Horizontal dan juga script box dengan scroll vertikal horizontal.

BACA JUGA:

Berikut saya akan sajikan Cara Membuat Script Box di dalam postingan blog yang tentunya dapat memudahkan anda untuk memilih dengan tampilan yang dinamis sesuai dengan selera anda. Dan perlu diketahui, kotak script disini bukan hanya digunakan untuk meletakkan kode HTML di postingan tetapi juga bisa anda gunakan untuk menempatkan kata - kata atau kalimat yang dianggap penting

Cara Membuat Kotak Script Dalam Postingan Blog

Adapun langkah - langkah Cara Membuat Kotak Kode HTML Di Postingan adalah sebagai berikut:
  • Log In ke blogger anda
  • Pilih Entri baru >> silahkan anda ketik materi yang mau anda posting [compose]
  • Masukkan kode HTML kotak script di bagian HTML bukan di Compose
  • Kembali ke Compose >> Masukkan kode atau kalimat di dalam kotak

Berikut pilihan script box yang bisa anda gunakan:

1. Kotak doble-bolder >> vertical/tinggi, menyesuaikan. 

<div style="background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;"> TULISAN DISINI<br /></div> </div>

2. Kotak dengan singgle padding border black
<div style="background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;">
TULISAN DISINI
</div>

3. Kotak border-dotted 2pk dan warna bisa disesuaikan.

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
TULISAN DISINI</div>

4. Kotak dengan border radius 20px,-border left-right 10px, back ground.

<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 DISINI</div>

5.  Kotak scroll vertical simple menyesuaikan, beckground polos/putih tinggi 200px bisa di edit
scrool akan muncul apabila isinya sudah melebihi kotak.

<div style="background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;">
 TULSAN DISINI
A
B
C
</div>

6. Scroll box vertikal +Horizontal polos, warna dan ukuran bisa disesuaikan

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

7. Kotak box select all
<form name="copy"><div align="center"><input value="Copy All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 400px; height: 80px;" name="txt">SELAMAT DATANG DI WWW.KUBIS.ONLINE MEMBAHAS SEPUTARAN TIPS TRIK DAN TUTORIAL,REVIEW, BISNIS DAN BERITA TEKNOLOGI.</textarea></p></form>
Silahkan anda ganti teks warna merah dengan teks anda atau kode script anda, dan teks warna biru untuk kata yang ingin anda gunakan, misalnya "select all" atau yang lainnya

Itulah beberapa Cara membuat kotak HTML di postingan yang bisa anda pilih sesuka anda. Dan sebenarnya masih banyak lagi ada macam kotak script tersebut dan dengan yang saya postingkan diatas sebenarnya anda sendiri bisa mengkreasikan dengan edit tampilannya seperti ukuran maupun warna bacground yang cocok buat anda.
Baca juga: Cara Memasang Anti Copas di Blog 100% Berhasil Dengan Mudah
Penutup: Itulah Cara Membuat Kotak Kode HTML Di Postingan yang bisa anda gunakan dengan mudah dan cepat yang tentunya akan membuat postingan anda tampil lebih rapi dan memiliki kesan dinamis yang tentunya akan mempermudah para pembaca. Semoga bermanfaat dan terimakasih.
bm

Hanya seorang manusia biasa yang ingin berbagi pengalaman dan mencoba hal - hal baru.

13 komentar

silahkan berikan komentar anda dan saran terbaik untuk kemajuan blog ini.

  1. Cuma Kotak box select all aja yang belum pernah nih, nice share, Mas. Nanti kapan2 aku coba ah..

    ReplyDelete
    Replies
    1. siap mas, selamat mencoba dan trimakasih telah berkunjung

      Delete
    2. Oh, ya, Mas. Kalau bikin kotak yang tersembunyi gimana ya. Maksudnya kotak itu hanya terlihat judulnya saja, tapi begitu diklik isinya terlihat.

      Gimana ya cara jelasinnya..hehe

      Delete
  2. boleh nyoba nih, makasih min. kunjung balik ke blog ane ya,, ikangs,blogspot,com

    ReplyDelete
  3. sy perlu cara buat kotak kode ini, trims info.. sobat blogger kunjungi ya..
    http://wm-site.com/

    ReplyDelete
    Replies
    1. siap gan, mantap propertinya, nanti ane mau beli rumah di tabanan wkwk

      Delete
  4. Terimakasih mas artikel yang sangat membantu

    ReplyDelete
  5. Sangat membantu mas artikel, terlebih lagi bagi blogger pemula. Kunjungi blog saya yah Masarif.xyz

    ReplyDelete
  6. izin sedot gan!
    semoga semakin rame blognya..!

    ReplyDelete