1. Technical

How to Design Professional Blogger Label Style

Written by Posted on Less than 0 min read
0
Every bloggers want to make professional blog design so each design parts of blog is most important. Labels makes easy navigation for users.

Today, I’m discussed about

How to Design Professional Blogger Label Style for your blog.

When you’re add bogger labels , It’s very ugly and different size and fonts so your blog design looks not good.

How to Design Professional Blogger Label Style
Blogger Label Style

Here , I’m giving a different style blogger labels and tutorial for you.

You want to see full demo of blogger labels then click on DEMO Option.

Customizing blogger labels:

  1. Open your blogger dashboard.
  2. Select your blog.
  3. Select Template option.
  4. Click Edit HTML option.
  5. In the template code find ]]></b:skin>
  6. Now copy the code of any one design from the below given 5 designs.
  7. Paste the copied code just above ]]></b:skin> and save the template
  8. Enjoy your new customized blogger labels.

Blogger Label Style 1 [ DEMO ]

.label-size {
     padding: 4px 8px;

}

span.label-size a {
  z-index:2;
display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
 position: relative;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;

}


/* Button 1 */
span.label-size a{
border: 1px solid #07103e;
  background-color: #2a3faa;
  color: #fff;
  background-image: linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -o-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -moz-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -webkit-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -ms-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
}

/* Button 1a */
span.label-size a:hover,
span.label-size a:active {
 color: #2a3faa;
 background: #fff;
}

span.label-size span {
   padding: 4px 10px;
  border-radius:2px;
  background:#fff;
  color: #0e83cd;
   text-decoration:none;
 position: relative;
    font-weight:bold;
   font-size:16px;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;

}


span.label-size span.label-count {
  opacity:1;   z-index:1;        
  -ms-transform: translatex(-40px); /* IE 9 */
-webkit-transform: translatex(-40px); /* Chrome, Safari, Opera */
transform: translatex(-40px);
  background:#fff;
  color: #0e83cd;

}

span.label-size span.label-count:hover ,
span.label-size:hover span.label-count
{

  opacity:1;z-index:1;
    -ms-transform: translatex(-10px); /* IE 9 */
-webkit-transform: translatex(-10px); /* Chrome, Safari, Opera */
transform: translatex(-10px);
  background:#fff;
  color: #0e83cd;
}

span.label-size span.label-count {
z-index:1;
 cursor: pointer;
 padding: 0px 6px;
 display: inline-block;
 margin: 5px 3px;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
 outline: none;
 position: relative;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;


}


.label-size {
    position:relative;

  display:inline-block;
}

 Blogger Label Style 2 [ DEMO ]

.label-size{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size a{
     text-decoration:none;
     color:#fff;
   text-transform: uppercase;

}

.label-size{
  border: 1px solid #07103e;
  background-color: #2a3faa;
  color: #fff;
  background-image: linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -o-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -moz-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -webkit-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -ms-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
}

.label-size:hover{
  background-color: #3e53c0;
  background-image: linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -o-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -moz-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -webkit-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -ms-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
}

.label-size:active{
   background-image: linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -o-linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -moz-linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -webkit-linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -ms-linear-gradient(top, #07103e 0%, #07103e 100%);
}

.label-size{
  display:inline-block;
  position:relative;
  z-index:5;
  margin-right: 20px;
  margin-bottom: 10px;
}
.label-size span {

  color:#3ced45;
}
.label-size span.label-count{
  padding:2px 5px;
  color:#2a3faa;

  border-radius: 5px;
  background-color: #fff;
  margin-left: 10px;

}

#Label1 {height:210px !important;}

 Blogger Label Style 3 [ DEMO ]

span.label-size a ,.label-size span{
  z-index:2;
 border: none;
 font-family: inherit;
 font-size: inherit;
 color: inherit;
 background: none;
 cursor: pointer;
 padding: 5px 8px;
 display: inline-block;
 margin: 5px 3px;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
 outline: none;
 position: relative;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;

}

span.label-size a:after {
 content: '';
 position: absolute;
 z-index: -1;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

/* Button 1 */
span.label-size a{
 border: 2px solid #fff;
 color: #fff;
  background: #0e83cd;
 box-shadow: 0 1px 3px #999;
}

/* Button 1a */
span.label-size a:hover,
span.label-size a:active {
 color: #0e83cd;
 background: #fff;
}

span.label-size span {
  background:#fff;
  color: #0e83cd;
}


span.label-size span.label-count {
  opacity:1;   z-index:1;        
  -ms-transform: translatex(-40px); /* IE 9 */
-webkit-transform: translatex(-40px); /* Chrome, Safari, Opera */
transform: translatex(-40px);
  background:#fff;
  color: #0e83cd;

}

span.label-size span.label-count:hover ,
span.label-size:hover span.label-count
{

  opacity:1;z-index:1;
    -ms-transform: translatex(-10px); /* IE 9 */
-webkit-transform: translatex(-10px); /* Chrome, Safari, Opera */
transform: translatex(-10px);
  background:#fff;
  color: #0e83cd;
}

span.label-size span.label-count {
z-index:1;
 cursor: pointer;
 padding: 5px 8px;
 display: inline-block;
 margin: 5px 3px;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
 outline: none;
 position: relative;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;


}


.label-size {
    position:relative;

  display:inline-block;
}

 Labels with Number of Posts : Tabbed Categories [ DEMO ]

MyThemeShop like Tabbed menu option to customise your blogger labels categories-


.label-size{
    z-index:2;
opacity:1;
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size a{
     text-decoration:none;
     color:#fff;
   text-transform: uppercase;

}

.label-size{
  border: 1px solid #07103e;
  background-color: #2a3faa;
  color: #fff;
  background-image: linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -o-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -moz-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -webkit-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
  background-image: -ms-linear-gradient(top, #2a3faa 0%, #2a3faa 100%);
}

.label-size:hover{

  background-color: #3e53c0;
  background-image: linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -o-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -moz-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -webkit-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
  background-image: -ms-linear-gradient(top, #3e53c0 0%, #2a43be 100%);
}

.label-size:active{
   background-image: linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -o-linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -moz-linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -webkit-linear-gradient(top, #07103e 0%, #07103e 100%);
  background-image: -ms-linear-gradient(top, #07103e 0%, #07103e 100%);
}

.label-size{
  display:inline-block;
  position:relative;
  z-index:5;
  margin-right: 20px;
  margin-bottom: 10px;
}
.label-size span {   z-index:1;
opacity:0;
  color:#2a3faa;
}
.label-size span.label-count{
     z-index:1;
opacity:1;

}

.label-size:hover span.label-count{

 padding:2px 5px;
  color:#2a3faa;
  border-radius: 50px;
  background-color: #fff;
  margin-left: 10px;

}

#Label1 {height:210px !important;}

 Labels with Number of Posts : Tabbed Categories 1 [ DEMO ]

.label-size{
  background:#0e83cd;
  margin:8px 4px;
  padding:8px 4px;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
}

.label-size:hover{
  background:#fff;
  margin:8px 4px;
  padding:8px 4px;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  background: -webkit-gradient(linear,0 0,0 bottom,from(#3fd599),to(#25b37a));
background: -webkit-linear-gradient(#fff,#f1f1f1);
background: -moz-linear-gradient(#fff,#f1f1f1);
background: -ms-linear-gradient(#fff,#f1f1f1);
background: -o-linear-gradient(#fff,#f1f1f1);
background: linear-gradient(#fff,#f1f1f1);
}

.label-size a{
text-decoration:none;
color:#fff;
}
.label-size:hover a{
text-decoration:none;
color:#0e83cd;
}
.label-size span{
text-decoration:none;
color:lightgreen;  
}
.label-size:hover span{
text-decoration:none;
color:red;
}
span.label-size span.label-count {
    background:#000;
  color:#fff;
 cursor: pointer;
 padding: 4px 8px;
 display: inline-block;
 margin: 4px 8px;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
 outline: none;
 position: relative;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
  text-decoration:none;
  border: 1px solid #e9e9e9;
  border-radius: 3px;

}
  span.label-size:hover span.label-count {
    background:#333;
  color:#fff;

}

  span.label-size span.label-count:hover {
    background:#000;
  color:#999;

}

How to Remove Number of Post Small Brackets from Labels :

Before :

After:

Blgger Labels XML Code:

<b:widget id=’Label2′ locked=’false’ title=’Tags’ type=’Label’>
    <b:includable id=’main’>
  <b:if cond=’data:title’>
   <h2><data:title/></h2>
  </b:if>
  <div expr:class=’&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;’>
    <b:if cond=’data:display == &quot;list&quot;’>
      <ul>
      <b:loop values=’data:labels’ var=’label’>
        <li>
          <b:if cond=’data:blog.url == data:label.url’>
            <span expr:dir=’data:blog.languageDirection’><data:label.name/></span>
          <b:else/>
            <a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
          </b:if>
          <b:if cond=’data:showFreqNumbers’>
            <span dir=’ltr’><data:label.count/></span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values=’data:labels’ var=’label’>
        <span expr:class=’&quot;label-size label-size-&quot; + data:label.cssSize’>
          <b:if cond=’data:blog.url == data:label.url’>
            <span expr:dir=’data:blog.languageDirection’><data:label.name/></span>
          <b:else/>
            <a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
          </b:if>
          <b:if cond=’data:showFreqNumbers’>
            <span class=’label-count’ dir=’ltr’><data:label.count/></span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name=’quickedit’/>
  </div>
</b:includable>
  </b:widget>

Member since

More from admin

VipsPMV1.2
  1. Technology

Affordable and Flexible Project Management Suite

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Written by
  1. Technology

How to Install and Connect to PostgreSQL on CentOS 7

PostgreSQL (pronounced ‘post-gres-Q-L’) is a free, open-source object-relational database management system (object-RDBMS), similar to MySQL, and is standards-compliant and extensible. It is commonly used as a back-end for web and mobile applications. PostgreSQL, or ‘Postgres’ as it is nicknamed, adopts the ANSI/ISO SQL standards together, with the revisions. Pre-Flight Check These instructions are intended specifically […]
Written by
  1. Technical
  2. Technology

CarDekho acquires Ibibo’s automobile site Gaadi.com

Sequoia Capital-backed CarDekho has acquired Ibibo’s automobile site Gaadi.com, reports The Times of India. While the acquisition amount remained undisclosed, the report pegs the deal at $11 million. CarDekho founder & CEO Amit Jain told the publication that both the company will continue to remain independent and operate as separate businesses. He said that this acquisition […]
Written by
  1. Blog
  2. Technical

Grab a free Econsultancy report by completing our APAC mobile marketing survey

Do you want to find out how the mobile marketing industry is developing in Asia Pacific? Are you curious about how brands and marketers are approaching the massive opportunities and challenges presented by mobile, and which channels and strategies are gaining the most investment? Then complete the Econsultancy/MMA State of Mobile Marketing in Asia Pacific […]
Written by
Next
No Comments
Leave a comment
Comments to: How to Design Professional Blogger Label Style

Recent Articles

Good Reads

AMETHYST

Unlock the Power of Gemstones: Discover the Perfect Stones for Positive Energy!

Gemstones have been a source of fascination for centuries due to their unique colors, properties, and potential to influence emotions and energy. In addition to their aesthetic value, gemstones have been highly regarded by many cultures for their alleged ability to attract positive energy and prosperity. This article​ will discuss the ⁤arrangement of different gemstones […]
Written by

Worlwide

VipsPMV1.2

Affordable and Flexible Project Management Suite

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Written by
AMETHYST

Unlock the Power of Gemstones: Discover the Perfect Stones for Positive Energy!

Gemstones have been a source of fascination for centuries due to their unique colors, properties, and potential to influence emotions and energy. In addition to their aesthetic value, gemstones have been highly regarded by many cultures for their alleged ability to attract positive energy and prosperity. This article​ will discuss the ⁤arrangement of different gemstones […]
Written by
bathroom-lighting-ideas

Transform Your Bathroom: Unleashing Its Full Potential with Smart Lighting Ideas

Bathroom lighting may not be a top priority for many homeowners in Singapore, but it can greatly impact our‌ experience in the ⁤space. To achieve optimal ⁤bathroom lighting, there are several factors to consider and tips to keep in mind when⁢ discussing lighting ‌concepts with your interior design‍ firm in Singapore. Why is Bathroom Lighting […]
Written by

Trending

A Walk Through The Tucson Bead Show-665623f6

Turquoise Gemstone Jewelry Collection – Rananjay Exports

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Written by
Reliable Packers and Movers in Navi Mumbai-e7e8f17b

Why have reliable packers and movers in Delhi NCR gained popularity in 2021?

24 March 2020, the evening when the Government of India ordered a nationwide lockdown for 21 days. Because the deadly Coronavirus crept into the world and turned it into a sinking ship, put unforeseen pressures on all of us with its destructive intentions. Soon after, it turned into a giant monster. Omicron, the new variant […]
Written by