Dazzle Your Readers With Custom Labels in Blogger
Looking for an amazing yet affordable theme for your site? Join Elegant Themes for the all-inclusive price of $39, and you're only paying 50 cents per theme!
Our host today is Kelvin Castelino. If you're interested in getting in front of the readers of Site Sketch 101, check out our guest posting invitation here.
It’s always been known that regular and normal is boring, and I pretty much follow that always throughout my life. Innovation and creativity makes life more fun and exciting, and the turn out becomes beautiful.
Cutting out the philosophy and getting straight to the point, have you wondered, why not change the regular style of the labels that blogger gives, and make it more creative and animated.
Using some of CSS3, I tried to customize my label section in my blog, which you can see in my home page.
How do we do it?
Simple as always.
- Login to your blogger
- Go to Design ->Edit HTML -> and Download Full Template (just as precaution)
- Search for the closing style tag. It should look something like this: </style>
- Just add the below styles immediately above the searched tag, and you’ll have new attractive looking labels just for you.
/*--------------Kel-Logs Labels Styles Starts here----------------*/ .label-size a, a:active, a:visited { color: #FF0000 !important;} .label-size a:hover{ color: #FFFFFF !important;} .label-size { color:#ff0000; display:inline-block; float:none; margin: 2px; padding: 2px 3px; font-family:"Trebuchet MS","Arial","Helvetica",sans-serif; font-style:normal; font-weight:bold; text-decoration:none; background-color:#ec745c; color:#fff !important; -webkit-box-shadow:0 0 1px #999999; -moz-box-shadow:0 0 1px #999999; -o-box-shadow:0 0 1px #999999; box-shadow:0 0 1px #999999; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:-webkit-transform 0.1s ease-in; -moz-transition:-moz-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; transition:transform 0.1s ease-in; border-radius:5px; } .label-size:hover{ color:#fff !important; background-color:#0c92da; -webkit-box-shadow:0 0 20px rgb(0,0,50); -moz-box-shadow:0 0 20px rgb(0,0,50); -o-box-shadow:0 0 20px rgb(0,0,50); box-shadow:0 0 10px rgb(0,0,50); -webkit-transform:rotate(3deg) scale(1.2); -moz-transform:rotate(3deg) scale(1.2); -o-transform:rotate(3deg) scale(1.2); transform:rotate(3deg) scale(1.2); } .label-size-1 { background-color:#ff9f51; -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -o-transform:rotate(5deg); transform:rotate(5deg); } .label-size-1:hover{ background-color:#0c92da; -webkit-transform:rotate(-3deg) scale(1.2); -moz-transform:rotate(-3deg) scale(1.2); -o-transform:rotate(-3deg) scale(1.2); transform:rotate(-3deg) scale(1.2); } .label-size-2 { background-color: #F6FA9C; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg); } .label-size-2:hover{ -webkit-transform:rotate(3deg) scale(1.2); -moz-transform:rotate(3deg) scale(1.2); transform:rotate(3deg) scale(1.2); background-color:#0c92da; } .label-size-3 { background-color:#9ab9e4; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .label-size-3:hover{ -webkit-transform:rotate(3deg) scale(1.2); -moz-transform:rotate(3deg) scale(1.2); transform:rotate(3deg) scale(1.2); background-color:#0c92da; } .label-size-4 { background-color: #CDB99C; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg); } .label-size-4:hover{ -webkit-transform:rotate(2deg) scale(1.2); -moz-transform:rotate(2deg) scale(1.2); background-color:#0c92da; -o-transform:rotate(2deg) scale(1.2); transform:rotate(2deg) scale(1.2); } .label-size-5 { background-color:#9ab9d4; -webkit-transform:rotate(4deg);-moz-transform:rotate(4deg); -o-transform:rotate(4deg); transform:rotate(4deg);} .label-size-5:hover{ -webkit-transform:rotate(2deg) scale(1.2); -moz-transform:rotate(2deg) scale(1.2); background-color:#0c92da; -o-transform:rotate(2deg) scale(1.2); transform:rotate(2deg) scale(1.2); } /*--------------Kel-Logs Labels Styles Ends here----------------*/
- Click on Save Template
You could change the colors or the font. It’s up to you, and if you have any problem, just leave a comment here. If not then lets change this normal, regular stuff, and revolutionize blogging.
Happy Blogging!
Betsy Cross said:
Kelvin.
I’ll search for the again when I have more time, but I also have a question since I’ve never done this before. Do I insert the whole list of labels or highlight, copy and paste just one?
I did download the full template. But how do I get it back if I mess up? LOL!
Label section? I checked out your blog. Are you talking about the font and color of the header?
Sorry! That’s more than one question.
Thanks!
Betsy
Nicholas Cardot said:
Betsy,
I’ll jump in here and help you out a little bit. One method of downloading the template is to simply copy and paste everything you in there into a notepad file and to save that file on your desktop. Then, if the world ends because of a change that you make, all you need to do is copy and paste it back into the template to restore it. You’re basically just creating a backup in case anything goes wrong.
Second, the labels that he’s referring to are the labels at the bottom of his site. If you click through on his name at the top of the article and then scroll to the bottom of his web page, you’ll see a list of ‘tags’ that are all crooked and jagged. It’s really a neat, eye-catching effect. I don’t see any tags on your site. If you had some, this would be an excellent way to mix yours up a little bit.
I hope that answers some of your questions. If not, please let me know what I can do to help.
Noel Addison said:
Haha! Thanks nick for the clarifications.
Kelvin Castelino said:
Hey Betsy, adding to what Nicholas, said, follow the steps as mentioned above, when you have download option to download the whole template, to upload it back, just click upload on the same page, and upload the downloaded file.
Now to see this effect in your blog, you need to ADD WIDGET, add Labels, in that select ALL Labels, show Alphabetically, and then select the labels you want to display, and you got it!
Any queries do temme! Always ready to help you!
Kelvin Castelino recently posted..Master Chef Goa
Jeanie said:
Blog revolution? Sounds rather interesting! I’ll try to use it
Jeanie recently posted..Free TV Channel Video Facebook Template
Kelvin Castelino said:
Hey Jeanie, your site is loaded on WordPress if I am not wrong, this trick is only for blogs on blogger! Sorry!
Kelvin Castelino recently posted..Master Chef Goa
Noel Addison said:
A simple blog is different from a boring one. This post is really helpful to make blogs in blogger look more attractive to magnetize more visitors.
Kelvin Castelino said:
Absolutely
Kelvin Castelino recently posted..Customize Labels in Blogger
ComVia said:
Great Work kelvin,
It’s cool and works well!
Kelvin Castelino said:
Thank you ComVia! But I didnt see you using it anywhere in ur blog!
Krix Francine said:
This is really awesome! I has considered removing the labels widget because they weren’t pretty enough, but then I came across this script and I thought it was pretty nifty. Just dropping by to say thanks and that I’m using it on my blog–you’re properly credited (under the about the blog section) of course! Keep it up!
Kelvin Castelino said:
hmmmm thank you!! checked the label widget, it would be great if you had some more labels of different frequency, meaning a different number of posts tagged under different labels!!
and Crediting part, no idea where is that, i couldn’t find that!
Shanna White said:
I’ve been trying to figure out how to create a custom label for my blog for forever! Thank you so much! I will get on it right away!
Carmen Sanchez said:
This is a great article Kevin. I have been looking for how to create custom label for months now. I knew it had to be easy with the coding. Thanks for the information! I’ll be trying this out today!