How to display the Scripts and Codes in blogger post. To show codes in blogger post in special section.
Bagaimana untuk memaparkan/ mempamerkan Skrip dan code di "blogger post". Memaparkan/ mempamerkan code dalam "blogger post" dalam ruang khas.

Suppose we want to show a simple code like bellow
Katakan kita ingin paparkan/ pamerkan code seperti dibawah
<h1> Related posts </h1>

but it is HTML Code so it will display like bellow
oleh kerana ia adalah code HTML, maka ia akan terhasil seperti dibawah

To avoid this, we show codes in special section and make it friendly to post.
Just follow these steps:

Login to Blogger dashboard
Go to Design Section
Then select Edit HTML tab
Find ]]</b:skin> tag
Replace it with Bellow Code of section

Untuk mengelakkan ini, kita paparkan code dalam "ruang khas" dan jadikan ia boleh dipaparkan.
Ikuti langkah-langkah berikut:

Masuk ke Blogger dashboard
Pergi ke Design
Kemudian pilih tab Edit HTML
Cari tag ]]</b:skin>
Gantikannya dengan code di bawah

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-size:normal;
list-style-type : none;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3j1sWrMU0ct9Wdw-cDyxI4IC-AwHy6vXskHBe_uenK7IkNNiRJhCw5jvczPGd5KiO7tF-Jh4I83OkfM09ZZ6-ObutIs7Vn7LBXLUBsFjbH-vwlzEU25MPjs_bRot_nOR2NESqckHscFg/') no-repeat scroll bottom right #EFFBF5; 
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
]]></b:skin>

Now save your template. While creating any post, If you want to show the special Code in post that CSS code or JavaScript code, what ever may be , Go to Edit HTML tab in Post and create "Div" section and put your code in Div section like bellow and publish your post
Sekarang, simpan templat anda. Semasa menulis/membuat "new post" , Jika anda ingin paparkan/pamerkan "Code" khas dalam "new post" seperti CSS Code atau JavaScript Code , apa yang perlu dilakukan adalah, Pergi ke tab Edit HTML dalam Post, kemudian buat ruangan "Div" dan letakkan kod anda di ruangan "Div" seperti dibawah dan publish-kan post anda.

<div class="codeview">

<!-- Put Your Special code here -->

</div>

IMPORTANT: Before Putting code, Make it friendly to post using these tools:
PENTING: Sebelum memasukkan code, jadikan ianya boleh dipaparkan (make it friendly) dengan menggunakan "tools" berikut:

Postable

Centricle Encode / Decode HTML Entities

a sample preview:
Contoh:

EMBED CODE:
Era FM
<object data="http://ads.era.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/era/era.swf" height="170"
type="application/x-shockwave-flash" width="190">  <param name="quality"
value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="9.0.45.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
</object>
Hitz FM
<object type="application/x-shockwave-flash"
data="http://ads.hitz.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/hitz/hitz.swf" width="190" height="170">
 <param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="9.0.45.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
</object>
IKIM FM
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUVbqQuyUkumDbgz6xU-BI9huL3sPHMUL5Mb4pTiVqIh8lMGI3CqpuHxN-36NSFhTwhsUWCEB7EF5mMlRYFZQuSs-2PjFfTM4m-solPFOaYCus2QNvD_wuuK1jZMTVeXmcUZi-E41tFek/s1600-r/ikim.jpg" width="50"
height="50">
 <embed src="http://cast2.serverhostingcenter.com/tunein.php/oalhadda/playlist.asx"
width="250" height="50" autostart="1" showcontrols="1" showstatusbar="1" volume="0" type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/windows/windowsmedia/download/"> 
</center>
Kedah FM
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
width="350" height="350" src="http://www.um.com.my/tv_channels/malaysia/radio/kedah_fm.asx"
filename="http://www.um.com.my/tv_channels/malaysia/radio/kedah_fm.asx" autostart="True" showcontrols="True"
volume="1000" id="mediaPlayer" displaysize="4" autosize="-1" showstatusbar="True" showdisplay="False" autorewind="True">
Mutiara FM
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
width="350" height="350" src="http://www.um.com.my/tv_channels/malaysia/radio/mutiara_fm.asx"
filename="http://www.um.com.my/tv_channels/malaysia/radio/mutiara_fm.asx" autostart="True" showcontrols="True"
volume="100" id="mediaPlayer" displaysize="4" autosize="-1" showstatusbar="True" showdisplay="False" autorewind="True">
Radio Rodja
<div class="playerbox">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="175"
id="player" width="205"><param name="name" value="player" />
<param name="allowfullscreen" value="false" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars"
value="file=http://live.radiorodja.com:80/;stream.nsv&type=mp3&autostart=false&stretching=exactfit&image=htt
p://www.archive.org/download/JwPlayer_978/rodja.gif&showeq=true" />
<param name="src" value="http://www.archive.org/download/JwPlayer_978/player.swf" />
<embed id="player2" type="application/x-shockwave-flash" src="http://www.archive.org/download/JwPlayer_978/player.swf"
flashvars="file=http://live.radiorodja.com:80/;stream.nsv&type=mp3&stretching=exactfit&autostart=false&sho
weq=true&image=http://www.archive.org/download/JwPlayer_978/rodja.gif" allowscriptaccess="always"
allowfullscreen="false" name="player2" height="175" width="205"></embed></object>
RADIO RODJA - CERAMAH SETIAP HARI JAM 11:30PM</div>
Sinar FM
<embed src="http://ads.sinar.fm/inc/app/shared/dvrplayer/capsules/sinar.swf" quality="high" bgcolor="#000000" width="400"
height="63" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
THR Gegar
<center>
<object data="http://ads.thr.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/gegar/gegar.swf" height="170"
type="application/x-shockwave-flash" width="190">

            

            <param name="quality" value="high">




            <param name="wmode" value="transparent">


            <param name="swfversion" value="9.0.45.0">


            <param name="expressinstall" value="Scripts/expressInstall.swf">


</object>
<a href="http://get.adobe.com/flashplayer/" target="_"blank""><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bwmaefIW47F_BoF7_WSTrbJai1a8Q5c_hskzHK2KYqGuvxXr8T0ke8dLt_E-hWB2ao8ydfHDS_ZNsLpBOtoxBzv24Z9gW7lrNfwIP-p5y2yDQ9AjHhB5HanQFCtgV9I13dhhyIGlA_0/s1600-r/flashplayer.PNG" /></a>
</center>
Xfresh FM
<center> <iframe frameborder="0" scrolling="no" src="http://www.xfm.com.my/images/Capsule/xfm.swf" style="height: 120px;
width: 180px;"></iframe>
<a href="http://get.adobe.com/flashplayer/" target="_"blank""><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bwmaefIW47F_BoF7_WSTrbJai1a8Q5c_hskzHK2KYqGuvxXr8T0ke8dLt_E-hWB2ao8ydfHDS_ZNsLpBOtoxBzv24Z9gW7lrNfwIP-p5y2yDQ9AjHhB5HanQFCtgV9I13dhhyIGlA_0/s1600-r/flashplayer.PNG"></a>
</center>

a sample preview 2:
Contoh 2:

<pre><code class="css" data-result="[object Object]" data-second_best="[object Object]">.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-size:normal;
list-style-type : none;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3j1sWrMU0ct9Wdw-cDyxI4IC-AwHy6vXskHBe_uenK7IkNNiRJhCw5jvczPGd5KiO7tF-Jh4I83OkfM09ZZ6-ObutIs7Vn7LBXLUBsFjbH-vwlzEU25MPjs_bRot_nOR2NESqckHscFg/') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
]]></b:skin></code></pre>

An alternatif way:
Cara alternatif:

Copy the code into your NOTEPAD!
COpy kode dan pastekan ke dalam notepad
Use Edit->Replace (or Ctrl+F) and in find all the < and replace them with & l t ; (delete the spaces between the characters, without spaces you would just see another < here)
Use Edit->Replace (or Ctrl+H) and in find all the > and replace them with & g t ; (delete the spaces between the characters, without spaces you would just see another > here)
Cari "<" dan gantikan semuanya dengan " & l t ; " dan cari ">" dan gantikan semuanya dengan" & g t ; "(buang space)
Copy the code from NOTEPAD into the Blogger post
And you are done
Setelah habis tukar semuanya, copy kode dan pastekan terus dalam blogger post dan selesai

What have you done? The & l t ; is another way of telling the browser to shov a <.

" & l t ; " adalah cara untuk memberitahu browser untuk pamerkan ">"

Simple!