आप भी लगायें अपने ब्लॉग पर आकर्षक "Accordion Bar"

आप भी लगायें अपने ब्लॉग पर आकर्षक "Accordion Bar"

Click here to Zoom

आपनेबहुत सी साईटस पर ये "Accordion BAR" लगा देखा होगा | इस को निम्न तस्वीर में देख सकते हैं | जब आप किसी भी साईट पर लाग करते हैं तो सबसे पहले पहिला बार खुला होता है जब दूसरे बार पर माउस से कलिक करते हैं तो पहिला बार बंद हो जाता है व दूसरा बार खुल जाता है, इसी प्रकार तीसरा, चौथा आदि |

आप भी चाहते होंगे कि आप भी इसे अपने ब्लॉग पर लगा पाएं | इस का सबसे बड़ा फायदा ये है ये आपके पेज की लम्बाई को कम करता है जिससे आपके ब्लॉग का होम पेज जल्दी लोड होता है | इस का दूसरा बड़ा फायदा ये है कि आप अपने पेज पर ज्यादा से ज्यादा सामग्री को कम स्थान यानि कि पेज के लम्बाई को बढ़ाये बिना ही अपने पेज पर दिखा सकते हैं | इस को अपने ब्लॉग पर स्थापित करना बड़ा ही आसान हैं |

आइये जाने कि कैसे इसे अपने ब्लॉग पर स्थापित किया जाये | सबसे पहले निम्न कोड को कापी करें |

Select All /*--- accordion bar code begin --*/<br /> .wrap {width: 100%;overflow: hidden;}<br /> #accordion {width: 550px;min-height: 325px;height: auto !important;height: 325px;margin-left:-20px;}<br /> #accordion dt {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUvKOkzeLK6xIhCyry7j-0ebKbityEtZX7fhawhxS-P5PQQdLP3TXCEOM550-fokRqR192e5KTAopKI01MHYuOIghgL-XDkx9OoymCKrDadabmRWgY1hk2J2JWmXSz5OLxGYSc1A6Y-Cf/s1600/accodation-title.png) no-repeat 0% 0%;<br /> width: 540px;height: 37px;padding: 0 0 1px 0;overflow: hidden;<br /> line-height: 36px;font-size: 1.333em;color: #fff;margin-left:30px;}<br /> #accordion dt a {display: block;height: 37px;padding: 0 20px 0 39px;<br /> text-decoration: none;color: #fff;}<br /> #accordion dt a:hover {color: #f60;}<br /> #accordion dt.active {<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRW8PSyd_AGIcjf2X-0W_hIGQtlIgqKPPsv6_tDK62dBHJ8AUUFic1yQbiOz6EgjgHPhzI2QFRUt4JsMRWwxmC0Vdoi38arpRBeKOAuKfOV7IiaBPuP0TQfxnYV5AYzKnsYYfcdj08G2P/s1600/accordion-title-act.png) no-repeat 0% 0%;padding: 0;}<br /> #accordion dt.active a{color: #fff;}<br /> #accordion dd {background: #eee url(images/accordion-bg.gif) no-repeat 50% 100%;<br /> display: none;line-height: 1.7em;font-size: 15px;color: #343434;<br /> height: auto !important;width:490px}<br /> #accordion dd div {padding: 19px 22px 22px 22px;text-align: justify;margin-right:5px;}<br /> .accordion b22{color:#DB0202;font-size:22px;line-height:28px;}<br /> .accordion b{color:#f60;line-height:28px;}<br /> .accordion blue{color:#1328F3;line-height:28px;}<br /> .accordion citewb {font-style:italic;color:#fff;display:block;text-indent:0px;<br /> padding-top:5px;letter-spacing:1px;text-align:center;<br /> font: italic 18px Georgia, "Times New Roman", Times, serif;<br /> background-color: #104801;padding-bottom: 5px;<br /> border-top-style: double;border-right-style: double;<br /> border-bottom-style: double;border-left-style: double;<br /> border-top-width: medium;border-right-width: medium;border-bottom-width: medium;<br /> border-left-width: medium;height: auto;width: 360px;background-position: 0px 0px;<br /> margin-right: 25px;margin-left: 25px;}<br /> .accordion citewb span{color:#f60;font-size:17px;font-weight:normal;}<br /> .col-1, .col-2, .col-3, .col-4 {float: left;overflow: hidden;}<br /> /*--- accordion bar code end --*/<br />

अब आप सब से पहिले डिज़ाइन पर फिर एडिट "HTML" पर कलिक करें व "CTRL+F" कमांड दे कर लिख कर एंटर कीज़ दबाएँ व इसके बिलकुल ऊपर कापी किया हुआ कोड पेस्ट करके सेव टेम्पलेट पर कलिक करें | आप निम्न से पहिली तस्वीर में देख सकते हैं कि कापी किए हुए कोड को कहाँ पर पेस्ट करना है |

अब आप न्यू पोस्ट पर कलिक करें व निम्न कोड को अपनी पोस्ट पर पेस्ट कर दें व प्रीविउ बटन पर कलिक करें, आप उपरोक्त से दूसरी तस्वीर के अनुसार इसे इस तरह से देखेंगे | अगर आपको ये तस्वीर आपके अपने ब्लॉग में दिखती है तो इस का मतलब है कि आपने इसे सफलता पूर्वक इसे अपने ब्लॉग में स्थापित कर लिया है | सेव करने के पश्चात ये "Accordion Bar" निम्न अनुसार दिखाई देगा | आप निम्न कोड को अपनी पोस्ट पर पेस्ट कर दें | जहाँ पर मेरा नाम, जन्म तारीख, जन्म स्थान आदि लिखा हुआ है वहाँ पर आप अपना टेक्स्ट लिखें |

<div class="wrap">< div class="col-1"><br /> <dl id="accordion"><dt><a href="http://www.blogger.com/post-edit.g?blogID=9144512616116037111&postID=1848542511037219685#">मेरा परिचय </a></dt> <dd><div class="accordion"><table class="accordion" style="width: 445px;"><tbody> <tr><td style="text-align: right;"><b22><b>नाम :</b></b22><b></b> </td><td><b22>वनीत कुमार नागपाल</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जन्म तारीख :</b></b22></td><td><b22>12 मई</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जन्म स्थान :</b></b22></td><td><b22>फाजिल्का</b22></td></tr> <tr><td style="text-align: right;"><b22><b>तहसील :</b></b22></td><td><b22>फाजिल्का</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जिला :</b></b22></td><td><b22>फिरोजपुर</b22></td></tr> <tr><td style="text-align: right;"><b22><b>स्टेट :</b></b22></td><td><b22>पंजाब</b22></td></tr> </tbody></table></div></dd> <dt><a href="http://www.blogger.com/post-edit.g?blogID=9144512616116037111&postID=1848542511037219685#">मेरा परिचय</a></dt> <dd><div class="accordion"><table class="accordion" style="width: 445px;"><tbody> <tr><td style="text-align: right;"><b22><b>नाम :</b></b22><b></b> </td><td><b22>वनीत कुमार नागपाल</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जन्म तारीख :</b></b22></td><td><b22>12 मई</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जन्म स्थान :</b></b22></td><td><b22>फाजिल्का</b22></td></tr> <tr><td style="text-align: right;"><b22><b>तहसील :</b></b22></td><td><b22>फाजिल्का</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जिला :</b></b22></td><td><b22>फिरोजपुर</b22></td></tr> <tr><td style="text-align: right;"><b22><b>स्टेट :</b></b22></td><td><b22>पंजाब</b22></td></tr> </tbody></table></div></dd> <dt><a href="http://www.blogger.com/post-edit.g?blogID=9144512616116037111&postID=1848542511037219685#">मेरा परिचय</a></dt> <dd><div class="accordion"><table class="accordion" style="width: 445px;"><tbody> <tr><td style="text-align: right;"><b22><b>नाम :</b></b22><b></b> </td><td><b22>वनीत कुमार नागपाल</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जन्म तारीख :</b></b22></td><td><b22>12 मई</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जन्म स्थान :</b></b22></td><td><b22>फाजिल्का</b22></td></tr> <tr><td style="text-align: right;"><b22><b>तहसील :</b></b22></td><td><b22>फाजिल्का</b22></td></tr> <tr><td style="text-align: right;"><b22><b>जिला :</b></b22></td><td><b22>फिरोजपुर</b22></td></tr> <tr><td style="text-align: right;"><b22><b>स्टेट :</b></b22></td><td><b22>पंजाब</b22></td></tr> </tbody></table></div></dd></dl></div></div>

मेरा परिचय

नाम :	वनीत कुमार नागपाल
जन्म तारीख :	12 मई
जन्म स्थान :	फाजिल्का
तहसील :	फाजिल्का
जिला :	फिरोजपुर
स्टेट :	पंजाब

मेरा परिचय

नाम :	वनीत कुमार नागपाल
जन्म तारीख :	12 मई
जन्म स्थान :	फाजिल्का
तहसील :	फाजिल्का
जिला :	फिरोजपुर
स्टेट :	पंजाब

मेरा परिचय

नाम :	वनीत कुमार नागपाल
जन्म तारीख :	12 मई
जन्म स्थान :	फाजिल्का
तहसील :	फाजिल्का
जिला :	फिरोजपुर
स्टेट :	पंजाब