Before you lot larn started amongst this tutorial, nosotros would recommend you lot to larn through how to add together labels inwards your posts thence that you lot tin dismiss sympathise amongst a lot to a greater extent than authority.
Display All Labels amongst Post counts inwards Blogger:
Some pop sites tend to display all labels on their fault or non works life pages to render users a few laid upwards of options that they tin dismiss utilization to detect a relevant topic. However, around sites display them inwards either sidebar or footer thence here’s how you lot tin dismiss display all labels amongst ship service counts inwards a cast of label cloud:Go to Blogger >> Add a gadget >> Labels >> (Select label cloud inwards types) too salve the widget. Now it depends on you lot where you lot would similar to house it either inwards the sidebar or footer.
Now you lot mightiness meet a label cloud on your site afterward next the inwards a higher house pedagogy but it may non last equally pretty or attractive equally you lot mightiness last looking for thence add together the next CSS coding inwards your template merely inwards a higher house the pare tag.
/*--- MBL Custom Label Cloud With CSS3 --- */
.Label a {
padding-left: 20px;
background: #000;
padding: 0 20px;
color: #fff!important;
border-radius: 100px;
-moz-border-radius: 100px;
height: 32px;
line-height: 32px;
text-transform: uppercase;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 14px;
}
.Label a:hover {
color: #000 !important;
background: #ff0;
}
You tin dismiss e'er customize the CSS according to your likings, here’s a demo of what you lot volition meet afterward applying the inwards a higher house code inwards your template.

Styling Labels inwards your Posts Meta Information:
The bulk of Blogger templates comes amongst a nicely mode ship service information meta information that displays labels that you lot get got tagged your ship service amongst inwards ship service editor. However, around one-time templates don’t get got this functionality or if they do they are non attractive anyway, or you lot may similar to mode them differently.The rattling starting fourth dimension matter you lot demand to do is to accept tending of which CSS Class or ID that is been used past times your blogger template to display labels. You tin dismiss utilization Google Chrome’s inspect chemical component to figure that out. Right click on the label too choose “Inspect elements” this volition opened upwards up a window at the bottom of your covert merely equally it is shown inwards the screenshot below:

.meta_categories {
float: left;
margin-bottom: 10px;
text-transform: uppercase;
width: 100%;
font-size: 14px;
}
.meta_categories a {
text-decoration: none;
}
This is the destination lawsuit of what you lot volition meet on your site. However, you lot tin dismiss customize it according to your likings.

No comments:
Post a Comment