CSS3 Beautiful Black Color Labels Widget

 

က်ြန္ေတာ္အရင္တစ္ေခါက္တုန္းက Yellow Color Labels Widget ေလးတင္ေပးဖူးပါတယ္။

အခုက်ြန္ေတာ္ Black ေလးထပ္တင္ေပးလိုက္ပါတယ္။သူငယ္ခ်င္းတို႔ၾကိဳက္ႏွစ္သက္မယ္

ဆိုရင္ေအာက္မွာ လုပ္ပံုလုပ္နည္းရွင္းျပေပးထားပါတယ္။Template ကို Blackup လုပ္ထားပါ။

ပထမဆံုး Go to Blogger >> Template >> EditHTML သြားလိုက္ပါ။

အခုျပထားတဲ့ဟာကိုရွာလိုက္ပါ-  <b:skin>....</b:skin> ကိုရွာလိုက္ပါ။

ေအာက္မွာပံုေလးနဲ႔ျပထားပါတယ္.

 

ဟုတ္ျပီ အဲ့ဒီ့ 2 ခုၾကားကိုတစ္ခ်က္ကလစ္လိုက္ပါ။  </b:skin> tag ေလးရဲ႕အေပၚမွာ

ေအာက္ကကုဒ္ကိုကူးျပီးထည့္ေပးလိုက္ပါ။

#Label1 a{float:left; height:18px; line-height:18px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:10px; padding:5px; background: rgb(69,72,77); /* Old browsers */ background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ color:#fff; text-decoration:none; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;} #Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */ background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */} .label-size{line-height:1.5;align:left;} .h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;} #Label1{width:320px;;border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #D8D8D8;}

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

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

လို႔ေရးထားပါတယ္။

Posted in: Blog ဆုိင္ရာနည္းပညာ,ကုဒ္မ်ား