The Default blogger's labels widget looks very simple and unattractive. However you can easily customize this blogger widget to make it look very cute. Today, I thought of designing a few elegant girly custom Labels widgets and I finally ended up creating these cute widgets. The best part about these custom labels widgets is that these are created with pure css. No images have been used to create these widgets. As a result, these won't affect the loading time of your blog at all.
Features Of These Cute Cloud Labels Widgets:
- No Images used.
- Created with pure css only.
- Doesn't affect the loading time of your blog at all.
- Light-weight code.
- Supported by all latest major browsers
- Degrades gracefully in lower browsers.
How To Add Custom Labels Widget To Blogger:
First add the Label widget to your blog in cloud form if you haven't added it already to your blog.
For this Go to-Layout->Add a gadget in sidebar->Labels.. Here choose Cloud option instead of List and Click on save button.
First add the Label widget to your blog in cloud form if you haven't added it already to your blog.
For this Go to-Layout->Add a gadget in sidebar->Labels.. Here choose Cloud option instead of List and Click on save button.
To Install this widget, Follow one of the two procedures given:
Step 1: Login to blogger dashboard and select your blog.
Step 2: Select Template option.
Step 3: Click on Customize button.
Step 4: Select Advanced option from the list.
Step 5: Select Add CSS option from the list(the last option in list).
Step 6: Paste one of following codes in the Css text area and click on Apply To Blog button.
OR
Step 1: Login to blogger dashboard and select your blog.
Step 2: Select Template option.
Step 3: Click on Edit HTML button.
Step 4: Prss cntrl+F and Search for ]]></b:skin>.
Step 5: Paste the code above ]]></b:skin>.
Step 6: See the Preview of blog by clicking on Preview button and then click on Save Template button.
Preview
Code
.label-size{position:relative;margin:0;padding:0;}.label-size a{float:left;padding:5px;margin:5px;font-size:15px;}#Label1 a{color:black;font-weight:normal;background:white;border-radius:0px;padding:7px;margin-bottom:10px;text-transform:uppercase;}#Label1 div{background: black;background: linear-gradient(black 50%, white 50%);background: -o-linear-gradient(black 50%, white 50%);
background: -moz-linear-gradient(black 50%, white 50%);
background: -webkit-linear-gradient(black 50%, white 50%);
background-size: 10px 10px;border:1px solid black;}
Preview
Code
.label-size{position:relative;margin:0;padding:0;}.label-size a{float:left;padding:5px;margin:5px;font-size:15px;}#Label1 a{color:white;font-weight:normal;background:#ff99cc;text-transform:uppercase;border-radius:0px;padding:7px;margin-bottom:10px;}#Label1 a:hover{color:white;background:#ffcce6;text-decoration:none;}#Label1 div{background: white;background: linear-gradient(black 50%, white 50%);background: -moz-linear-gradient(black 50%, white 50%);
background: -o-linear-gradient(black 50%, white 50%);
background: -webkit-linear-gradient(black 50%, white 50%);
background-size: 10px 10px;border:1px solid black;}
Preview
Code
.label-size{position:relative;margin:0;padding:0;}.label-size a{float:left;padding:5px;margin:5px;font-size:15px;}#Label1 a{color:white;font-weight:bold;background:#ffc0cb;background:linear-gradient(#ffc0cb, #ffe0e0);background:-o-linear-gradient(#ffc0cb, #ffe0e0);
background:-moz-linear-gradient(#ffc0cb, #ffe0e0);
background:-webkit-linear-gradient(#ffc0cb, #ffe0e0);
text-transform:uppercase;border-radius:0px;padding:7px;margin-bottom:10px;}#Label1 a:hover{color:white;background:#ffc0cb;text-decoration:none;}#Label1 div{background: #ff99cc;background: linear-gradient(#ff99cc 50%, white 50%);background:-o-linear-gradient(#ff99cc 50%, white 50%);
background: -moz-linear-gradient(#ff99cc 50%, white 50%);
background: -webkit-linear-gradient(#ff99cc 50%, white 50%);
background-size: 10px 10px;border:1px solid #ff99cc;}
Preview
Code
.label-size{position:relative;margin:0;padding:0;}.label-size a{float:left;padding:5px;margin:5px;font-size:15px;}#Label1 a{color:white;background:#ffc0cb;text-transform:uppercase;border-radius:0px;padding:7px;margin-bottom:10px;}#Label1 a:hover{color:white;background:#ff99cc;text-decoration:none;}#Label1 div{background:white;background: radial-gradient(black 15%, transparent 16%),radial-gradient(black 15%, transparent 16%);background: -moz-radial-gradient(black 15%, transparent 16%),-moz-radial-gradient(black 15%, transparent 16%);
background: -o-radial-gradient(black 15%, transparent 16%),-o-radial-gradient(black 15%, transparent 16%);background: -webkit-radial-gradient(black 15%, transparent 16%),-webkit-radial-gradient(black 15%, transparent 16%);background-size:30px 30px;background-position: 0 0, 15px 15px;border:1px solid #ffc0cb;}
Preview
Code
.label-size{position:relative;margin:0;padding:0;}.label-size a{float:left;padding:5px;margin:5px;font-size:15px;}#Label1 a{color:white;background:#ffc0cb;text-transform:uppercase;border-radius:0px;padding:7px;margin-bottom:10px;}#Label1 a:hover{color:white;background:#ff99cc;text-decoration:none;}#Label1 div{background:white;background: radial-gradient(#ffc0cb 15%, transparent 16%),radial-gradient(#ffc0cb 15%, transparent 16%);background: -moz-radial-gradient(#ffc0cb 15%, transparent 16%),-moz-radial-gradient(#ffc0cb 15%, transparent 16%);
background: -o-radial-gradient(#ffc0cb 15%, transparent 16%),-o-radial-gradient(#ffc0cb 15%, transparent 16%);
background: -webkit-radial-gradient(#ffc0cb 15%, transparent 16%),-webkit-radial-gradient(#ffc0cb 15%, transparent 16%);background-size:30px 30px;background-position: 0 0, 15px 15px;border:1px solid #ffc0cb;}
So, this was all about how you can add a cute label widget to your blogger blog. Next time, I'll come up with more cute widgets like this. Till then
♥ Keep Blogging ♥
