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

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

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

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

►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.com

Posted in: Blogs Post