Call Yangonthar Phone Number: 083-111-8534(thai)

Convert Your Blogger Label Tags with CSS3 Style


 သူငယ္ခ်င္းတို႔ရဲ႕ Blog Lables ေတြကိုအခုလို CSS3 Style ေလးနဲ႔ထားခ်င္တယ္ဆိုရင္
ေအာက္မွာဘယ္လိုလုပ္ရလဲဆိုတာအေသးစိတ္ရွင္းျပထားပါတယ္။
ပထမဆံုး မိမိတို႔ရဲ႕ ဘေလာ့စ္ကေန Template ကိုသြားလိုက္ပါ။
ျပီးရင္ Edit Html ထဲကိုႏွိပ္ျပီး၀င္လိုက္ပါ။ အေရးၾကီးတာက မိမိ Template ကိုအရင္
BackUp လုပ္ထားပါ။ျပီးရင္.. Ctrl+f ႏွိပ္ျပီးရွာ။ မ်က္စိအားေကာင္းရင္ေတာ့ ဒီတိုင္းရွာပါ။
 ]]></b:skin>  ဆိုတာေတြ႔ရင္ သူ႔အေပၚမွာ ေအာက္ကကုတ္ကိုကူးျပီး ထည့္ေပးလိုက္ပါ။
တစ္ခ်ိဳ႕ Templates ေတြမွာ ဒီလိုျဖစ္ေနတတ္ပါတယ္ </b:skin>...</b:skin>  ဒီလိုျဖစ္ေနရင္ အဲ့ဒီ့ 2ခုၾကားမွာ
ကလစ္တစ္ခ်က္ႏွိပ္လိုက္ပါ။ ဖြက္ထားတဲ့ DATA ေတြေပၚလာပါလိမ့္မယ္။


ခုနကရွာမေတြ႔တဲ့   ]]>< /b:skin> ကုဒ္ေလးေပၚလာပါျပီ။ အဲ့ဒီ့ကုဒ္ေလးရဲ႕အေပၚမွာေအာက္ကကုဒ္
ကိုကူးျပီး Paste လုပ္လိုက္ပါ။
label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}


။ျပီးရင္ေတာ့ Save Template ေပါ့ေနာ္။
  ရန္ကုန္သား(နည္းပညာျမိဳ႕ေတာ္) http://mm-knowledge.blogspot.com
အားလံုးအဆင္ေျပမွာပါ။ ေနာက္ထပ္ Blog နဲ႔ပတ္သက္တဲ့ဒီလိုပိုစ္႔မ်ားကို က်ြန္ေတာ့္

ဘေလာ့စ္ရဲ႕ "လိုခ်င္တာဒီမွာရွာ" ဆိုတဲ့ Lable ေခါင္းစဥ္ေအာက္မွာ" BLOG နည္းပညာ "
လို႔ေရးထားပါတယ္ ။

0 comments:

အဆင္ေျပတယ္ဆိုရင္ေၾကာ္ျငာေလးကလစ္ခဲ့ဖို႔မေမ့လိုက္ပါနဲ႔သူငယ္ခ်င္း..ေိခိးD

အဖြဲ႔၀င္ခဲ့ဖို႔ဖိတ္ေခၚပါတယ္

    Featured Post