Wednesday, 12 October 2016

Stylish Label Widget Ko Blogger Me Kaise Add Karte Hai (Colorful)

Posted by ajay
 BlogSpot Plateform पर हम अपनी post को categories करने के लिये labels का इस्तेमाल करते हैं क्यूंकि BlogSpot मे WordPress की तरह Category select करने का option नही होता | और जो labels हम अपने blog पर show करते हैं उनका look ज्यादा attractive नही होता | और blog के ugly look के कारण हम अपने loyal readers को खो देते हैं | लेकिन stylish label widget को blog में add करके हम इस समस्या को कुछ हद तक हल कर सकते हैं |

क्यूंकि इनका colorful look visitor को अपनी तरफ attract कर सकता है , और शायद वो हमारे blog label पर क्लिक करके कुछ समय और spend करे | खासकर entertainment blog या website के liye stylish label widget का इस्तेमाल करना बहुत अच्छा रहता है |


Stylish Label Widget Ko Blogger Me Kaise Add Karte Hai

जब भी हम अपने Blogger blog पर कुछ extra feature add करना चाहते हैं तो सबसे बड़ी problem आती है template को edit करने की क्योंकि blogger पर widget बहुत ही कम हैं और जो widget उपलब्ध हैं  उनका इस्तेमाल करके हम अपने blog पर केवल simple change ही कर सकते हैं | और यदि हम अपने blog पर कुछ extra बदलाव चाहते हैं तो उसके लिये css और html को edit करना पड़ता है जिसको कोई भी थोड़ी सी practice के बाद आसानी से कर सकता है |

यहाँ पर भी हम css code को template में edit करेंगे , तो चलिए शुरू करते हैं --

STEP 1. अपने BlogSpot Blog के Dashboard में जाएँ | वहां से layout पर क्लिक करें |

STEP 2. Layout पर click करने के बाद जो window खुलेगी वहां पर आपको Add-a-Gadget का option दिखाई देगा उस पर क्लिक करें |

STEP 3. आप जैसे ही Add a Gadget पर क्लिक करते हैं , आपको blogger के सभी widget की एक लिस्ट दिखाई देगी जहा से हमे Labels को select करना है |

STEP 4. Labels पर क्लिक करने के बाद निचे दि गई image के जैसे एक window खुलेगी जहाँ से कुछ जरूरी change करके save पर क्लिक करदे |

NOTE : आप Labels को cloud के रूप में ही Display करे वरना ये tricks काम नही करेगी |



STEP 5. अब template>>edit template पर क्लिक करें |

STEP 6. Edit template पर क्लिक करने के बाद जो code editor दिखाई देगा उसके अंदर कही भी ctr+F एक साथ दबाइए जिससे एक छोटा सा search box open होगा उसमे  ]]></b:skin>  टाइप करके enter दबाए |

STEP 7. आपको जहाँ पर भी  ]]></b:skin>  दिखाई दे उसके just ऊपर निचे दिया गया code paste करें |



 /*  design improve by blogplushindi  */

.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:#1831E8;border-bottom:3px solid #0724FC;}
.sidebar .label-size-4 a:hover {background:#040B44}
.sidebar .label-size-5 a {background:#EC29CC;border-bottom:3px solid #FD06D5;}
.sidebar .label-size-5 a:hover {background:#6C045B}


STEP  8. Code को paste करने के बाद save template पर  click करे |

अब आप अपने blog को open करके stylish label widget को देख सकते है | colorful label को add करने के आपको बहुत से code मिल जायेंगे परन्तु  add करने का process सबमें  same ही है |

अगर आपको ब्लॉग्गिंग से सम्बन्धित कोई भी सवाल पूछना है तो मुझसे facebook पर जुड़े और इस post को share जरुर करें | धन्यवाद !