How To Show HTML/Javascript Codes In Blogger Posts

ဒီေန႔တင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ HTML/Javascript Codes ေတြကုိ လွလွပပ ေလးျဖင့္ေအာင္ တင္ခ်င္/ထည့္ခ်င္တဲ့ မိတ္ေဆြေတြအတြက္ ေ၀မွ်ေပးလုိက္ပါတယ္။ ျဖစ္နုိင္ရင္ေတာ့ ဘေလာ့ကုိ ကုိယ္တုိင္ေလ့လာၿပီးမွ မိမိတုိ႔ရထားတဲ့ HTML/Javascript Codes ေတြကုိ တစ္ပါးသူေတြကုိ ျပန္မွ်ေ၀ခ်င္တဲ့ အခါမွာ ဒီနည္းကုိ သုံးရင္ပုိအႀကဳိးရွိပါလိမ့္မယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္ တကြ Cond လည္းေပးထားပါတယ္။

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ Proceed

၅။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

]]></b:skin>

၆။ ေတြ႔ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

/*--Code View--------------*/

code {

color: #000099;

font: 108% "Courier new",Courier,mono;

padding: 0 2px;

white-space: nowrap;

}

pre code {

-moz-box-shadow: 0 0 10px #DDDDDD;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ZHQ2-EPVdYJcpy3H7keWUmSCP-DIVVaz9nzoneYztKLaoAJ8gejDqZ_aDQQ0zOzil9tns2ZMDQUBFRLum1_pxmv2yt89eE3s2HnqR6OSQxKMAiKPpKei1ylihDQAc7TFdWb8So4dpjQt/s1600/btsnts_color_background.png") repeat scroll 0 0 #FFFFFF;

border: 2px solid #CCCCCC;

clear: both;

color: #333333;

display: block;

font-size: 12px;

line-height: 15px;

margin: 10px auto 10px 30px;

overflow: auto;

padding: 15px;

white-space: pre;

width: 85% !important;

word-wrap: break-word;

}

code .comment {

color: #888;

}

code .class, code .rules {

color: #ff00ff;

font-size: 100%;

}

code .value,  code .title, code .string {

color: #0000FF;

}

code .tag {

color: #000099;

}

code .keyword {

color: #000099;

}

.html .attribute {

color: #006600;

}

၇။ ထည့္ၿပီးရင္ Save Template ကုိနုိပ္လုိက္ပါ။

၈။ မိမိ ေပၚေစခ်င္တဲ့ HTML/Javascript Codes ေတြကုိ ေအာက္ပါအတုိင္ ထည့္ပါ။

<pre><code>


ဒီေနရာမွာ မိမိ ေပၚေစခ်င္တဲ့ HTML/Javascript Codes ကုိထည့္ပါ။


</pre></code>