Buat Kotak Script di Postingan Blog
Hay hay hay sobat online, gimana kabarnya nih? semoga dalam keadaan sehat ya semuanya. Jadi hari ini saya ingin berbagi tutorial Cara Buat Kotak Script di Postingan Blog. Ya walaupun saya menyadari bahwa pengetahuan saya terkait CSS & HTML masih sedikit, tapi gak papa yang penting berbagi ilmu ya kan.
sebenarnya untuk membuat kotak script itu bisa dikatakan mudah mudah gampang, eh eh salah maksudnya mudah mudah sulit hehe 😅. Tapi jangan khawatir disini saya akan memberikan tutorialnya, jadi jika nanti kamu gak bisa lambaikan tangan ke kamera aja ya. Eh gak deng canda.
Sebelum langkah langkahnya saya bagikan, saya akan membagikan macam-macam kotak script beserta kodenya ya.
<div style="border: 3px #9191ed Dotted; padding: 10px; background-color:#eaeaea; text-align: left;"><code>
TULIS KODE/SCRIPT ANDA DISINI
</code></div><div style="border-radius: 10px; border: 4px double #fff; padding: 10px; background-color:#eaeaea; text-align: left;"><code>
TULIS KODE/SCRIPT ANDA DISINI
</code></div><div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Sobat Disini</div>
<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;">Kode Script Sobat Disini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Sobat Disini</div>
<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;">Kode Script Sobat Disini</div>
<div><pre style="background-color: #333333; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(64, 98, 126); border-style: solid; border-width: 1px 1px 1px 4px; color: white; font-family: monaco, "courier new", monospace; font-size: 12px; font-stretch: normal; overflow-wrap: break-word; overflow: auto; padding: 0.5em 1em; position: relative; white-space: pre-wrap;"><code style="background: none; border: none; color: #a3a49a; display: block; font-family: consolas, "andale mono wt", "andale mono", "lucida console", "lucida sans typewriter", "dejavu sans mono", "bitstream vera sans mono", "liberation mono", "nimbus mono l", monaco, "courier new", courier, monospace; font-size: 13px; font-stretch: normal; padding: 0px;"><div dir="ltr">
<span style="color: black; font-family: "times new roman"; font-size: small; white-space: normal;">Kode Script Sobat Disini</span></div>
</code></pre>
</div>
<div dir="ltr">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
</div>
<div>
<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;">
TULSAN DISINI
"A
B
C"
</div>
<div style="background-color: #ffeb7e; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 600px;">
Pasang Kode Script Anda Disini</div>Berikut tutorial Cara Buat Kotak Script di Postingan Blog :
1. Buat sebuah postingan / entry baru
2. Kemudian beralih dari mode Compose ke > HTML
3. Pastekan salah satu kode kotak script yang kalian pilih di atas
4. Untuk melihat hasilnya balik ke mode > Compose
5. Kita akan melihat tampilan box atau kota script yang telah dibuat
6. Terakhir pastekan/ketikkan kode script/tulisan yang ingin dimasukan kedalam kotak script
1. Dengan memakai kotak script akan lebih rapi karena bisa memisahkan antara text biasa dan kode script, karena tersusun didalam satu kotak, atau box area apa bila membahas tutorial yang harus menampilkan kode script.
2. Akan lebih menarik jika sebagai tempat konten pilihan post terkait, tombol download, atau apa saja karena script box ini bisa di pakai apa saja (pasti yang lain tertarik dan pada mau pake)
3. Tidak akan membuat lambat pada loding blog karena kode yang digunakan sangat minimal.
Nah selesai noh sob, jika ada manfaat yang bisa diambil dari artikel ini silahkan diambil. Jika ada pertanyaan atau kritik dan saran terkait artikel ini silahkan komentar dibawah. Saya ucapkan terima kasih kepada pengunjung yang telah membaca artikel ini, Sampai jumpa di artikel selanjutnya.
Source : https://www.bangrizkyw.com/
Source gambar : https://vixiest.com/
