Menampilkan Kode Yang unik di postingan (1)

Membuat Kode HTML di Postingan yang unik. Dalam mempercantik template kita memerlukan beberapa kode dan biasanya yang di pakai yaitu css. Kebanyakan orang memakai css untuk mempercantik template karena pada dasarnya css tidak terlalu membuat blog kita menjadi berat untuk di akses namun kelemahan css yaitu tidak semua browser dapat membaca kode ini (G sekolah kali ye).

Disini saya akan membahas tentang "Menampilkan kode HTML di Postingan yang unik". maksudnya apa? maksudnya yaitu menampilkan kode HTML yang sudah di parse ke dalam postingan dengan gaya artinya tidak monoton (hanya tampil kode HTML saja). Ini bertujuan untuk agar postingan kita nampak indah dan enak untuk di baca. Disini saya akan menggunakan kode css, untuk melihat contohnya sobat bisa melihat di masing-masing post di blog ini yang terdapat kode kode HTML-nya. untuk membuatnya seperti itu sobat bisa melihat langkah-langkah di bawah ini :

1. Masuk ke Blogger
2. setelah login, sobat harus menuju Tata Letak => Edit HTML
3. lalu cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya
   
   
   .code{ display:block; font-family:Courier New; font-size:9pt; width:360px; overflow:auto; repeat-y; max-height:200px; margin:5px 10px; padding:2px 15px 2px 25px; background:gray}
   
   
   Penjelasan :
   
   • width:360px; => menunjukan lebar dari background Kode HTML dalam postingan, sobat dapat memperlebarnya atau menyempitkannya
     
   • background:gray => Menunjukan warna dari latar belakang, sobat dapat mengganti dengan warna yang lain atau menggunakan image
     
   
   
4. Setelah itu sobat dapat menyimpan
5. nah untuk mengaktifkannya sobat dapat menulis kode HTML-nya seperti di bawah ini
   
   <span class="code">
   Taruh kode HTML yang sudah di parse disini
   </span>
   
   
6. nah tulisan yang berwarna merah tersebut sobat ganti dengan kode HTML yang sudah di parse (baca : Kode HTML dalam Postingan), saya kasih contoh deh, misalnya saya ingin menampilkan kode HTML di bawah ini
   
   
   <div id='footer-column-container'>
   <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
   <b:section class='footer' id='col-bottom' preferred='yes'>
   <b:widget id='Text2' locked='false' title='==&amp;gt;&amp;gt; Uye-uye &amp;lt;&amp;lt;==' type='Text'/>
   </b:section>
   </div>
   <p>
   <hr align='center' color='#5d5d54' width='90%'/></p>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   <div id='footer5' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col7' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>
   
   
   Maka Menjadi seperti di bawah ini
   
   <span class="code">
   <div id='footer-column-container'>
   <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
   <b:section class='footer' id='col-bottom' preferred='yes'>
   <b:widget id='Text2' locked='false' title='==&amp;gt;&amp;gt; Uye-uye &amp;lt;&amp;lt;==' type='Text'/>
   </b:section>
   </div>
   <p>
   <hr align='center' color='#5d5d54' width='90%'/></p>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   <div id='footer5' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col7' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>
   </span>

Nah seperti itu lah Cara Menampilkan kode HTML yang Unik Di postingan. Karena cara ini menurut saya tingkat menengah (Untuk Pemula Pahami dahulu : kode kode HTML ) maka saya tidak menampilkan Image Tutorial-nya, maaf deh klo saya belagu atau sombong tetapi klo ini diterapkan oleh pemula takutnya ada kesalahan yang fatal sehingga artikel sobat akan menjadi berantakan . Sekian dari saya Terima Kasih.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg