We can show our post tags (categories) on blogger by two ways i.e. List and Cloud. Also, we can configure the widget that how many tags we want to be appeared or not.
If you are blogging on blogspot then I think most of you guys are using custom blogger template. Almost every custom template has a unique css customization of showing the labels or categories widget.
Sometimes this customization or css styles don't fulfil our expectation or we just don't like them for a reason.
So, how to deal with the styles of labels and customize them according to ourself? Yes, It's very easy to set css customized labels for blogger.
In this post, I am posting a number of css customized labels (tags) widget to stylify your blog. I hope you will love it.
I don't have all the required CSS skills to design these awesome labels style for blogger. So, I have collected it through the web and after posting them here. Also, I am trying my best to give appropriate credit to their respective designers and authors.
Allright! Lets start. Follow the steps I've mentioned below.
Login to blogger dashboard and select your blog.
Now, Go to Template & Customize (See Screenshot)
Now, click on advanced.
As soon as you click on advanced, a box will appear there.
Now, select any of the below css labels style and copy-paste the css there.
Red CSS Cloud Label Style With Awesome Hover Effect.
.label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; left: 0;
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}
You just have a pick a style according to your template. I hope you could find a favourite from these awesome styles.
Dont forget to share it with your blogger mates as they might also looking for these css customized label widget for blogger.
Having any issues in following the steps? Do let me know via comments and I will be there to assist you. Happy blogging :)
We can show our post tags (categories) on blogger by two ways i.e. List and Cloud. Also, we can configure the widget that how many tags we want to be appeared or not.
If you are blogging on blogspot then I think most of you guys are using custom blogger template. Almost every custom template has a unique css customization of showing the labels or categories widget.
Sometimes this customization or css styles don't fulfil our expectation or we just don't like them for a reason.
So, how to deal with the styles of labels and customize them according to ourself? Yes, It's very easy to set css customized labels for blogger.
In this post, I am posting a number of css customized labels (tags) widget to stylify your blog. I hope you will love it.
I don't have all the required CSS skills to design these awesome labels style for blogger. So, I have collected it through the web and after posting them here. Also, I am trying my best to give appropriate credit to their respective designers and authors.
Allright! Lets start. Follow the steps I've mentioned below.
Login to blogger dashboard and select your blog.
Now, Go to Template & Customize (See Screenshot)
Now, click on advanced.
As soon as you click on advanced, a box will appear there.
Now, select any of the below css labels style and copy-paste the css there.
Red CSS Cloud Label Style With Awesome Hover Effect.
 WIDGET TO STYLIFY YOUR BLOG 2017){kind=link}
0 Comments