Thursday, 28 May 2015

Post တစ္ခုနွင့္တစ္ခုကိုပိုင္းျခားေပးတဲ့ မ်ဥ္းေၾကာင္းေလးထည့္ခ်င္ရင္



ဒါေလးကေတာ့အေရးမၾကီးဘူးဆိုေပမယ့္မိမိဘေလာ့ကိုပိုျပီးလွပေစသလိုပါဘဲ၊ Post တစ္ခု
နွင့္တစ္ခုကိုပိုင္းျခားေပးတဲ့မ်ဥ္းေၾကာင္းေလးေနရာမွာမိမိႏွစ္သက္သည့္ပံုသည္ျဖစ္ေစ ဘာညာ
ေကြ႕ကြေလးထားျခင္ရင္ေပါ့ေနာ္၊တခ်ိဳ႕ဘေလာ့မိတ္ေဆြေတြဆီမွာေတာ့ျမင္ဖူးပါတယ္။ျမန္မာ
စာမေရးတာၾကာျပီမို႕သိပ္အဆင္မေျပေတာ့အားလံုးနားလည္းေအာင္က်ေနာ္နမူနာသံုးျပထားပါတယ္၊
ေရးမွားေျပာမွားရွိရင္လည္းခြင့္လြတ္ၾကလိမ့္မယ္လို႕ေမ်ာ္လင္ပါတယ္။


ေအာက္မွာဥပမာပံုနဲ႕တကြလင့္ခ္ေတြျပထားပါတယ္၊

၁။ Layout.

၂။Edit HTML

ေအာက္မွာအတုိေကာက္ေလးျပထားေပးပါတယ္၊ css ေနရာမွာရွာပါ၊


.post



ေအာက္မွာျပထားပါတယ္
.post {margin: 0 0 40px 0;width: 90%}



ေတြ႕ျပီဆိုရင္အေပၚကအဖြင့္အပိတ္ေလးၾကားမွာေအာက္ကseparator css ေလးေတြထည့္လိုက္ပါ၊
background: url(ဤေနရာမွာမိမိရဲ႕Separator-Image-Urlထည့္ပါ);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;


အနီေရာင္ႏွင့္အဝါေရာင္ကိုေျပာင္းလို႕ရပါတယ္၊ဥပမာ-3.5 (သို႕) 4.5 ေပါ့ေနာ္၊
ေအာက္ကပံုစံအတိုင္ျဖစ္သြားလိမ့္မည္။
.post{
margin: 0 0 40px 0;
width: 90%;
background: url(ဤေနရာမွာမိမိရဲ႕Separator-Image-Urlထည့္ပါ);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

တခုေတာ့သိထားဖို႔လိုအပ္ပါတယ္ဘာလဲဆိုုေတာ့ Blogger Tamplate ဟာလည္းတစ္ခုႏွင့္တစ္ခုမတူပါဘူး။
က်ေနာ္သံုးတဲ့ Tamplate မွာျပထားသည့္အတိုင္းမဟုတ္ပါဘူး၊.post{ ေအာက္က
margin: 0 0 40px 0;
width: 90%

အေပၚက margin:ႏွင့္ width မပါ ဘူးပါ။က်ေနာ္background: url(http://www.imagehost.com/separator.jpg);
ေလးဘဲထပ္ထည့္ေပးလိုက္တာပါ၊



http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxww/s1600/barsnake.gif






http://3.bp.blogspot.com/_JwD5r652h00/SuttjcXA_4I/AAAAAAAAANo/w2BZApq6Jn4/s1600/bar54.gif








http://4.bp.blogspot.com/_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif







http://1.bp.blogspot.com/_JwD5r652h00/Sutti1AMlHI/AAAAAAAAANY/n-pJyLWbbhE/s1600/bar47.gif





http://4.bp.blogspot.com/_JwD5r652h00/SuttiqsszII/AAAAAAAAANQ/raAoX-EHDUY/s1600/astarl7s.gif








http://1.bp.blogspot.com/_JwD5r652h00/Sutu7XMmvBI/AAAAAAAAAOY/8XQyk53329Y/s1600/dividers_129.gif









http://2.bp.blogspot.com/_JwD5r652h00/Sutu7TjXFHI/AAAAAAAAAOQ/IQlWtZrB5SI/s1600/dividers_96.gif





http://3.bp.blogspot.com/_JwD5r652h00/Sutu7DaxOSI/AAAAAAAAAOI/Q3okL8VTVQ4/s1600/clipart-heart-border.jpg









http://3.bp.blogspot.com/_JwD5r652h00/Sutu65IKnaI/AAAAAAAAAOA/UJuKQP29vtg/s1600/chain.gif





http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/s1600/bloodrose.gif







http://2.bp.blogspot.com/_JwD5r652h00/Sutwt4UlPXI/AAAAAAAAAPw/tZ9RY7m1tKA/s1600/stonebar.gif







http://1.bp.blogspot.com/_JwD5r652h00/SutwFSJ2_LI/AAAAAAAAAPo/WMkQ9bAcVn0/s1600/resfiles_sdfp.gif







http://2.bp.blogspot.com/_JwD5r652h00/SutwEnMKk3I/AAAAAAAAAPY/pz3dI5GhTGY/s1600/resfiles_output.php.gif







http://2.bp.blogspot.com/_JwD5r652h00/SutwEayD8dI/AAAAAAAAAPQ/9k10wIhaHjU/s1600/pumpkin-border-hth.gif








http://3.bp.blogspot.com/_JwD5r652h00/SutwEO1pNLI/AAAAAAAAAPI/FAmwFnDEASw/s1600/irish-border4.gif







http://2.bp.blogspot.com/_JwD5r652h00/Sutv3RFLl9I/AAAAAAAAAPA/e7VXY-5er8A/s1600/ivy.gif








http://1.bp.blogspot.com/_JwD5r652h00/Sutv3EVHqdI/AAAAAAAAAO4/jKfcf3u4IJ4/s1600/irish-border1.gif





http://3.bp.blogspot.com/_JwD5r652h00/Sutv3MzdTQI/AAAAAAAAAOw/LRKkTCzKkGA/s1600/frog54.gif








http://4.bp.blogspot.com/_JwD5r652h00/Sutv28LLgLI/AAAAAAAAAOo/3ykBTaQOofw/s1600/flowerbar.gif





http://3.bp.blogspot.com/_JwD5r652h00/Sutv2gVPVII/AAAAAAAAAOg/w1Wh7KancXM/s1600/drawing-separator.gif


အထက္က လင့္ေလးေတြကေတာ့ က်ေနာ့္ရဲ႕ ျမင္ဆရာ  ျဖစ္တဲ့ kp3 ကရွာေဖြ စုေဆာင္းထားတာေလးေတြပါ...

သည္ဆိုဒ္ေလး ျဖစ္ဖို႕ က်ေနာ္ စိတ္ကူးယဥ္ခဲ့တာ ျကာပါျပီဗ်ာ.. စုေဆာင္းထားသမွ်ေလးေတြနဲ႕ ျကိဳးစားထူေထာင္လိုက္ပါျပီ။ က်ေနာ့္ရဲ႕ ျမင္ဆရာ kp-3 ကိုအားက်မိလို႕ပါ။ အားေပးမွဳကိုအစဥ္ေလးစားလွ်က္ပါ။ တုန္ျပန္မွဳေလးတစ္ခုအေနနဲ႕...စကားေလးတစ္ခြန္းဘဲ ခ်န္ခဲ့ရင္ ေက်နပ္ပါျပီ။ ေအာင္ေအာင္(မကစ)

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

ၾကိဳက္ပါသလား+

0 comments:

Post a Comment