Membuat Code Box atau Code Snippet pada Postingan Blog

Membuat Code Box atau Code Snippet pada Postingan Blog

Pendahuluan

Sebagai salah satu platform blog yang paling banyak digunakan. Blogger atau blogspot menyediakan berbagai pilihan template yang dapat dikustomisasi dengan bahasa HTML dan CSS untuk mengembangkan blog menjadi lebih stylish dan professional. Ketika menulis di blog mungkin kita akan membuat code di postingan blog. Sehingga butuh tempat tersendiri untuk membuat tempat code tersebut, sehingga memudahkan pembaca untuk meng-copy paste.

Langkah-Langkah :

1. Login ke blogger.com lalu pilih Menu "Tema", pada pilihan sesuaikan "Edit HTML"
   Cari di code tersebut "]]</b:skin>". Di atas "]]</b:skin>" tersebut pastekan code CSS berikut ini :
2. a. Untuk code box dengan scroll pastekan code berikut :
   
   .code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; 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%; }
   .code:hover { background-repeat:no-repeat; }
   b. Untuk code box tanpa scroll pastekan code berikut :
   
   .code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; 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%; }
   .code:hover { background-repeat:no-repeat; }
   Setelah selesai klik icon "simpan" di kanan atas.
   
3.  Untuk menggunakan code box pada postingan, coba buat atau buka postingan anda dan edit HTML postingan lalu tambahkan code berikut :
   
   <div class="code">
   pastekan code yang anda ingin tambahkan dalam code
   </div>
   
4. Setelah itu klik pratinjau atau publikasikan untuk melihat postingan anda.
   

Penutup:

Demikian pembahasan saya tentang membuat code box atau code snippet pada postingan blog. Jika anda merasa postingan ini bermanfaat silahkan share postingan ini dengan menyertakan sumber : http://rds-production.blogspot.com/