Friday, February 14, 2020

इस Html code से बनाये अपने article को attractive || अभी try करे इस कोड को , सारि जानकारी हिंदी मैं || html code || html code for designing blogger website ||

Collapse animation - html code

Collapse animation CSS code ,html code , JavaScript code,
HTML code

दोस्तों आज के इस ब्लॉग में हम लोग कुछ इंटरेस्टिंग html code के ऊपर बात करने वाले हैं। बात नहीं करने वाले बस आपको html code  देना है। जिस html code का यूज करके आप अपने blog की किसी भी आर्टिकल को animated बना सकते हो मतलब अभी तक आप एक सिंपल ब्लॉग लिखते होंगे। 

अगर आपने अपना ब्लॉग blogger पर बनाया होगा तब आप सिंपल सा ब्लॉग लिखते हैं उस में कहीं कोई डिजाइन नहीं होता होगा। क्योंकि यह वर्ड प्रेस जैसा तो होता नहीं है दोस्तों की आपको ढेर सारा plugin मिलेगा जिसके थ्रू आप अपने ब्लॉग को attractive बना सकते हो बट कोई बात नहीं मेरे blogger दोस्तों आपके लिए मैं बस  html code  लेकर आया इस code को यूज करके आप अपने ब्लॉग को काफी attractive बनाा सकते हो।

Use of collapse animation in blog post 

दोस्तों आज मैं आपको 

collapse animation का एक html code देने वाला हूं। इस html code के जरिए आप अपने किसी भी ब्लॉग या आर्टिकल में collapse animation लगा सकते हो। 


अब देखिए दोस्तों इस collapse animation का यूज कहां होता है जैस कि आपने अपने ब्लॉग में कई जगह अपने ही वेबसाइट के किसी पोस्ट का interlinking किया होंगे।

                    इंटरलिंकिंग करते वक्त वहां पर सिर्फ आप अपने ब्लॉग का टाइटल के साथ एक लिंक को ऐड कर देते हो बट वो कुछ ज्यादा attractive नहीं लगता देखने में इसलिए इसी काम को करने के लिए एक अट्रैक्टिव तरीका जो होता है वह एक collapse animation के जरिए आप कर सकते हो आप collapse animation  को इंटरलिंकिंग वाले जगह पर यूज कर सकते हो वहां आपको पहले के मुकाबले थोड़ा सा अच्छा लुक मिलेगा आपके पोस्ट को और अट्रैक्टिव भी लेगा देखने में तो अब उसको लगाते कैसे अपने ब्लॉग में तो वह आप नीचे पढ़िए ध्यान से।

उससे पहले आप  इस कॉलेप्स एनिमेशन का एक डेमो देख लीजिए ये काम किस प्रकार करता है आप जो नीचे में also read का बटन देख रहे हैं उसे क्लिक कीजिए उसे क्लिक करने के बाद आप देखिएगा नीचे जो भी चीज लिखा हुआ था वह सारा चीज गायब हो गया मतलब वह छुप चुका है 
       और फिर से जैसे ही आप also read पर क्लिक करेंगे वह सारा चीज आपके सामने ऑटोमेटिक आ जाएगा तो यही दोस्त होता है collapse animation 

आप इसका demo test  नीचे देख सकते हो अगर आपको पसंद आया तो इस कोड को अपने ब्लॉग या आर्टिकल में जरूर यूज करें।

coronavirus all details in hindi and it's live activity

How to use collapse animation in our blog post ?



  • इस एनिमेशन को यूज करने से पहले आपको एक बहुत ही जरूरी काम करना पड़ेगा कि आपको नीचे दिए गए code को सबसे पहले अपने ब्लॉगर के html में <head> के नीचे में पेस्ट करना होगा।
  • <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"/>

  • ऊपर दिए गए html code को अपने blogger के html  में पेस्ट करने के बाद आपको मैं नीचे चार और कोड दे रहा हूं। जिसको आपको इसी कोड के आगे इंटर दबाकर के मतलब कि इसी कोड के नीचे आपको उन चारों कोड को एक साथ कॉपी करके पेस्ट करना है।
  • <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>






  • इन दोनों code को अपने ब्लॉगर के html  में पेस्ट करने के बाद आपको अपने html को सेव कर देना है। 
  • दोस्तों आपके मन में सवाल उठेगा कि मैंने इस कोड को आपके html में क्यों डलवाया? क्योंकि दोस्तों मैं जो आपको code देने वाला हूं एनिमेशन के लिए वह code जावा स्क्रिप्ट में लिखा हुआ है और हो सकता है आपके ब्लॉगर  को सपोर्ट नहीं करता हो तो इस कोड को देने के बाद। हम जो आपको एनिमेशन वाला कोड देंगे उसको सपोर्ट करेगा यही कोड मतलब दोनों कोड आपस में मैच करके दूसरे को सपोर्ट करेगा बिना इस कोड के आप उस एनीमेशन का यूज। नहीं। कर पाओगे अपने ब्लॉगर के किसी भी पोस्ट पर।
  • दोस्तों अब आपको मैं वह एचटीएमएल कोड देता हूं। जिसके थ्रू आप अपने ब्लॉग पोस्ट मे collapse animation लगा सकते हो उसके लिए आपको नीचे दिए गए कोड को सबसे पहले कॉपी करना होगा।







    • <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> Anim accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> Anim  haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
सबसे पहले आप अपने ब्लॉगर के किसी
भी आर्टिकल को सेलेक्ट कीजिए
जिसमे collapse animation
यूज़ करना चाहते हो आर्टिकल
सेलेक्ट कर लेने के बाद आपको
उस उस article में ऐसा जगह खोजना
जिस जगह आपको इस एनिमेशन को लगाना
उस जगह को खोजने के
बाद ,आपको उसी जगह को अपने ब्लॉग
पोस्ट के एचटीएमएल में जाकर
के खोजना है जैसे कि आप नीचे
इमेज में देख सकते हो।।
जैसा मैंने ऊपर बताया। उस तरह करने के बाद जैसे यहां html पर क्लिक करोगे html पर क्लिक करने के बाद आपके सामने आपके ब्लॉग का html फॉरमैट खुल जाएगा
 उस फॉर्मेट में आपको उसी वर्ड को सर्च करना है। जिस वर्ड के आगे या पीछे आप एनिमेशन को लगाना चाहते हो। जैसा कि आप नीचे इमेज में देख सकते हो इमेज पार्ट वन में वह एरिया है जिसके ऊपर मैं अपना एनिमेशन लगाना चाहता हूं तो मैंने फर्स्ट पार्ट में आपको इमेज में दिखाया कि किस पार्ट के ऊपर हमें एनिमेशन लगाना है। और सेकंड पार्ट हुआ है जिसमें मैं वह code को पेस्ट किया हूं। जो कोड आपको मैंने ऊपर प्रोवाइड किया हूं। उस कोड को आप कॉपी करके वहां पर सेकंड पार्ट वाले जगह पर पेस्ट कर सकते हो। 
    और एक बात का ध्यान रखना दोस्तों कभी भी अगर इस कोड को पेस्ट कीजिएगा एचटीएमएल सेक्शन में। तो हमेशा क्लोजिंग टैग के बाद ही html code को उसके आगे पेस्ट कीजिएगा। जो आप नीचे इमेज में देख सकते हो?
मुझे ऐसा लग रहा है कि आप लोगों को अभी भी
समझ में नहीं आया है तो चिंता मत
करिए दोस्तों आपको के लिए मैं इसके ऊपर एक
पार्टी कूलर वीडियो बनाया हूँ आप उसे देख
सकते हो ।।




        आशा करता हूं दोस्तों आपको यह पोस्ट पसंद आया हो। आपको पसंद आया है तो दोस्तों इस पोस्ट को अपने हर blogger  दोस्तों के साथ शेयर जरूर करना। और दोस्तों अगर आपके मन में अभी भी किसी तरह का डाउट या question  है तो आप हमें इसी पोस्ट के नीचे comment करके पूछ सकते हो। मैं आपके हर कमेंट का जितनी जल्दी हो सके आपको रिप्लाई करूंगा। तो दोस्तो आज के लिए बस इतना है फिर मिलते हैं आपसे एक और नए इंटरेस्टिंग 

html code और पोस्ट के साथ तब तक के लिए मुस्कुराते रहें 😀😀😀



धन्यवाद। 🙏🙏


Disclaimer :-

दोस्तों इस पोस्ट में लिया गया html code
इंटरनेट की सहायता से
निकाला गया है।ताकि आपको कहीं खोजना
ना पड़े और सीधे आपको
इसवेबसाइट पर वह html code मिल जाए और
इस html code का
सीधा श्रेय जाता है इसके। क्रिएटर को मतलब उसके
बनाने वाला को इसhtml
codeसे मेरा कोई ताल्लुक नहीं है। लेकिन यह
html code आपके? काफी
मददगार साबित होंगी आपके blog एनिमेट करने मैं ।।

धन्यवाद। 🙏🙏

0 Comments: