စမ္းၾကည့္တာ 4 နာရီေလာက္ၾကာသြားတယ္..။ ဒီလိုေလးေပါ့...။ ကိုယ္တိုင္ Post မွာ ပံုေတြကို mouse ေလးနဲ႔ ေထာက္လိုက္ရင္ info text ေလး Slide Out ေလး ထြက္လာေအာင္ ထည့္တာေလးပါ..။ Css ကုဒ္ေတြကို ]]><b:skin> အေပၚက ထည့္ေတာ့ လဲ working မျဖစ္ css ဖိုင္ကို Hosting တင္ျပီး
<link rel='stylesheet' href='css/style.css'>
</head> ဒီလိုေလး ထည့္ေတာ့ လဲ working မျဖစ္..။
ေနာက္ဆံုးေတာ့ </head> အေပၚက <style>css code</style> ဒီလိုေလးထည့္လိုက္ေတာ့ အဆင္ေျပသြားပါတယ္။ ေအာက္က ပံုေလးက စမ္းျပီးေရးထားတာပါ..။ သူငယ္ခ်င္းမ်ားလဲ စမ္းခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္မွာ code ေလးေတြ ေပးထားပါတယ္...။ သတိထားရမွာက သူငယ္ခ်င္းတို႔ Template နဲ႔ အေပၚ က်ေနာ္ ေျပာခဲတဲ့ နည္းသံုးနည္းထဲက တစ္နည္းနဲ႔ စမ္းလို႔ Working မျဖစ္မွ ေနာက္တစ္နည္းနဲ႔ စမ္းၾကည့္ပါ..။ မစမ္းခင္ေလးေတာ့ မိမိ Temlpate ကို Backup လုပ္ေပးထားပါ။

အဆင္ေျပရင္ Like ေလး တစ္ခ်က္ေလာက္ေတာ့ ေပးသြားပါ

တတ္ႏိုင္သည့္အခ်ိန္တိုင္း တတ္ႏိုင္တာေလးေတြကို မွ်ေဝေနမွာပါ

ေလ့လာရင္ ျပန္လည္ မွ်ေဝျခင္းသာျဖစ္ပါတယ္....တတ္သိလြန္၍ လုပ္ေနျခင္းမဟုတ္ပါ

Css Code

figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
}
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}

.cap-left:before { bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }

html code ကို ေတာ့ post တင္ရာမွာ အသံုးျပဳရမွာ ျဖစ္ပါတယ္

html code

<figure class="cap-left">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>A country road at sunset.</figcaption>
</figure>

<figure class="cap-right">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>Where fairies live.</figcaption>
</figure>

<figure class="cap-top">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>Fall harvest</figcaption>
</figure>

<figure class="cap-bot">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlG8PTvRLiJ2MPgZbvpGjF1HDjrIRUXX8nfegCpA8WFUwalvTm2xTvNMrgGSqvwhjPJTsny5RwucjCDjWt9GWfCNUqI5kUmFkjb_GeHOzXuAKIykPi-7oI1kCcx1u7_Uavb4ansSMvlf9k/s320/b+fly.png" />
<figcaption>The green and pleasant lands of the Shire in Eriador - just West of the Brandywine River and East of the Far Downs.</figcaption>
</figure>

ကိုေအးလြင္

ေမာင္ေအးလြင္

<koayelwin style="-webkit-text-stroke-width: 0px; color: white; font-family: Zawgyi-One; font-size: 80px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: center; text-indent: 0px; text-shadow: rgb(153, 153, 153) 0px 1px 0px, rgb(136, 136, 136) 0px 2px 0px, rgb(119, 119, 119) 0px 3px 0px, rgb(102, 102, 102) 0px 4px 0px, rgb(85, 85, 85) 0px 5px 0px, rgb(68, 68, 68) 0px 6px 0px, rgb(51, 51, 51) 0px 7px 0px, rgb(0, 17, 53) 0px 8px 7px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">ေမာင္ေအးလြင္</koayelwin>

ဒီ အခု အေပၚက Code ေလးေတြက " ေမာင္ေအးလြင္" ေရးထားတဲ့ 3D စတိုင္းေလး ေရးခ်င္ရင္ အသံုးျပဳလို႔ ရေအာင္ ထည့္ေပးလိုက္ပါတယ္...။ Template မွာ ဘာမွ ျပင္စရာမလိုပဲ Post တင္ရာမွာ HTML Tab ကေန ေရးတင္ႏိုင္ပါတယ္...။

font-size: 80px ကို ကို္ယ့္ စိတ္ၾကိဳက္ ျပန္လည္ျပင္ဆင္ႏိုင္ပါတယ္။ ဒီထက္မက အေရာင္ေတြကိုလဲ ျပင္ဆင္ႏိုင္ပါတယ္။
"ေမာင္ေအးလြင္" လို႔ ေရးသားတဲ့ စာသာကိုေတာ့ ကိုယ္ေရးခ်င္တဲ့ စာသားကိုေျပာင္းလဲ ေရးသားႏိုင္ပါတယ္ခင္ဗ်ာ...။ အားလံုးပဲ အဆင္ေျပၾကပါေစ။ ဆက္လက္မွ်ေဝပါဦးမည္..။