​ဘ​ေလာ့​ေပၚ​တင္​တဲ့​ပံု​ေတြ ​ေမာက္​တင္​တာ​နဲ႔ ​ကာ​လာ​ေလး​နဲ႔ ​လန္း​ဆန္း​ေန​ျခင္​လား

​အား​လံုး ​မ​ဂၤ​လာ​ပါ.... ​သည္​နည္း​လမ္း​ေလး​က​ေတာ့  ​ေထြ​ေထြ ​ထူး​ထူး​ေတာ့ ​မ​ဟုတ္​လွ​ပါ​ဘူး ​ဘ​ေလာ့​ေတြ​အ​တြက္ ​သိပ္​ေတာ့​အ​ေရး​မ​ပါ​ေလွ​ပ​မယ့္ ​နည္း​ပ​ညာ​ကို ​စမ္း​သတ္​လို​သူ ​ေလး​ေတြ​အ​တြက္
​စမ္း​သတ္​လို​ပါ​က  ​စမ္း​သတ္ ​ႏိုင္​ေအာင္ ​တင္​ေပး​လိုက္​ျခင္း​ျဖစ္​ပါ​တယ္....​နည္း​က​ေတာ့ ​ဘ​ေလာ့​မွာ ​တင္​လိုက္​တဲ့ ​ပံု​ေလး​ေတြ​ကို ​ေမာက္​ေထာက္​လိုက္​တာ​နဲ႔ ​ကာ​လာ​ေလး​ေျပာင္း​ေစ​တာ ​မ်ိဳး​ေလး​ေပါ့​ေနာ္...

​လုပ္​နည္း​နဲ႔  ​ကုဒ္​ေတြ​ေအာက္​မွာ ​ေလ့​လာ​ၿပီး​စမ္း​သတ္​လိုက္​ပါ​ေနာ္...

​အ​ဆင့္ (၁)  ​အ​ေန​နဲ႔ ​ေအာက္​က​တိုင္း​လုပ္​ေဆာင္​ေပး​လိုက္​ပါ​ေနာ္

►1-  Blogger Singin ​ဝင္​လိုက္​ပါ။
►2-  Dashboard  ​ကို​သြား​လိုက္​ပါ။
►3-  Template    ​ကို​က​လစ္​ပါ..။
►4-  Edit  Html   ​ကို​ဝင္​ပါ..
►5- Ctrl+F  (​သို႔​မ​ဟုတ္) F3  ​အ​ကူ​ညီ​ျဖင့္ ​ေပး​ထား​တဲ့ ​ကုဒ္​ကို ​ရွာ​လိုက္​ပါ။
                     </head>     ​ဆို​တာ​ကို ​ရွာ​လိုက္​ပါ ​ေတြ႕​တာ​နဲ႔ ​သူ႔​အ​ေပၚ​ကပ္​ၿပီး ​ေအာက္​က ​ဇ​ဝား​ထဲ​က​ကုဒ္​ေတြ​ေကာ္​ပီ​ယူ​ထည့္​ေပး​လိုက္​ပါ​ေနာ္....


         <style> /* The container and the image */ div.multi-hover { overflow: hidden; position: relative; vertical-align: middle; width: 100%; height: 358px; line-height: 358px; } div.multi-hover img {width: 100%;} /* The texts that, by default, are hidden */ div.multi-hover span { color: #FFF; font-size: 32px; font-weight: bold; height: 100%; opacity: 0; position: absolute; text-align: center; transition: all 0.3s linear 0s; width: 100%; } /* And this is what will generate the effect */ div.multi-hover span:nth-child(1) { /* right */ background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6); left: 90%; top: 0; } div.multi-hover span:nth-child(2) { /* top */ background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6); left: 0; top: -80%; } div.multi-hover span:nth-child(3) { /* left */ background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6); left: -90%; top: 0; } div.multi-hover span:nth-child(4) { /* bottom */ background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6); left: 0; top: 80%; } div.multi-hover span:hover {opacity: 1;} div.multi-hover span:nth-child(2n+1):hover {left: 0;} div.multi-hover span:nth-child(2n):hover {top: 0;} </style>
 
​ကုဒ္​ထည့္​ၿပီး​တာ​နဲ႔  ​တက္​ပ​လက္​ကို  ​ေဆ့​လို႔​ရ​ပါ​ၿပီ​ေနာ္....

​အ​ဆင့္ (၂)  ​အ​ေန​နဲ႔​က​ေတာ့  ​မိ​မိ​တို႔ ​တင္​တဲ့ ​ပံု​ကို ​ေမာက္​တင္​တာ​နဲ႔ ​ကာ​လာ​ေလး​ေပၚ​ေစ​ဖို႔ ​ပို႔စ္
​တင္​တဲ့​ေန​ရာ​ကို​သြား​လိုက္​ပါ... ​ဦး​စြာ ​မိ​မိ​တို႔ ​တင္​လို​တဲ့  ​ပံု​ကို  ​လင့္​ထုတ္​ထား​ဖို႔​လို​ပါ​မယ္...
www.minus.com   ​မွာ​လည္း ​ပံု​ေတြ​ကို​တင္​ႏိုင္​ပါ​တယ္... ​လင့္​ရ​တာ​နဲ႔ ​မွတ္​ထား​လိုက္​ပါ...

​ကဲ​ပို႔စ္​တင္​တဲ့ ​ေန​ရာ​သြား​ၾက​မယ္....

​မိ​မိ​တို႔ ​ေရာက္​တာ​နဲ႔ ​ပံု​တင္​ဖို႔ ​ကုဒ္​အ​ခ်ိဳ႕​ကို ​ထည့္​ေပး​ရ​ပါ​ော​တ့​မယ္... ​အဲ​ခါ ​သ​တိ​ထား​ရ​မွာ​ပါ  ​ကုဒ္​ေတြ
​မ​ထည့္​မွီ  ​အ​ေပၚ​က​ျပ​ထား​သ​လို  HTML ​ဆို​တာ​ကို​အ​ရင္ ​က​လစ္​လိုက္​ပါ  ​က​လစ္​တာ​နဲ႔ ​ကုဒ္​အ​ခ်ိဳ႕​က်​လာ​မယ္...​က်​လာ​တာ​ေတြ ​ဖ်က္​ၿပီး  ​ေအာက္​က​ေပး​ထား​တဲ့ ​ကုဒ္​ကို ​ထည့္​ေပး​လိုက္​ပါ...

<div class=multi-hover>
  <span>hover right</span>
  <span>hover top</span>
  <span>hover left</span>
  <span>hover bottom</span>
  <img src="​သည္​ေန​ရာ​မွာ ​မိ​မိ​တို႔ ​ထည့္​လို​ေသာ ​ပံု​ရဲ့ ​လင့္​ကို​ထည့္​ေပး​ရ​မည္ ">
</div>

​ကဲ ​အဲ​လို ​ထည့္​ၿပီး​တာ​နဲ႔ ​ပံု​လင့္​ကို ​အဲ​ကုဒ္​ထဲ ​မွာ​ထည့္​ေပး​လိုက္​ပါ ​ၿပီး​တာ​နဲ႔   ​အ​ေပၚ​က HTML ​ေရွ႕​က
Compose ​ဆို​တာ​က​လစ္​လို္​က​ပါ​ေတာ့... ​က်န္​တဲ့​စာ​သား​ေတြ ​ဘာ​ဘာ​ညာ​ညာ​ေတြ ​ဆက္​လက္ ​ေဆာင္​ရြက္​လိုက္​ပါ  ​ၿပီး​တာ​နဲ႔  ​တင္​လိုက္​ေပါ့.. ​ဘ​ေလာ့​ကို ​အဲ​ပို႔စ္​ျပန္​ၾကည့္​လိုက္​ပါ... ​ပံု​ေပၚ ​ေမာက္​ေလး ​ေထာက္​ၾကည့္​လိုက္​ပါ... ​ကာ​လာ​ေလး​နဲ႔ ​လန္း​ေန​ၿပီ....​ေိ​ေိ

​ခု​လို​အား​ေပး​တဲ့​အ​တြက္ ​အ​ထူး​ေက်း​ဇူး​တင္​ပါ​တယ္... ​လို​အပ္​တာ​မ်ား​ရွိ​ပါ​က.. C-Box ​မွာ​ေျပာ​ခဲ့​ၾက​ႏိုင္​ပါ​တယ္... ​အ​တတ္​ႏိုင္​ဆံုး ​ႀကိဳး​စား ​ကူ​ညီ ​ေမ်ွ​ဝ​သြား​ပါ​မည္... ​ဘ​ေလာ့​ခ​ရီး​သည္​ေန​ရာ​ေလး​မ်ား 

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.blogspot.com