How To Add CSS Nudge Effect To Blogger Links

အခုတင္လုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ ရွိတဲ့ Links ေတြကုိ Mouse Pointer ေလးနွင့္ထိလုိက္ရင္   Links ေတြ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း နွင့္  မိမိ ရည္ေရြးတဲ့ Links ေတြကုိပဲ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း/ထည့္နည္းေလးပါ။ ဒီနည္းေတြကေတာ့ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ဆုိဒ္ေတြမွာဆုိရင္ အသုံးအမ်ားဆုံးလုိ႔ေျပာရရင္မွားမယ္မထင္ပါဘူး။ ဒါေပမယ့္ မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ အခက္အခဲမရွိေအာင္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္ တကြ Cond လည္းထားေပးပါတယ္။

(၁) Blog မွာရွိတဲ့ Links ေတြအားလုံးကုိ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း........!!

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ Proceed

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

]]></b:skin>

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

a:link {

-moz-transition: all 0.1s ease-in 0s ;

-webkit-transition: all 0.1s ease-in 0s ;

-o-transition: all 0.1s ease-in 0s ;

}

a:hover {

margin-left: 12px;

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

(၂) မိိမိရည္ေရြးတဲ့ Links ေတြကုိပဲ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း........!!

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ Proceed

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

]]></b:skin>

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

.nudg {

-moz-transition: all 0.1s ease-in 0s ;

-webkit-transition: all 0.1s ease-in 0s ;

-o-transition: all 0.1s ease-in 0s ;

}

.nudg:hover {

margin-left: 12px;

}

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

၈။ မိိမိရည္ေရြးတဲ့ Links ေတြကုိပဲ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္ခ်င္တဲ့ Link ကုိ ေအာက္ပါအတုိင္ ထည့္ေပးပါ။

<a class="nudg" href="http://mrthangming.blogspot.com/">Blogger Technology</a>

မွတ္ခ်က္။   ။ http://mrthangming.blogspot.com/ ေနရာနွင့္ Blogger Technology ေနရာေတြမွာ မိမိ လုိခ်င္တဲ့ အတုိင္ ျပဳျပင္ေျပာင္းလဲရပါမယ္။ ဥပမာ_ Link ႏွင့္ Name