ဒီတစ္ခါေတာ့ 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