How To Add Content Spoiler With Simple Animation To Blogger

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Content Spoiler နွင့္ Simple Animation ေတြကုိ သုံးနည္း/ထည့္နည္းေလးပါ။ အနည္းအားျဖင့္ေျပာရရင္ ဓါတ္ပုံ/Cond/စာသားေတြကုိ Button(ခလုဒ္) ေလးတပ္ၿပီး အဖြင့္/ပိတ္ လုပ္နည္းလုိ႔လည္း ေျပာလုိ႔ရပါတယ္။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္း မ်ားေတာ့မွာပါ။ မသိရွိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ ထပ္မွ်ေ၀ျခင္းျဖစ္ပါတယ္။ ေအာက္မွာ Demo (နမူနာ) သြားၾကည့္လုိ႔ရေအာင္ Link{လင့္(ခ္)} နွင့္ တကြ ထည့္နည္းနွင့္ Cond ေတြလည္း ေပးထားပါတယ္။

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ Proceed

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

</head>

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

<style type='text/css'>

/* animated spoiler CSS by MrthangMing.com */

.spoilerbutton {display:block;margin:5px 0;}

.spoiler {overflow:hidden;background: #f5f5f5;}

.spoiler &gt; div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}

.spoilerbutton[value=&quot;Show&quot;] + .spoiler &gt; div {margin-top:-100%;}

.spoilerbutton[value=&quot;Hide&quot;] + .spoiler {padding:5px;}

</style>

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

၈။ Content Spoiler With Simple Animation နွင့္ ထည့္ခ်င္တဲ့ Cond/text ေတြကုိ New Post ၿပီးရင္ HTML ေနရာမွာ ေအာက္က Cond ကုိ ထည့္ၿပီး လုပ္ေဆာင္ပါ။

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
ဤေနရာမွာ မိမိ လွ်ိဳ႕ဝွက္/ဖြတ္ ခ်င္တဲ့ Cond/Text ထည့္ေပးပါ။
</div></div>

အားလုံးအဆင္ေျပၿပီးဆုိရင္ Publish Button ေလးကုိ နုိပ္ေပးလုိက္ယုံပါပဲ။ အားလုံးအဆင္ေျပနုိင္ၾကပါေစ။