Add code to body post blogger

Bagi yang sudah terbiasa menggunakan bahasa html atau php script, memasukkan sample script or code to the body post pada blog kita adalah pekerjaan yang mudah saja, karena tinggal mengkonfersi beberapa script karakter. But how with beginer blogger? Hal ini akan menyita waktu yang lama, karena harus memikirkan script pengganti agar blogger dapat menerima contoh script yang kita masukkan (tidak dianggap script beneran).

There are some tips to insert your code. However the standard <code> atau <pre> tag kelihatannya sudah mulai membosankan. Biasanya saya menggunakan local server di notebook yang saya pakai dengan server standalone "xampp" dan cms Joomla yang saya instali didalamnya. Saya bisa menggunakan text editor yang Joomla dengan dukungan mambot geshi highlight. Tetapi bagaimana jika seorang blogger yang tidak mempunyai local server. Seketika saya berpikir kenapa tidak memakai versi demo geshi yang ada pada websitenya GeSHi (Generic Syntax Highlighter). Terdapat pada icon Geshi di bagian left sidebar blog saya ini.

Saya klik situsnya dan tinggal paste code, hasilnya berupa code html yang bisa copy dan memasukkan ke body post blogger. It's not as elegant or simple as having a server-side script taking care of it, but it's better than the standard look. So here are the steps:

1. Head over to the GeSHi demo page and plug your source in. Pilih bahasa code yang kita gunakan (PHP, HTML, XML, dll). Kita bisa juga memainkan berbagai format tampilan untuk source code seperti yang kita inginkan. Memang saya lebih memilih defaultnya saja supaya lebih cepat. Selain itu agak rumit jika mau memasukkan source code dengan highlight ke blog seperti yang ditampilan pada website demo geshi. Jadi saya lebih memilih default dan memasukkan ke blog dengan satu warna saja (tanpa higlight).
2. Save as halaman html hasil dari proses Geshi highlight. Sebenarnya lebih mudah dengan menggunakan klik kanan dan view ource code. but since this is a dynamically generated page using parameters passed with the POST method - rather than GET - it doesn't work).
3. Buka file yang telah di save as tadi (like gedit or notepad) and find the style section where it says <style type="text/css">/* GeSHi (c) Nigel McNie 2004 (http://qbnz.com/highlighter) */ and copy it over to the blog post
4. Find the start of the code (you can do this easily by searching for style="border: 1px dottedand copy it over until the end of the code. This you can recognize by the sequence </div></li></ol>
5. Dan terakhir, tambahkan tag </div> after the part you just copied.
6. Because I use a Blogger template which styles list items in a special way and also restricts the width of the part where the post is displayed, I have to add the following lines to the style sheet:
   

   div.code { overflow: auto; width: 100%; }
   div.code li {
   list-style: decimal outside;
   padding-left: 0px;
   margin-bottom: 0px;
   background: none;
   }
   

   
   dan tambahkan code class tersebut pada bagian awal dari div (to do this go to the start of the part you copied and where it says class="[something]" add code, so that it looks like this: class="[something] code" . Misalnya seperti ini <div class="[css] code"
7. Done

Berikut adalah contoh dari source code yang saya ambil dari Geshi Higlight :

<div class="[css] code" style="border: 1px dotted rgb(160, 160, 160); margin: 0pt; padding: 0pt; white-space: nowrap; font-family: 'Courier New',Courier,monospace; font-size: 110%; line-height: 110%; color: rgb(0, 0, 187);"><div class="head"></div>&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&gt;&lt;!--

google_ad_client = "pub<span class="nu0">-0000000000000000</span>&amp;quot;;
google_ad_width = <span class="nu0">336</span>;
google_ad_height = <span class="nu0">280</span>;

google_ad_format = &amp;quot;336x280_as&amp;quot;;
google_ad_type = "text";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "<span class="nu0">000000</span>&amp;quot;;

google_color_text = "<span class="nu0">000000</span>&amp;quot;;
google_color_url = "<span class="nu0">000000</span>&amp;quot;;


//--&gt;&lt;/script&amp;gt;
&lt;script type=&amp;quot;text/javascript&amp;quot;
src=&amp;quot;http://pagead2<span class="re1">.googlesyndication</span><span class="re1">.com</span>/pagead/show_ads<span class="re1">.js</span>&amp;quot;&gt;


&lt;/script&amp;gt;<div class="foot"></div></div>