Cara Menambah Kotak Untuk Menulis Kode / Script Di Postingan Blog

Kode / Script 

#Penulisan postingan Blog

penulisan postingan blog dengan menyajikan artikel-artikel yang berbobot merupakan suatu yang mesti dilakukan. memperhatikan kaidah-kaidah dalam penulisan dengan membedakan setiap bagian bagian tulisan sesuai fungsinya masing masing. penulisan dengan memperhatikan heading maupun subheading merupakan pendukung dalam suatu artikel, penyisipan gambar untuk mencitrakan pesan yang disampaikan dalam konten adalah salah satu bentuk mempermudah memberikan pemahaman kepada pengunjung.

setiap blog mempunyai niche masing masing tentang  konten yang dibahas mulai dari pendidikan, lifestyle, hoby, blogging, dll. dan diantara konten postingan yang dibuat adalah  yang membahas tentang tips, trick, tutorial mengenai blogging. dan tentunya dalam membahas tutorial blog biasanya menyisipkan suatu kode ataupun script, baik itu kode HTML, Css, JAVASCRIPT, dll.

Kotak Untuk Menulis Kode Script 

penulisan postingan blog yang menyisipkan kode html, css, dll ada baiknya membedakan dengan tulisan konten yang lain, supaya mempermudah pembaca membedakan antara tulisan huruf biasa dan kode. untuk menulis kode dalam postingan hendaknya membuat kotak khusus untuk menulis kode maupun script

#Cara Menambah Kotak Untuk Menulis Kode Script

berikut adalah langkah langkah untuk Cara Menambah Kotak Untuk Menulis Kode Script Di Postingan Blog

1. SEDERHANA

Cara Menambah Kotak postingan ini sangat sedehana sekali dengan tampilan yang sangat sederhana, cukup menambahkan kode css berikut ketika membuat suatu postingan di html post (bukan compose)

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px;
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<tulis kode yang mau disipkan di postingan disini>>>>

       </code>
 </pre>

2. DENGAN SCROLL

cara yang ini hasilnya seperti gambar "Kotak Untuk Menulis Kode Script"  diatas ada scroll disamping karena kode tidak ditampakkan secara keseluruhan. 

cara membuat Kotak Untuk Menulis Kode / Script :
1. sign in blogger, di theme pilih Edit HTML

2. cari kode  ]]</b:skin> , gunakan ctrl + f untuk mempermudah mencari  ]]</b:skin>
tempelkan kode berikut sebelum  kode ]]</b:skin>

.codemooreyi { background:#f5faf7; background-repeat:no-repeat; border: solid #b6f7ab; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.codemooreyi:hover { background-repeat:no-repeat; }

3. save template
4. buat postingan  di new post

5. sisipkan kode berikut di html (bukan compose ) untuk menulis kode atau script di postingan

<div class="codemooreyi">
                        tulis kode atau script disini
                        </div>

6. publish
7. lihat tampilan postingan di preview
apabila melakukan sesuai langkah diatas maka hasilnya dapat dilihat sendiri di tampilan postingan blog

3. TANPA SCROLL

cara yang ini hasilnya seperti yang digunakan di blog ini , tanpa  ada scroll disamping karena kode  ditampakkan secara keseluruhan.

caranya sama seperti 2. DENGAN SCROLL yang membedakan hanya di no 2 

2. cari kode  ]]</b:skin> , gunakan ctrl + f untuk mempermudah mencari  ]]</b:skin>
tempelkan kode berikut sebelum  kode ]]</b:skin>

.codemooreyi { background:#f5faf7; background-repeat:no-repeat; border: solid #b6f7ab; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.codemooreyi:hover { background-repeat:no-repeat; }

bila kesulitan menemukan kode ]]</b:skin> . gunakan opsi lain menyimpan kode css diatas, yaitu lewat layout kemudian pilih theme designer, lalu di advanced pilih add css kemudian apply

demikianlah Cara Menambah Kotak Untuk Menulis Kode / Script Di Postingan Blog, semoga bermanfaat, terima kasih.