မိုးေကာင္းကင္ ေဖာင္းျပင္ရဲ့ ဆိုက္ေလးပါဘဲ ေပါ့ပါးသြက္လက္သြားေအာင္
ျပဳလုပ္ထားတယ္။ ေဘးရန္ကင္းေအာင္ စၿပိဳးေထာင္ထားတယ္ဆိုေပါ့ေတာ့

Monday, May 20, 2013

Blog မ်ားအတြက္ CSS Cloud Label Style

ဒီတစ္ခါေတာ့ Blog ေလ့လာေနတာမိတ္ေဆြမ်ားအတြက္ Cloud Label Style လုပ္နည္း ေလးတင္ေပး လိုက္ပါတယ္။ ကို၀င္းထြဋ္တင္ထံမွ ကူးလာတာေလးေပါ့..။


ကိုယ့္ရဲ႕ Blog ထဲ့ကို Log in ၀င္ျပီးအထက္ပါျပထားတဲ့ပံုအတိုင္း Template ကိုႏိုပ္ပါ။
Edit HTML ကိုႏိုပ္ျပီး Ctrl + F အကူအညီနဲ႕ ]]></b:skin> ကိုရွာပါ၊ေတြ႕ျပီဆိုရင္

]]></b:skin> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ပါ

/*-----Custom Labels Cloud widget by www.bloggertrix.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

ျပီးရင္ Save Template ကိုႏိုပ္ပါ၊ Label မွာ ေအာက္ပါေရြးထားတဲ့အတိုင္းေရြး
ေပးပါ၊ အဲဒီ setting မဟုတ္ရင္အထက္ပါျပထားတဲ့ပံုစံေပၚမွာမဟုတ္ပါဘူးဗ်ာ


အားလံုးအဆင္ေျပပါေစဗ်ာ.......
စလုပ္ကာစမိတ္ေဆြမ်ားအတြက္အၾကံေပးခ်င္တာကေတာ့ကိုယ့္ Blog နဲ႕ Tamplate တူ
တဲ့ အရံ Blog တစ္ခုမွာေသခ်ာနားလည္ေအာင္စမ္းသပ္ျပီးမွ ကိုယ့္ Blog မွာအသံုးခ်ပါ 

ဒီေနရာက ကူးလာတယ္
http://winhtuttin.blogspot.com/2013/01/blog-css-cloud-label-style.html

0 comments:

Post a Comment