Using Sliding Line Effect Under a Text in your BlogPost in Hindi

Blogpost में Sliding Underline Effect कैसे डाले? 

हेलो दोस्तों ,

हम सभी चाहते हैं कि हमारा ब्लॉग अच्छा दिखे और लोगो को आकर्षित करें. और ब्लॉग को अच्छा दिखाने के लिए हम या तो उसमे अच्छी डिज़ाइन का उपयोग करते हैं या उसमे effects डालने का प्रयास करते हैं. उसी में से एक इफ़ेक्ट के बारे में मैं आज आप सबको बताने वाला हुँ. जैसा कि आप देख ही चुके हैं कि मेरे एक पुराने पोस्ट में मैंने आप बताया था कि अपने ब्लॉग को 360 डिग्री कैसे घुमाए। 

  Rotate your blog by 360 Degrees.

ठीक उसी तरह आज में आपको बताने वाला हूँ कि आप अपने ब्लॉग पोस्ट में किसी वाक्य या शब्द के निचे sliding underline कैसे डाले।
उदहारण के लिए आप इस लिंक पर click करें।  यहाँ पर मैंने एक ब्लॉग पोस्ट लिखा हैं जिस पर आप अपने Mouse के पॉइंटर को ले जाए तो आप देखेंगे कि उस लिखे हुए शब्दों  underline हो जाता हैं वो भी sliding effect के साथ।
चलिए अब जानते हैं कि इस effect को कैसे लाये.

1 .  पहले आप अपने ब्लॉगर डैशबोर्ड पर जाए , फिर "Template" पर क्लिक करें.  फिर आपको "Customise" के बटन पर क्लिक करें।  जैसे ही आप उस पर क्लिक करेंगे "Blogger Template Designer" खुल जाएगा , यहाँ पर अब आप "Advanced"  पर क्लिक करें। फिर आपको "Add custom CSS" का खाली जगह मिल जाएगा.  यहाँ पर आपको अब निचे दिए गए CSS कोड लिखना पड़ेगा और फिर लिखकर Apply to Blog के बटन पर क्लिक करना पड़ेगा।

2 . आसान शब्दों में Blogger Dashboard > Template > Advanced > Add custom CSS.

3 .  जो CSS आपको add करना हैं वो आप निचे से copy कर ले।

/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}

4 . अब आप "Apply to Blog" के बटन पर क्लिक करके अपने इस CSS को ब्लॉग पर apply कर ले।

अब इसका उपयोग कैसे करें ?

अब जब भी आपको स्लाइडिंग effect का उपयोग करना हो तो आप पहले अपने blog पर जाए फिर HTML के बटन पर click करे और निम्नलिखित code का प्रयोग करें.

<div class="uslide">बाए से दाए स्लाइडिंग effect के लिए</div>

<div class="uslide2">दाए से बाए स्लाइडिंग effect के लिए</div>

uslide टैग का उपयोग आप तब करेंगे जब आपको चाहिए की स्लाइडिंग लाइन बाए से दाए जाए.

uslide2 टैग का उपयोग आप तब करें जब आप चाहते हैं कि स्लाइडिंग effect दाए से बाए लाना चाहते हो.

यह बहुत ही बेहतरीन effect हैं. अगर आपको यह post पसंद आया या आपका कोई सवाल हो तो comments में जाकर पूछ या लिख सकते हैं .

धन्यवाद