[GUIDE] WIDGETS: CUSTOMIZE BLOGGER LABEL CLOUD V1


Tutorial Modifying Category Labels For Blogger

In this guide I will demonstrate how to turn the default (and boring) random cloud 'label' display into neat little blocks. Despite what I first thought when entering the scary looking world of Blogger's backroom, the TAG or CATEGORY widget can be customised with ease.

Here is how to customise the Blogger's label widget, we will be editing some CSS code so take care when copying and pasting the code.

Navigate to the layouts section:

Login to blogger > your blog > then select Layouts

Add a gadget > choose Labels

Inside the settings make sure you choose the cloud display.

Edit html > Proceed

CSS 'Labels' Settings Code.

Put this CSS code in the CSS's area of the script, or if you already have one, just change the perspective tag.



.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}

.label-size a:hover {
text-decoration: none;
}

Customising Labels Cloud in Blogger

Another option we can choose is whether to display a maximum amount of Labels. This gives us an element of control over what is displayed on the homepage, keeping it neat and to the point. Helping our readers get to what they need, faster.





Already had styled labels?

If you have Label styles already applied to your website you might already have code similar to the code below. If so just carefully replace it with the code listed below. 
The only tags you need for this style are 

.label-size
.label-size:hover
.label-size a
.label-size a:hover

Copy the code in and delete any additional or duplicate tags that might appear.

Comments

Post a Comment

Popular posts from this blog

The Sims 4" Walkthrough and Guide to Exploring Space

Image
TheSims.com Open spaaaaaaace!  The Sims 4  has some new horizons to explore, and one of them is the infinite majesty of the universe. (Granted, you do so via text boxes, but it’s better than nothing.) It is entirely possible to send your sims up into space on a regular basis, and doing so can yield up some decent rewards… but, at the very least, you’re gonna have to shell out some major dough for the honour. Space exploration requires a rocket, which can be purchased and built for a mighty $6,000 total (assuming you’ve purchased the Steampunk Flyamajig - Astronauts who have specialized may purchase one of two other rockets instead). Each time the rocket crashes, you’ll have to rebuild it for another $1,000, so, yeah. Pricey. Constructing a rocket also unlocks the Rocket Science skill, the levels of which allow your sim to upgrade various parts of the rocket… as well as fly it more capably, resulting in fewer crashes. The upgrade options on your rocket, once your sim reaches le...
Read more

How to Play Emulate Old Pokemon Games on Your Android Phone

Image
Here's how to play Pokémon games on Android! It's easy to relive your favorite games and take them with you anywhere. Pokémon Go took the world by storm, attracting new players and instilling a powerful feeling of nostalgia in others. This is in no small part thanks to the title featuring the original set of creatures from Pokémon Red and Blue that debuted way back in 1998. While there are Pokémon games for Android, many of the mobile games don't have the same feel as the originals. If you're missing some of the old Pokémon games, don't despair. It's actually quite easy to play them on your Android phone or tablet today. Here's how. Which Pokémon Games Are Playable on Android? There's no one-size-fits-all Pokémon emulator, but everything from the original Game Boy games to the Nintendo DS titles are available to emulate on Android. That includes: Game Boy (GB): Red, Blue, and Yellow Game Boy Color (GBC): Gold, Silver, and Crystal Game Boy Advance (GBA): ...
Read more

[1-5] of 53 Ultimate 90s Toys That Every 90s Kid Remembers

Image
The 1990s might have had some terrible fashion crazes and music, but we certainly had some incredible games, gadgets, and iconic 90s toys. Collectables were the key to playground success; we were obsessed with hoarding and trying to protect our stash from other players in tense-games of chance. There’s no wonder so many of these things are worth thousands now! From foil-packed wonders picked up from newsagents to some of the most popular Christmas toys our little minds went crazy for, this list of the Top 90s Toys will take you for a trip down memory lane, and then over to eBay where you can buy, collect, and trade them all over again! 1. Tamagotchi  CHECK PRICES ON EBAY First up on our list of 90s toys is the  Tamagotchi . If you were a kid in the late nineties and didn’t have a Tamagotchi, then it’s safe to say that you really missed out. These miniature digital pets were completely addictive and were the first thing on my mind as I rushed through the door from school. Keepi...
Read more