Cara Membuat Kotak Script Di Artikel Blog

Iklan 728x90

Cara Membuat Kotak Script Di Artikel Blog

Cara membuat kotak script di artikel blog
Halo sobat Blogger, di artikel kali ini saya ingin membagikan cara membuat kotak script di dalam artikel blog. Cara ini biasa dipakai oleh para blogger yang ingin membuat tutorial-tutorial yang membutuhkan script kode.

Kotak script ini berfungsi untuk menempatkan kode script seperti javascript, kode CSS, HTML, dan lainya di artikel / postingan sehingga menjadi lebih rapi.

Ada banyak sekali style atau model kotak script yang bisa anda gunakan di blog, tapi kali ini saya akan membagikan 7 style kotak script saja.

Berikut Kotak Script Yang Bisa Kamu Gunakan di Blog :


Style 1 :  Box Sederhana


<div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">
<div dir="ltr">
Letakan Kode Scipt Anda Disini</div>
</div>

Style 2 : Background + Shadow


<div style="background-color: deepskyblue; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.16) 10px 10px 0px, rgba(0, 0, 0, 0.12) 0px 2px 10px 0px; font-size: 15px; margin: 0.5rem 0px 1rem; overflow: hidden; padding: 20px; position: relative; text-align: left; transition: all 0.25s ease 0s;">
Letakan Kode Skrip Anda Disisni</div>

Style 3 :  Box Sederhana + garis hitam dibagan tepi


<div style="background-color: #eaeaea; border: 1px solid #444; padding: 10px; text-align: left;">
Letakan Kode Script Anda Di Sini</div>

Style 4 :  Blackground Yellow

<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;">
Letakan Kode Script Anda Disini</div>

Style 5 : Background Blue

<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;">
Letakan Kode Script Anda Disini</div>

Style 6 :  Background Ungu

<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Letakan Kode Script Anda Disini</div>

Style 7 : Box Green
<div class="box green">Isi tulisan</div>

Style 8 : Box Blue
<div class="box blue">Isi tulisan</div>

Style 9 : Box Red
<div class="box red">Isi tulisan</div>

Style 10 : Box Yellow
<div class="box yellow">Isi tulisan</div>

Style 11 : Box Dengan Scroll
<pre style="background: rgb(242, 242, 242); border-radius: 10px; border: 2px solid rgb(221, 221, 221); clear: both; color: #555555; font-family: Consolas, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace !important; font-size: 15px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 15px; margin-right: 15px; margin-top: 15px; max-height: 500px; overflow-wrap: normal; overflow: auto; padding: 10px; user-select: text; vertical-align: baseline;">Letakan kode Script Anda Disini</pre>

Nah... Itulah beberapa tipe atau style kotak script, dan tentunya kotak script ini sudah responsive saat dibuka di mobile / handpone tampilannya tetap oke.

Lalu bagaimana cara menerapkannya di artikel blog?

Baik, sekarang kita lanjut ke cara membuatnya. Silahkan simak tutorial berikut ini.

Baca Juga: Cara Membuat Table Yang Responsif di Blog


Tutorial Cara Membuat Kotak Script Di Blog:


Pertama, silahkan kamu pilih kotak script yang mana yang ingin kamu gunakan, Lalu copy kode scriptnya.

Kode Script sudah saya letakan di dalam kotak script masing-masing diatas, jadi kamu tinggal pilih kotak scriptnya dan langsung copy kode yang ada di dalamnya.

Sedikit saran dari saya, jika kode script yang ingin kamu posting di artikel adalah kode script yang panjang, maka sebaiknya gunakan kotak script dengan scroll (yang style 7 : dengan scroll).

Selanjutnya, silahkan masuk ke Dasbor blog kamu dan pilih Postingan > Entri Baru > dan letakan kode script tadi di mode HTML bukan compose.

Untuk lebih jelasnya silahkan perhatikan gambar berikut ini:

Buka Dasbor Blogger > Postingan > Entri Baru (lihat tanda panah merah)
Cara membuat kotak script di blog
Lalu Pilih Mode HTML (lihat tanda panah), dan letakan kode kotak script yang kamu pilih di dalam mode HTML tersebut. lalu kembali ke mode Compose.
Cara membuat kotak script di blog
Selanjutnya silahkan ganti kata "Letakan Kode Script Anda Disini" dengan kode script anda.

Nah itulah cara membuat kotak script di artikel blog yang bisa saya share kali ini, sangat mudah bukan?

Sekian dulu artikel kali ini, jika dirasa bermanfaat silahkan dibagikan artikel kepada teman-teman yang lain ya..

Sampai jumpa di artikel berikutnya... :D

Baca Juga
SHARE

Related Posts

Subscribe to get free updates

5 comments

  1. Wahh keren nih, ini ane cari2 sebelumnya, dlu bingung mau keyword apa di search engine hehe, thanks yo:)

    ReplyDelete
  2. Penting sekali ini. Sewaktu2 kita membutuhkan cara ini.

    ReplyDelete
  3. Wahh kerenn nih caranya... makasih ya

    ReplyDelete
  4. Thanks ya agan2 semua sdh mampir di blog ane :D

    ReplyDelete

Post a Comment