In this post im gonna explain how to add attractive
Black cloud label widget for blogger. So this labels
are neat and nice looking, peoples can find the any
categories easily. Few months ago i published few
post with different style cloud labels with various
colors. If this is not match for you. you can find
best one from below list. If you have any problem
with this tutorial. Just leave a comment or contact me.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
/*-----Custom Labels widget by www.bloggertrix.com----*/ #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;}
7. Now Click Save Template.
You are done...
thanks ;)
ReplyDelete