CARA MENAMPILKAN KODE SCRIPT PADA ARTIKEL BLOGGER

Ada kalanya saat kita menulis artikel ingin juga menampilkan kode script, entah javascript, html atau lainya. Agar mudah caranya saya bagi menjadi 2, internal dan eksternal yang menggunakan layanan paste2an,. hahahaha apa yah bahasa indonesianya 

#cara 1 internal

untuk menampilkan script html dll, terlebih dahulu kode tersebut harus diparse, agar kode tidak diproses pada pihak client (browser visitor) istilah umumnya sebut saja HTML Parse.


Untuk mem-parse silahkan gunakan http://www.blogcrowds.com/resources/parse_html.php. Atau untuk mudahnya dengan parser bawaan kolom artikel Blogger. Ada emangnya??? ada lagh ....


Pada kolom kanan klik : Post Setting / Setelan Entri >> Options / Pilihan >> Show HTML literally / Tunjukan HTML apa adanya .

Jangan lupa, saat mengetik / paste kode harus pada mode Compose. Jika sudah klik saja mode HTML maka kode sudah diparse otomatis. Sesuaikan saja saat menulis artikel atau script tag dalam mode Compose atau mode HTML.

Untuk mempercantik jangan lupa taruh kode html yang akan kamu tampilkan didalam blockquote dari artikel ini jg dalam kode <pre> agar tampilanya tidak berantakan seperti dibawah ini .

<blockquote> 
<pre>



<script type="text/javascript">
<!--
google_ads_client = "pub-52xx5874832xx00";
/* Nexthint 338x280 */
google_ad_slot = "6xxx254";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.google.com/show_acds.js">
</script>



kode <pre> disini berguna untuk merapikan dan memotong teks atau kode yang paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaannnjjjjjjjjaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaang sekaaaaaaaaaaaaaaaaaaali seperti ini



</pre>
</blockquote>

Berikut contoh CSS untuk kode <blockquote> dan <pre> dari blog ini. Edit saja sesuai selera 

blockquote {
text-align:left;max-height:480px;width:580px;overflow:auto;background-color: #003060; color: #fff; font-style:italic;margin:10px;padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;text-shadow:none;word-wrap:break-word;
}
pre{margin:10px 0;padding:0px 6px;;font:13px 'andale mono','lucida console',monospace;line-height:120%;white-space: pre-wrap;}

#cara 2 eksternal

Walaupaun ringkas, saya jarang menggunakan ini. karena mungkin akan menambah beban loading page. Sobat blogger bisa mencoba gunakan layanan dari http://pastebin.com atau yang sejenis. Setelah paste code di pastebin, klik saja Embed. dan kamu akan dikasi kode untuk menampikan kode script pada artikel blogger secara embed / iframe seperti dibawah.

embed kode

<script src="http://pastebin.com/embed_js.php?i=KNX1xX1s"></script>

iframe kode

<iframe src="http://pastebin.com/embed_iframe.php?i=KNX1xX1s" style="border:none;width:100%"></iframe>

Tampilan

1. 
   <script type="text/javascript">
   
   


2. 
   <!--
   
   


3. 
   google_ads_client = "pub-52xx5874832xx00";
   
   


4. 
   /* Nexthint 338x280 */
   
   


5. 
   google_ad_slot = "6xxx254";
   
   


6. 
   google_ad_width = 336;
   
   


7. 
   google_ad_height = 280;
   
   


8. 
   //-->
   
   


9. 
   </script>
   
   


10. 
    <script type="text/javascript"
    
    


11. 
    src="http://pagead2.google.com/show_acds.js">
    
    


12. 
    </script>
    
    

NOTE : 

** Sebelum mengedit XML Template pada blogger, jangan lupa untuk membackupnya lebih dahulu .