Show Your HTML/Javascript and Css Codes In Bulb Lights

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

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ Proceed

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

]]></b:skin>

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

.code1 {

overflow:auto;width:503px;height:200px;

font-family: "Consolas", "Courier New", Courier, mono, serif;

color:#848176;

margin : 15px 35px 15px 15px;

padding : 10px 10px 10px 35px;

clear : both;

list-style-type : none;

background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVYnDfw5C5c_-ewBtdbr-oMH5CAJ4GhT93yQKyhYv9eB40L7CnZst0RJy161JYRIeoKXRUyFymODr0a29_YQOWPFcv1pbiKVr_5P7PtLEVJRW2ahzms4ReRe5GLuNOzPize_ou64DUImY/s320/btsnts-show-codes1.jpg) repeat-y top left;

border : 1px solid #000000;

border-left:20px solid #ccc;

-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px

}

.code1:hover{

background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2owuX3a-Q1I9CeYo0KBEzuXWvXkvVp6vjvIe-0DQ26iz8QPWPoBs4uc0A7_ob7FrZZGOp3LRivewTDdnGlUGvPrmin32WgElVhWEmveOCL8Ajap8G9ilIK1Nbd79EOh3I68nXVXrPcRR/s1600/btsnts-show-codes2.jpg) repeat-y top left;

color:#FEF9BF;

border : 1px solid #000;

border-left:20px solid #ccc;

-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 10px 10px 5px #888888;

}

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

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

<div class="code1">

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

</div>

မွတ္ခ်က္။   ။မိမိတင္သြင္းလုိသည့္ HTML/Javascript Codes ဟာ ထည့္မရတာမ်ဳိး၊ ဆုိရင္ HTML/Javascript Codes ေတြ ကုိ Convert HTML to Escaped HTML လုပ္ေပးဖုိ႔ လုိပါလိမ့္မယ္။ ေအာက္မွာ က်ေနာ္ေပးထာတဲ့ HTML Parser Tool မွာ အရင္ဆုံး မိမိတင္လုိသည့္ HTML/Javascript Codes ေတြကုိ Convert လုပ္ေပးလုိက္ပါ။

Mr ThangMing By Convert HTML to Escaped HTML Tool