Beautiful Colorful CSS3 Labels Widget For Blogger

သူငယ္ခ်င္းတို႔ရဲ႕ Blogger CSS3 Labels Widget မွာအခုဒီဇိုင္းေလးေတြနဲ႔ထားခ်င္ရင္ ေအာက္မွာအဆင့္
ေလးေတြကိုလြယ္ကူစြာနဲ႔ျပထားပါတယ္။ လုပ္ၾကည့္လိုက္ပါ။ Add HTML/JavaScript မွာသြားျပီးထည့္
ေပးလိုက္ရံုနဲ႔အဆင္ေျပပါတယ္။

Here How to Install CSS3 Tag Widget for your Blogger Blog and Make your blog very stylish:

Step:1 

ပထမဆံုး Dashboard > Layout > Add HTML/JavaScript - ကိုသြားျပီးေအာက္ကကုဒ္ကို
ကူးျပီးထည့္လိုက္ပါ။

Step: 2

Past the Following Code in it!

<style> .tags {   zoom: 1; } .tags:before, .tags:after {   content: '';   display: table; } .tags:after {   clear: both; } .tags li {   position: relative;   float: left;   margin: 0 0 8px 12px; } .tags li:active {   margin-top: 1px;   margin-bottom: 7px; } .tags li:after {   content: '';   z-index: 2;   position: absolute;   top: 10px;   right: -2px;   width: 5px;   height: 6px;   opacity: .95;   background: #eb6b22;   border-radius: 3px 0 0 3px;   -webkit-box-shadow: inset 1px 0 #99400e;   box-shadow: inset 1px 0 #99400e; } .tags a, .tags span {   display: block;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } .tags a {   height: 26px;   line-height: 23px;   padding: 0 9px 0 8px;   font-size: 12px;   color: #555;   text-decoration: none;   text-shadow: 0 1px white;   background: #fafafa;   border-width: 1px 0 1px 1px;   border-style: solid;   border-color: #dadada #d2d2d2 #c5c5c5;   border-radius: 3px 0 0 3px;   background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);   background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);   background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);   background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);   -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05); } .tags a:hover span {   padding: 0 7px 0 6px;   max-width: 40px;   -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2); } .tags span {   position: absolute;   top: 1px;   left: 100%;   z-index: 2;   overflow: hidden;   max-width: 0;   height: 24px;   line-height: 21px;   padding: 0 0 0 2px;   color: white;   text-shadow: 0 -1px rgba(0, 0, 0, 0.3);   background: #eb6b22;   border: 1px solid;   border-color: #d15813 #c85412 #bf5011;   border-radius: 0 2px 2px 0;   opacity: .95;   background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);   background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);   background-image: -o-linear-gradient(top, #ed7b39, #df5e14);   background-image: linear-gradient(to bottom, #ed7b39, #df5e14);   -webkit-transition: 0.3s ease-out;   -moz-transition: 0.3s ease-out;   -o-transition: 0.3s ease-out;   transition: 0.3s ease-out;   -webkit-transition-property: padding, max-width;   -moz-transition-property: padding, max-width;   -o-transition-property: padding, max-width;   transition-property: padding, max-width; } .green li:after {   background: #65bb34;   -webkit-box-shadow: inset 1px 0 #3a6b1e;   box-shadow: inset 1px 0 #3a6b1e; } .green span {   background: #65bb34;   border-color: #549b2b #4f9329 #4b8b27;   background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);   background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);   background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);   background-image: linear-gradient(to bottom, #71ca3f, #5aa72e); } .blue li:after {   background: #56a3d5;   -webkit-box-shadow: inset 1px 0 #276f9e;   box-shadow: inset 1px 0 #276f9e; } .blue span {   background: #56a3d5;   border-color: #3591cd #318cc7 #2f86be;   background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);   background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);   background-image: -o-linear-gradient(top, #6aaeda, #4298d0);   background-image: linear-gradient(to bottom, #6aaeda, #4298d0); } </style> <ul class="tags">       <li><a href="http://mm-helperblogger.blogspot.com/">Interface <span>4</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Icon <span>8</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Typography <span>15</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Color <span>16</span></a></li>     </ul>     <ul class="tags green">       <li><a href="http://mm-helperblogger.blogspot.com/">Design <span>23</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Illustration <span>42</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Component <span>108</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Misc <span>12</span></a></li>     </ul>     <ul class="tags blue">       <li><a href="http://mm-helperblogger.blogspot.com/">Infrastructure <span>31</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Application <span>33</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Mobile <span>65</span></a></li>       <li><a href="http://mm-helperblogger.blogspot.com/">Desktop <span>160</span></a></li>     </ul>

Step:3

Congratulations you are done!  စာလံုးအနီနဲ႔အ၀ါေရာင္လင့္ေနရာမွာ မိမိထားခ်င္တဲ့
Labels ေတြရဲ႕နာမည္နဲ႔လင့္ထည့္ေပးရံုပါပဲ။

                                              MM-Helper Blogger

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