Cara Membuat Kotak Kode HTML Di Postingan
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.
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 Menambahkan Icon Di Menu Blog 100% Work
- Cara Membuat Tombol Whatsapp Keren Di Blog
- Cara Membuat Website Menjadi Aplikasi Android Tanpa Koding
- 7 Cara Mudah Agar Artikel Muncul Di Halaman Pertama Google
- 3 Cara Memasang Tamplate Blog Sesuai Keinginan
- Cara Membuat Sitemap Blogger Dengan Mudah 100% Work
- Cara Membuat Tombol Download Keren Di Postingan Blog
- Cara Membuat Daftar Isi Di Postingan Blogger
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>
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>
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>
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>
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>
<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 MudahPenutup: 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.
seconds.
Cuma Kotak box select all aja yang belum pernah nih, nice share, Mas. Nanti kapan2 aku coba ah..
ReplyDeletesiap mas, selamat mencoba dan trimakasih telah berkunjung
DeleteOh, ya, Mas. Kalau bikin kotak yang tersembunyi gimana ya. Maksudnya kotak itu hanya terlihat judulnya saja, tapi begitu diklik isinya terlihat.
DeleteGimana ya cara jelasinnya..hehe
boleh nyoba nih, makasih min. kunjung balik ke blog ane ya,, ikangs,blogspot,com
ReplyDeletesiap gan, trmks
Deletesy perlu cara buat kotak kode ini, trims info.. sobat blogger kunjungi ya..
ReplyDeletehttp://wm-site.com/
siap gan, mantap propertinya, nanti ane mau beli rumah di tabanan wkwk
DeleteTerimakasih mas artikel yang sangat membantu
ReplyDeleteTrmks sudah berkunjung
Deleteizin sedot gan!
ReplyDeletesemoga semakin rame blognya..!
Trmksih gan, salam sukses
Delete