Blogger Theme Template Desining in Hindi with Bootstrap

By author image icon आशुतोष कुमार

दिनांक : September 12, 2021
क्या आप भी अपने ब्लॉग के template को अपने अनुसार बदलना चाहते है? अगर हाँ। तो इस पोस्ट में मैं आपको Blogger Template Degining की पूरी जानकारी देना वाला हूं। Blogger XML Scripting Language का उपयोग ब्लॉग के विभिन्न वेबपेज (Homepage, Archieve, Search) को बनने में करता है।

Blogger Template Editing के लिए क्या-क्या आवश्यक चझे है?

मूलभूत रूप से आपको ब्लॉगर थीम्स ऐडीटिंग के HTML, CSS और Javascript आनी चाहिए। और एक वेब ब्राउज़र होनी चाहिए। जैसे Chrome, Microsoft EDGE।

Bootstrap Framework ( Required for faster Web Devlopment)

Bootstrap html, css और js का एक बना हुआ Framework हैं। जिसका उपयोग वेबसाइट के वेबपेज को Degine करने के लिए किया जाता है। ये एक Front-End फ्रेमवर्क जिसका मुख्य उद्देश्य, वेबपेज के User Interface को बनाता हैl

Using Bootstrap. Why?

Bootstrap के अंदर बहुत सारे Utility class पहले से defined होते है। जिनके उपयोग से वेबसाइट वेबपेज को बनाने काफी कम समय लगता है।

Interesting Facts

इंटरनेट पर पूरी वेबसाइट की 20% के Approx. साइट जो Boostrap framework पर आधारित बनी हुई है। ये बहुत ही लोकप्रिय वेब फ्रेमवर्क है।

Bootstrap के अंदर खाश रूप से Layout बनाने के classes पहले से परिभाषित किये गये। बस आपको उन classe को सही से उपयोग करते हुऐ अपने आवश्यकतानुसार single, 2, 3 column वाला Layout बना सकते हैं।

Start Degine to Blogger Theme Template

Blogger के Theme section के अंदर Edit HTML ऑप्शन को tap करके ब्लॉगर टेम्पलेट थीम एडिटर को खोल लें।

निचे दिये Blogger template के CODE को कॉपी कर ले।

ब्लॉगर थीम एडिटर को Control + A tap करके पुरानी template के कोड Select All कर ले। और backspace बटन दबा दे। जिससे code हट जायेगी।

अब आपको नई template के कोड को paste कर दे। ( Control + V ) .

Save कर लें। 

<!DOCTYPE html>
<html>
<head>

<b:skin type="text/css"> <![CDATA[

]]>
</b:skin>


</head>

<body>
<b:section id="main">

</b:section>

</body>
</html>

Blog - Widget को जोड़ना

नीचे दिए गये code को <b:section id="main"> ... &th;/b:section> के अंदर रखेें।

ब्लॉगर के हर <b:section /> टैग direct एक या एक से अधिक <widget ... /> को रख सकता है।

और blogger में defined हर widget अलग-2 data रखता है। जैसे widget type="Blog" हमेशा post/article से सम्बंधित data को contain करता है।
widget type="Header" ब्लॉग के Header से सम्बंधित जानकरी रखता है। 
  <b:widget type="Blog" id="blog" />

Save करें और Page Refresh करे।

अब आपके blog widget Expand हो जाता है। जहाँ आप अपने ब्लॉग के pages को HTML और CSS के मदद से Costomize कर सकते है।
जहाँ अपने ब्लॉग के Degine को Particular PageType के अनुसार अलग-अलग code लिख सकते है।

  • शेयर करें :
Tags :

No comments:

Post a Comment

आप कैसे हों?