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.

Baca juga: Cara Membuat Website Menjadi Aplikasi Android Tanpa Koding
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: Cara Membuat Tombol Whatsapp Keren Di Blog
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
Baca juga: 7 Cara Mudah Agar Artikel Muncul Di Halaman Pertama Google

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.