Blog Post နဲ႔တြဲတင္တဲ့ Thumbnail ေလးေတြကို ယိမ္းကခိုင္းမယ္

ေလာေလာဆည္ ကၽြန္ေတာ့္ဘေလာ့မွာ သံုးထားပါတယ္

Website ေတြမွာသံုးတဲ့ကုဒ္ေတြကို အႀကံအဖန္လုပ္ထားတာပါ

ဘေလာ့ပို႔စ္ေတြနဲ႔အတူတြဲတင္လိုက္တဲ့ ပံုေလးေတြကို ဘယ္ညာလႈပ္ရွားေနေစမယ့္ နည္းလမ္းေလးပါ

အရင္ဆံုး Blogger ကို Log in ၀င္လိုက္ပါ

Dashboard ကေန Template ကိုသြားပါ

Template ကို Edit လုပ္မွာမို႔ အမွားအယြင္းအတြက္ Backup Template လုပ္ထားပါ



အဆင္သင့္ျဖစ္ရင္ Edit HTML ကိုႏွိပ္ပါ

ပြင့္လာတဲ့ Template ကုဒ္ေတြထဲက ]]></b:skin> ကို လိုက္ရွာပါ ( Template တိုင္းမွာ ရွိပါတယ္
ရွာရခက္ရင္ Ctrl + F ကိုႏွိပ္ၿပီး ရွာပါ )

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

.swing {
 transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 -webkit-transform-origin:50% 0;
 animation:swinging 10s ease-in-out 0s infinite;
 -moz-animation:swinging 10s ease-in-out 0s infinite;
 -webkit-animation:swinging 10s ease-in-out 0s infinite;
}

@-webkit-keyframes swinging {
 0% { -webkit-transform: rotate(0);}
 5% {-webkit-transform: rotate(10deg);}
 10% {-webkit-transform: rotate(-9deg);}
 15% {-webkit-transform: rotate(8deg);}
 20% {-webkit-transform: rotate(-7deg);}
 25% {-webkit-transform: rotate(6deg);}
 30% {-webkit-transform: rotate(-5deg);}
 35% {-webkit-transform: rotate(4deg);}
 40% {-webkit-transform: rotate(-3deg);}
 45% {-webkit-transform: rotate(2deg);}
 50% {-webkit-transform: rotate(0);}
 100% {-webkit-transform: rotate(0);}
}

@-moz-keyframes swinging {
 0% {-moz-transform: rotate(0);}
 5% {-moz-transform: rotate(10deg);}
 10% {-moz-transform: rotate(-9deg);}
 15% {-moz-transform: rotate(8deg);}
 20% {-moz-transform: rotate(-7deg);}
 25% {-moz-transform: rotate(6deg);}
 30% {-moz-transform: rotate(-5deg);}
 35% {-moz-transform: rotate(4deg);}
 40% {-moz-transform: rotate(-3deg);}
 45% {-moz-transform: rotate(2deg);}
 50% {-moz-transform: rotate(0);}
 100% {-moz-transform: rotate(0);}
}

@keyframes swinging {
 0% {transform: rotate(0);}
 5% {transform: rotate(10deg);}
 10% {transform: rotate(-9deg);}
 15% {transform: rotate(8deg);}
 20% {transform: rotate(-7deg);}
 25% {transform: rotate(6deg);}
 30% {transform: rotate(-5deg);}
 35% {transform: rotate(4deg);}
 40% {transform: rotate(-3deg);}
 45% {transform: rotate(2deg);}
 50% {transform: rotate(0);}
 100% {transform: rotate(0);}
}

ၿပီးရင္ေတာ့ Save Template ကို ႏွိပ္လိုက္ပါ

ကဲ .. အဲဒီ Effect ကို သံုးျပပါမယ္
အရင္ဆံုး ကိုယ့္ရဲ႕ပံုကို Blog post မွာ Upload တင္လိုက္ပါ
ပံုေလးတက္သြားၿပီဆိုရင္ HTML mode ကိုႏွိပ္ပါ
HTML page ထဲက အဲဒီတင္လိုက္တဲ့ပံုရဲ႕ လင့္ကို ေကာ္ပီကူးယူပါ
ေအာက္ကပံုကို ၾကည့္ပါ

အဲဒီ ေကာ္ပီကူးယူလာတဲ့ ကုဒ္ကို ေအာက္ကပံုစံအတုိင္း ထည့္သြင္းေပးပါ

<img alt="post-image" class="swing" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs9OIL5t5aSHjzDhiHB6l76ACB4mQSr0SaGn-bogWPKnWhS_BuoqnnHIuGvgsbOebpLQcr-m0zWdzX3lhaVlE-Vs4edgd_HppJVE40uylwO4AlRdOGCGmQN_tkKiBn2VtDQaBaMY23OyU/s1600/add.jpg" "style="animation-delay: 0.8s;-webkit-animation-delay: 0.8s;-moz-animation-delay: 0.8s;animation-delay: 0.8s;"/></center>

အဲဒီထဲက အ၀ါေရာင္နဲ႔ျပထားတာကေတာ့ ေကာ္ပီယူလာတဲ့ ပံုလင့္ပါ
0.8s ဆိုတာေတြကေတာ့ ဘယ္ညာယိမ္းတဲ့ အျမန္ႏႈန္းကို ခ်ိန္ထားတာပါ
အဲဒီပမာဏကို ေလွ်ာ့ခ်လိုက္ရင္ ပိုၿပီးျမန္ျမန္ ယိမ္းမွာပါ
အဲဒီလိုျပင္ဆင္ၿပီးတဲ့ကုဒ္ကို HTML mode ထဲက <div .........  နဲ႔ </div> အထိ အားလံုးနဲ႔ အစားထိုးေပးပါ
ၿပီးရင္ Compose mode ဖက္ကိုျပန္လာၿပီး အဲဒီပံုေပၚမွာ ကလစ္ႏွိပ္လိုက္ၿပီး ဘယ္, အလယ္, ညာ ဆိုၿပီး ပံုကို ႏွစ္သက္တဲ့ဖက္မွာ ထားႏိုင္ပါတယ္

အားလံုးၿပီးရင္ေတာ့ Publish ကိုႏွိပ္လိုက္႐ံုပါပဲ
ဘေလာ့တစ္ခုလံုးမွာရွိတဲ့ ဘယ္ေနရာကပံုကိုမဆို ဒီကုဒ္နဲ႔ပဲ ယိမ္းႏြဲ႕ခိုင္း႐ံုပါပဲ
ကဲ ... ပံုေလးကို ယိမ္းက ခိုင္းလိုက္ၾကပါဦး

နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး