Blogger Default Lebal ko Css Code Se Stylish kaise banaye – 8 Code

Blogger Blog me 8 Stylish Lebal widget kaise add kare

जिस तरह Se wordpress me Category होती है उसी तरह Se blogger me lebal होते है wordoress Me plugin की मदद Se हम कुछ भी कर सकते है but Blogger पर बने ब्लॉग me ऐसा नहीं होता है Blogger ब्लॉग me जो lebal होता है वो सिंपल होता है जो बेकार Sa दिखता है और आपको तो मालूम ही है की जिस ब्लॉग का design बकवास हो उस पर विजिटर एक बार विजिट करने के बाद दुबारा विजिट बिलकुल भी नहीं करना चाहते

Blogger-category-design-kaise-kare

अपने ब्लॉग के हर –  एक widget का design कुछ अलग रखे जिससे विजिटर को आपके ब्लॉग mind me फिट हो जाये आज के इस आर्टिकल मे हम ऐसे ही एक widget की बात कर रहे है जो की सभी ब्लॉग मे होते है Widget का नाम है Lebal अब बात आती है की ब्लॉगर मे जो डिफ़ॉल्ट lebal होती है वो Simple Sa दिखता है इसे Design कैसे किया जाये Design किया जा सकता है but इसके लिए Coding की Knowledge होना जरुरी है but सभी को Coding की knowledge नहीं होती है ऐसे मे उन्हें third party द्वारा Create किया गया Coding की मदद लेनी पडती है

(adsbygoogle = window.adsbygoogle || []).push({});

ऐसे ही third party द्वारा Create किया गया Css Code मै यहाँ दे रहा हूं जिससे आप अपने ब्लॉग के lebal widget को Stylish बना सकते है जिससे आपके ब्लॉग का design भी अच्छा हो जाएगा और विजिटर आपके ब्लॉग पर हमेशा विजिट करना चाहेंगे मैंने यहाँ 8 Css Code दिया है कौन Css code add करने पर ब्लॉग मे कैसा दिखेगा वो इमेज मे देख सकते है सभी Code मैंने टेस्ट किया है और सभी working है सभी Code का Original Image है जिससे आपको Lebal Stylish बनाने मे कोई परेशानी ना हो जिस Image का स्टाइल आपको पसंद आए उस का Code अपने ब्लॉग मे use कर सकते है

Blog me 8 Stylish Lebel Widget kaise add kare

Step.1 First आप नीचे दिए गए Css Code को Copy करें जो Lebal Style आपको पसंद आए

Code 1

Lebal-css-code-1
<style>
.Label a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #7FBF4D;
background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
border-bottom-right-radius: 30px;
border-color: #63A62F #63A62F #5B992B;
border-image: none;
border-style: solid;
border-top-left-radius: 30px;
border-width: 1px;
box-shadow: 0px 1px 0px 0px #96CA6D inset;
color: #FFFFFF;
float: left;
font: 14px verdana;
height: 18px;
margin-bottom: 9px;
margin-left: 10px;
padding: 10px;
position: relative;
text-decoration: none;
transition: all 0.5s ease-in-out 0s;
}

ये भी पढ़े..  शुभरात्रि सन्देश हिन्दी मे Good Night शायरी Hindi me

.Label a:hover {
background: none repeat scroll 0% 0% orange;
border-radius: 0px 30px 0px 30px;
border: 1px solid orange;
text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
margin: 0px;
padding: 0px;
position: relative;
}
.Label li:hover {
transform: rotate(5deg);
}
.Label li {
float: left;
font-size: 116%;
list-style: none outside none;
transition: all 0.3s ease 0s;
}</style>

Code, 2

Lebal-css-code-2
<style>
.label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: ‘Helvetica Neue’, helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
 
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
    color: #996633;
    border: 1px solid #DDA13C;
   
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#eeb14b’, endColorstr=’#cc912d’,GradientType=0 );
}

.label-size a:before  {
    content: ‘2022’;
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
   
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}

.label-size a:hover {
    text-decoration: none;
   
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f0b756′, endColorstr=’#d6a044′,GradientType=0 );</style>

(adsbygoogle = window.adsbygoogle || []).push({});

ये भी पढ़े..  Image lazy Loader Script Blogger blog me Kaise add kare - Image lazy loader script blogger blog how to add

code 3

Lebal-Css-code-3
<style>
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}</style>

Code 4

Lebal-css-code-4
<style>
.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:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-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:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}</style>


Code 5

Lebal-Css-code-5
<style>
.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; }</style>

Code 6

(adsbygoogle = window.adsbygoogle || []).push({});

Lebal-css-code-6
<style>
.label-size
{
position:relative;
margin:0;
padding:0;
}
.label-size a
{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom:9px;
margin-left:20px;
background:#2aa4cf;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
padding:0 10px 0 12px;
}
.label-size a:before
{
content:””;
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after
{
content:””;
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover
{
background:#555;
}
.label-size a:hover:before
{
border-color:transparent #555 transparent transparent;
}</style>

Code 7

Lebal-css-code-7
<style>
.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
}</style>

code 8

Lebal-css-code-8
<style>
.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:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-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:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
</style>

Code Copy करने के बाद इसे theme me embed / add करना है मैंने पहले ही ऊपर बताया है की Ye Css Code है और Css Code को theme मे 3 तरीका Se Embed किया जा सकता है मैं यहाँ आपको Simple तरीका बता रहा हूं जिसमे आपको theme को edit करने की बिलकुल भी जरूरत नहीं है क्योंकि कई सारे न्यू ब्लॉगर को theme editing की knowledge नहीं होती है ऐसे मे theme मे गलत editing आपके ब्लॉग को design की जगह बर्बाद कर देगी लेकिन मै जो तरीका यहाँ बता रहा हूं वो बहुत ही easy है

ये भी पढ़े..  Free seo friendly templete xml ke.liye contact kare. - HindivHelp

(adsbygoogle = window.adsbygoogle || []).push({});

Lebal Css Code ko Blog me kaise add kare

Step.2 Blogger dashboard me जाये Layout पर Click करें उसके बाद Sidebar मे add a gadget पर click करें

Step.3 अब एक न्यू window open होगा उसमे Html/javaScript पर Click करें

Step.4 फिर Se New Window open होगा Tittle ko खाली छोड़ दे और नीचे वाले box मे lebal का Css code peste करें Code peste करने के बाद Save पर Click करें

Save पर Click करते ही आप वापस Blogger dashboard मे आ जायेंगे Blogger dashbord मे Save Arrangent पर Click करें अब अपने ब्लॉग को open करके देख सकते है आपके ब्लॉग का Lebal स्टाइलिश हो चूका है

उम्मीद करता हूं की आपको हमारा ये आर्टिकल आपको पसंद आया इस पोस्ट Se related किसी भी प्रकार का सवाल & जवाब हो तो नीचे कमेंट Box मे जरूर लिखें and इस पोस्ट को Social media मे जरुर Share करें

We are sorry that this post was not useful for you!

Let us improve this post!

About Mr Manish

Blogger Default Lebal ko Css Code Se Stylish kaise banaye - 8 Code 1www.hindivhelp. ब्लॉग पर हिन्दी भाषा मे, पैसा कमाए इंटरनेट से, इंटरनेट टिप्स , नया ब्लॉग स्टार्ट करे , की जानकारी share की जाती है Learn More
Twitter | Facebook | Linkedin | Pinterest

| Website

4 thoughts on “Blogger Default Lebal ko Css Code Se Stylish kaise banaye – 8 Code”

    • अगर आप इसकी बात कर रहे है यहाँ देखे तो ये Css code se किया गया है इसके लिए मैंने कोई plugin इस्तेमाल नहीं किया है

  1. Bro
    yaha is website par jo paragraph me design staylish me jis tarah likha he vaisa muje likhana he. http://famousstatus.com/hindi-status-for-whatsapp/
    Aisi paragraph design WordPress me kaise banaye
    इसके लिए कोई pulgin आता हे या css code डालना होता हे
    Please muje pulgin ka name bataiye ya css code dijiye

    Please help….

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.