Cara Membuat Kolom keren Untuk Kode Scrip Pada Postingan Blog Anda

Cara Membuat Kolom keren Untuk Kode Scrip Pada Postingan Blog Anda - Bagi sobat blogger mungkin ada beberapa yang ingin meletakan kode skrip pada postingan blog, tapi mungkin mengalami kendala pada saat meletakannya, seperti kurang rapi dan tidak enak di padang oleh para pembaca, maka dari itu sobat harus membungkusnya dengan kolom untuk kode Scrip, agar para pembaca nyaman melihatnya dan mudah mencopynya.

Nah..! kali ini saya akan memberi tahu cara mebuat kolom untuk kode scrip pada postingan blog sobat! Biasanya ini di gunakan oleh para blogger yang memberikan informasi tutorial yang membutuhkan kode Scrip untuk mempraktekanya.

Membuat Kolom keren Untuk Kode Scrip

Pertama-tama saya akan membuatakan satu contoh saja, cara memasang kolom pada blog sobat untuk menaruh scrip di dalamnya, kemudian saya akan menyajikan berbagi kolom untuk tempat Scrip yang semoga sobat butuhkan.

Oke! Mari kita Mulai,,

1. Seperti biasa, buatalah entri baru pada postingan artikel yang sobat inginkan.

2. silahkan sobat copy kode scrip untuk kolom, di bawah ini:

<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;"> PASTEKAN KODE SCRIP DI SINI!!</div>

3. Setelah sobat mengcopynya silahkan sobat kembali ke postingan blog sobat dan Klik > tab HTML (kotak Merah) pada postingan blog sobat.

4.  Pastekan scrip yang sobat copy tadi untuk membuat kolom di postingan sobat.
Biar tidak bingung lihat gambar di bawah ini:

5. Lalu klik > tab Compose (kotak biru kanan atas) dan pertinjau! Sobat pasti sudah bisa melihat hasilnya.

5. Kembali ke tab Compose! Pada tulisan (PASTEKAN KODE SCRIP DI SINI!!) Sobat ganti dengan kode Scrip yang ingin sobat letakan di dalamnya.

6. Selesai.

Note!: 
Setelah sobat mempastekan kode scrip di tab HTML Berikan sepasi! atau kode <br /> Tujuanya agar sobat bisa melanjutkan menulis artikel, jika sobat tidak memberikan sepasi sobat akan kesulitan untuk melanjutkan menulisnya. ( Lihat Panah Merah pada Gambar di Atas ) 

Mudah Kan Sob!?

Selanjutnya saya akan memberikan berbagai macam kolom untuk kode Scrip pada blog sobat, semoga bermanafaat ya..

Ini beberapa Kode Scrip untuk membuat kolom pada postingan blog sobat :

Ini Scripnya:

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> CARA MEMBUAT KOLOM KODE SCRIP PADA BLOG</div>

Ini Hasilnya :

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> CARA MEMBUAT KOLOM KODE SCRIP PADA BLOG </div>

Ini Hasilya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> CARA MEMBUAT KOLOM KODE SCRIP PADA BLOG </div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex> t-align: left;"> CARA MEMBUAT KOLOM KODE SCRIP PADA BLOG </div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<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;"> CARA MEMBUAT KOLOM SCRIP PADA BLOG</div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<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;"> CARA MEMBUAT KOLOM SCRIP PADA BLOG</div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<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;"> cara membuat kolom kotak kode skrip pada blog</div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<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;"> cara membuat kolom kotak kode skrip pada blog</div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;"> CARA MEMBUAT KOLOM KOTAK UNTUK KODE SCRIP PADA BLOG </div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Ini Scripnya:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> CARA MEMBUAT KOLOM KOTAK UNTUK KODE SCRIP PADA BLOG</div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Atau Mungkin Sobat ingin yang ADA SCROLLNYA Berikut Sripnya:

Ini Sripnya:

<div style="background-color: #f8f8f8; border: 1px solid #aaa; overflow: auto; height: 50px; width: auto; padding: 10px 30px;"> CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG</div>

Ini Hasilnya:

CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG

Atau Sobat juga ingin Seperti Punya Saya yang Ada Menu Dobel klik Resposif Dan Ada Scrollnya:

<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Dobel Klik" /> </div> <div align="center"> <textarea cols="20" name="txt" rows="4" style="height: 50px; width: 200px;" wrap="VIRTUAL">TARUH KODE SCRIP SOBAT DI SINI

Penting!:
Pada tulisan "CARA MEMBUAT KOLOM KOTA UNTUK KODE SCRIP PADA BLOG", Sobat ganti dengan kode Scrip yang ingin sobat bagikan kepada para pembaca.


Dan Mungkin sekian dulu dari saya, Semoga artikel kali ini bermanfaat bagi sobat, terima kasih sudah membaca artikel saya tentang Cara Membuat Kolom keren Untuk Kode Scrip Pada Postingan Blog Anda,  Sampai ketemu lagi di postingan berikutnya di Catatan Tukang Angon.