How to create stylish Labels for Blogger sidebar : Okongeorge.com
Okongeorge | Digital Wealth & Empowerment

Learn and Make Money Online.


Date: - Time:

How to create stylish Labels for Blogger sidebar






Labels serves as categories in Wordpress and are importance for grouping content into different sections, which leads to instilling user experience, reading alternative content, navigation, tag signal to search engines, time on site and possibly Alexa ranking.

In order to create a stylish label for Blogger sidebar, you must had figured out exactly what Blogger Labels are; added labels to posts, and as well added labels in list or cloud into sidebar in blogger

I t is a wish of every blogger on the internet to run a stylish, elegant and beautified weblog that’s standout it competitors, but sadly only few really have what it takes to customized or redesign their blogs using such programming languages like Coding, html, CSS, Javascripts, widgets etc; of which I felt like they’re names in STAR WAR when I first started.

Whether you are blogging on a self hosted site, Wordpress, Tumblr, Blogger etc, you definitely would need an increasing knowledge in html, CSS, php, Javascripts, widgets, etc; reasons because, they inevitable part in the life of an advanced bloggers, webmasters and tech savvy entrepreneurs. And, it’s a simply differentiating factor between pros and quacks. W3School can be the solution.

If you own a Blogger blog as a beginner, intermediary or pro, and would like to add a stylish blogger label to your blogger sidebar, then this article is for you as it doesn’t require that much of tech work than what I will work you through in this article.
You may have head that “content is the king”, that’s true anyway, but a beautiful, well designed and good looking website or blog has a higher decrees of increasing readership and readers retention, especially when such readers are targeted.

No visitor would like to spend time reading a blog with ugly design no matter the content, instead, they would prefers reading it on the competitors websites that are pleasant to the eyes, and offers same or related information. This simply means that, the more decorative and stylish features added to your blog, the more new and targeted visitors will fall in love your with your blog.
 

Integrating cloud label widget for sidebar

1.        Go to Template -> Edit HTML
 
2.           Find this code ]]></b:skin> using CTRL + F.

3.           Copy the code of label style you like among the below codes and thier respective widgets. Make sure you copy and paste any one of your choice immediately before, or above this ]]></b:skin> code.
 
4.           Save Template.


1. 



.label-size {display:inline-block; float:left; padding:7px; font:12px verdana; text-transform:uppercase; margin:0 4px 4px 0;}



.label-size a {color:#fff!important; text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}

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



.label-size:nth-child(1) {background:#ff0000;}

.label-size:nth-child(2) {background:#cf650d;}

.label-size:nth-child(3) {background:#9e0963;}

.label-size:nth-child(4) {background:#f54e67;}

.label-size:nth-child(5) {background:#42ad9d;}

.label-size:nth-child(6) {background:#b3001b;}

.label-size:nth-child(7) {background:#5c3e31;}

.label-size:nth-child(8) {background:#8e4811;}

.label-size:nth-child(9) {background:#ff9900;}

.label-size:nth-child(10) {background:#097054;}

.label-size:nth-child(11) {background:#6599ff;}

.label-size:nth-child(12) {background:#461d7c;}

.label-size:nth-child(13) {background:#666666;}

.label-size:nth-child(14) {background:#00ff00;}

.label-size:nth-child(15) {background:#7c71ad;}

.label-size:nth-child(16) {background:#1eb6ff;}

.label-size:nth-child(17) {background:#898c17;}

.label-size:nth-child(18) {background:#000078;}

.label-size:nth-child(19) {background:#ffcc00;}

.label-size:nth-child(20) {background:#cc3333;}



.label-size:hover {opacity:0.6; -webkit-transition:0.5s; -moz-transition:0.5s; transition:0.5s;}




2.




.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}

.Label a {

    color: #fff;

    text-decoration: none;

}


3.



/* cloud label by www.okongeorge.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

4. 


.Label li:before {
        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);

        border-bottom: 1px solid #145091;

        border-left: 1px solid #145091;

        content: "";

        height: 1.39em;

        left: -0.69em;

        position: absolute;

        top: 0.2em;

        transform: rotate(45deg);

        width: 1.3em;

        z-index: 1;

    }

    .Label li:after {

        background: none repeat scroll 0 0 #FFFFFF;

        border: 1px solid #3F6893;

        border-radius: 4.167em 4.167em 4.167em 4.167em;

        box-shadow: 0 1px 0 #B5D8FF;

        content: "";

        height: 0.5em;

        left: -0.083em;

        position: absolute;

        top: 0.667em;

        width: 0.5em;

        z-index: 9999;

    }

    .Label li {

        background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);

        border-bottom: 1px solid #145091;

        border-radius: 0 0.25em 0.25em 0;

        border-right: 1px solid #145091;

        border-top: 1px solid #145091;

        box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);

        color: #996633;

        float: left;

        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

        font-size: 0.75em;

        font-weight: bold;

        list-style: none outside none;

        margin: 0 0 7px 20px;

        padding: 0.417em 0.417em 0.417em 0.917em;

        position: relative;

        text-decoration: none;

        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

        z-index: 1;

    }




5. 

 



/* cloud label by www.okongeorge.com */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border: 8px inset #0572F8;
background:#0572F8;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
  


6.


.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
.Label li {
    border: 1px solid;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}
.Label a {
    color: #000;
    text-decoration: none;
}
.Label li:hover {
    transform: rotate(5deg);
}


 
Finally, there are vast of cool and colorful widgets for blogger labels on the internet. You can do your personal findings to stumble on best preferable ones. And, most of the codes works well on both mobile and web view, while others only work on web view.





No comments:

Post a Comment

Protected by Copyscape

DMCA.com Protection Status

Widget