घरशुरुआती लोगों के लिए ब्लॉगर थीम निर्माण गाइड: ब्लॉगर ब्लैंक पेज

पर25 सितंबर,

209 दृश्य

शुरुआती लोगों के लिए ब्लॉगर थीम निर्माण गाइड: ब्लॉगर ब्लैंक पेज

ब्लॉगर थीम बनाने की यह शुरुआती गाइड ब्लॉगर में इस्तेमाल होने वाले XML कोड की बुनियादी संरचना के साथ-साथ एक सुंदर और रिस्पॉन्सिव ब्लॉग डिज़ाइन बनाने के लिए CSS को कस्टमाइज़ करने के तरीके को भी बताती है। यह हेडर, कंटेंट, साइडबार और फ़ुटर जैसे प्रमुख तत्वों के साथ-साथ ब्लॉगर में विभिन्न विजेट्स के इस्तेमाल के उदाहरणों से भी परिचित कराती है, जिससे पाठकों के लिए उन्हें समझना और अपनी थीम डेवलपमेंट में लागू करना आसान हो जाता है।

11 मिनट पढ़ा

ब्लॉगर थीम निर्माण मार्गदर्शिका

सामग्री की सूची दिखाओ

HTML के साथ एक “वास्तव में खाली” खाली पृष्ठ बनाएं

1. कोड ब्लॉगर थीम रिक्त ब्लॉगर रिक्त पृष्ठ

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
   <meta content='width=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
   <![CDATA[/* 
    ----- css Yours here -----
   ]]>
  </b:skin>
 </head>
 <body>
  <b:section class='main' id='main' showaddelement='yes'/>
  <!-- Please Keep The Credits -->
  <center><a href="//siammakemoney.com/">siammakemoney.com/</a></center>
 </body>
</html>

—– सीएसएस आपका यहाँ —– अपना सीएसएस यहाँ दर्ज करें।

मूल कोड समझाएँ

यह कोड है ब्लॉगर थीम की सबसे बुनियादी संरचना के साथ साथ:

ब्लॉगर HTML + नामस्थान लेआउट
मोबाइल/डेस्कटॉप के लिए मेटा
पृष्ठ नाम जैसे ब्लॉग डेटा पुनर्प्राप्त करना
CSS डालने के लिए क्षेत्र
विजेट्स डालने के लिए एक अनुभाग
नीचे क्रेडिट जोड़ें

न्यूनतम ब्लॉगर टेम्पलेट्स बनाने के लिए सरल और उपयोग में आसान।

✔ यह अनुभाग XML घोषित करने और नामस्थान परिभाषित करने के लिए है।

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

xmlns:b = ब्लॉगर टैग के लिए उपयोग किया जाता है जैसे: <b:if>, <b:section>
xmlns:डेटा = जैसे ब्लॉगों से डेटा निकालने के लिए उपयोग किया जाता है डेटा:ब्लॉग.पेजशीर्षक
xmlns:expr = विभिन्न अभिव्यक्तियों को संसाधित करने के लिए उपयोग किया जाता है।

✔ इंटरनेट एक्सप्लोरर को IE7 की तरह प्रदर्शित करने के लिए सेट करें

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

✔ मोबाइल / डेस्कटॉप के लिए विभाजित स्क्रीन आकार सेट करें

<b:if cond='data:blog.isMobile'>
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
   <meta content='width=1100' name='viewport'/>
</b:if>

यदि यह मोबाइल फोन है तो → उत्तरदायी व्यूपोर्ट का उपयोग करें।
यदि यह डेस्कटॉप है तो → चौड़ाई 1100px पर सेट करें।

✔ ब्लॉगर को सामग्री शामिल करने के लिए कहें `<head>` ब्लॉगर मानक

<b:include data='blog' name='all-head-content'/>

जैसे स्वचालित स्क्रिप्ट, विभिन्न मेटा टैग

✔ ब्लॉग पेज के नाम से वेब पेज का नाम रखें।

<title><data:blog.pageTitle/></title>

उस डेटा का उपयोग करें जो ब्लॉगर आपके लिए स्वचालित रूप से उत्पन्न करता है।

✔ थीम CSS डालने के लिए अनुभाग

<b:skin>
   <![CDATA[/* 
    ----- css Yours here -----
   ]]>
</b:skin>

<![CDATA[ ]]> = ऐसे कोड को सम्मिलित करने के लिए उपयोग किया जाता है जिसे XML द्वारा सीधे संसाधित नहीं किया जा सकता है, जैसे CSS।

✔ ब्लॉगर का मुख्य सामग्री प्रदर्शन अनुभाग

</head>
<body>
  <b:section class='main' id='main' showaddelement='yes'/>

<b:section> यह वह अनुभाग है जहां हम विजेट जोड़ सकते हैं।
शोएडलिमेंट='हाँ' = आपको लेआउट में गैजेट जोड़ने की अनुमति देता है.

✔ HTML संरचना बंद करें

</body>
</html>

2. ब्लॉगर थीम (कोई साइडबार नहीं)

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 

  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    /* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s;
    }
    a:hover {
      color: #008f7a;
    }

    header {
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      padding: 15px 30px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #008f7a;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
    }

    nav li {
      font-weight: 500;
    }

    .container {
      max-width: 1100px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Blog Post Card */
    .post-card {
      background: #fff;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover {
      transform: translateY(-4px);
    }

    .post-card h2 {
      font-size: 1.4rem;
      margin-bottom: 10px;
      color: #222;
    }
    .post-card p {
      color: #666;
      font-size: 1rem;
    }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Content -->
  <div class="container">
    <b:section id='main' class='main' showaddelement='yes'>
      <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
    </b:section>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

</body>
</html>

<!-- Content -->
  <div class="container">
    <b:section id='main' class='main' showaddelement='yes'>
      <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
    </b:section>
  </div>

<!– Header –> ส่วนหัวเมนู

<!– Content –> ส่วนนี้คือการดึงโพสมาแสดง

<!– Footer –> ส่วนท้าย

🧱 वेबसाइट शीर्ष (शीर्षक)

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</header>

📰 सामग्री अनुभाग

<div class="container">
  <b:section id='main' class='main' showaddelement='yes'>
    <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
  </b:section>
</div>

सामग्री अनुभाग यह कैसे काम करता है?

<b:section> = विजेट क्षेत्र (ब्लॉगर में लेआउट के माध्यम से व्यवस्थित)
<b:widget type="Blog"> = ब्लॉगर पोस्ट दिखाएँ
ब्लॉगर आंतरिक HTML उत्पन्न करेगा जैसे:
- होम पेज पोस्ट सूची
- पोस्ट पेज पर पूरा लेख

📘 फ़ुटबाल

<footer>
  <p>© <data:blog.title/> - Powered by Blogger</p>
  <p><a href='//siammakemoney.com'>siammakemoney.com</a></p>
</footer>

2.1 विभिन्न ब्लॉगर्स में संरचना

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <!-- meta, title, CSS/JS -->
</head>

<body>
  <!-- header -->
  <!-- navigation -->
  <!-- main content -->
  <!-- sidebar -->
  <!-- footer -->
</body>
</html>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Header' type='Header'/>
</b:section>

<b:section class='content' id='content' showaddelement='yes'>
  <b:widget id='Blog1' type='Blog' title='Blog Posts'/>
</b:section>

<b:section class='sidebar' id='sidebar' showaddelement='yes'>
  <b:widget id='Profile1' type='Profile' title='About Me'/>
</b:section>

<b:section class='footer' id='footer' showaddelement='yes'>
  <b:widget id='Attribution1' type='Attribution' title=''/>
</b:section>

2.2 ब्लॉगर शीर्षक जोड़ें

<title><data:blog.pageTitle/></title>

3. थीम साइडबार गैजेट/विजेट जोड़ता है।

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
      margin: 0;
    }

    a { text-decoration: none; color: inherit; }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: #008f7a; font-size: 1.5rem; }

    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    .container {
      display: grid;
      grid-template-columns: 2fr 1fr; /* Main 2 ส่วน / Sidebar 1 ส่วน */
      gap: 20px;
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Post card */
    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* Sidebar */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Content -->
  <div class="container">
    <!-- Main -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>

    <!-- Sidebar -->
    <aside class="sidebar">
      <h3>Gadgets</h3>
      <b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to top -->
  <button id="back-to-top" class="back-to-top">↑</button>

</body>
</html>

साइडबार गैजेट्स/विजेट्स ब्लॉगर थीम में हमें जोड़ने की जरूरत है <b:section> में रखना <body> के बगल में मुख्य (पोस्ट प्रदर्शन अनुभाग)

✅ 3.1. XML घोषणा और नामस्थान अनुभाग

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

व्याख्या करना

<?xml ...?> → इसमें कहा गया है कि यह एक XML फ़ाइल है जिसका उपयोग ब्लॉगर HTML में परिवर्तित करने के लिए करता है।
xmlns:b → ब्लॉगर टैग के लिए उपयोग किया जाता है जैसे: <b:section>, <b:widget>
xmlns:डेटा → जैसे डेटा निकालने के लिए उपयोग किया जाता है <data:blog.title/>
xmlns:expr → जैसे भाव सम्मिलित करने के लिए उपयोग करें expr:href='data:blog.url'

✅ 3.2. `<head>` वेबसाइट हेडर

3.2.1 पुराने इंटरनेट एक्सप्लोरर का समर्थन करता है

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

3.2.2 मोबाइल/डेस्कटॉप व्यूपोर्ट

<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1.0,...' name='viewport'/>
<b:else/>
  <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
</b:if>

यह कैसे काम करता है?

यदि आप अपने मोबाइल फोन पर वेबसाइट तक पहुंचते हैं तो मोबाइल अनुकूल व्यूपोर्ट का उपयोग करें।
यदि यह डेस्कटॉप है तो → पूर्ण स्क्रीन का उपयोग करें।

3.2.3 ब्लॉगर हेडर को स्वचालित रूप से लोड करें

<b:include data='blog' name='all-head-content'/>

के साथ साथ:

लेख मेटा
ग्राफ़ खोलें
मूल स्कीमा
खिलाना
बहुत महत्वपूर्ण है, हटाएं नहीं.

3.2.4 पृष्ठ का नाम इस प्रकार खींचें `<title>`

<title><data:blog.pageTitle/></title>

3.2.5 Google फ़ॉन्ट्स लोड करें

<link href="https://fonts.googleapis.com/css2?family=Kanit..." />

🎨3.3 सभी CSS (अंदर `<b:skin>`)

<b:skin><![CDATA[
  ... CSS ...
]]></b:skin>

ब्लॉगर को अपने अंदर CSS अवश्य शामिल करना चाहिए। <b:skin> केवल

🧱 4. वेबसाइट हेडर

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</header>

व्याख्या करना

<data:blog.title/> → ब्लॉग का नाम
मेनू बाएँ से दाएँ व्यवस्थित
CSS स्टिकी हेडर

📰 5. सामग्री कंटेनर लेआउट

<div class="container">
  <main>
    <b:section id='main'>
      <b:widget type='Blog'/>
    </b:section>
  </main>

  <aside class="sidebar">
    <h3>Gadgets</h3>
    <b:section id='sidebar'/>
  </aside>
</div>

5.1 मुख्य सामग्री

<b:widget type='Blog' />

यह ब्लॉगर का हृदय है।
दिखाओ:

पोस्ट सूची
पूरा लेख
पृष्ठ पर अंक लगाना

5.2 साइडबार

<b:section id='sidebar' ... />

आप लेआउट से विजेट जोड़ सकते हैं जैसे:

लोकप्रिय लेख
HTML/जावास्क्रिप्ट
लेबल
विज्ञापन

🧩 6. पाद

<footer>
  <p>© <data:blog.title/> - Powered by Blogger</p>
  <p><a href="//siammakemoney.com">...</a></p>
</footer>

व्याख्या करना

ब्लॉग का वर्ष और नाम स्वचालित रूप से प्राप्त करें
क्रेडिट जोड़ने
पृष्ठभूमि का रंग काला है.

⬆️ 7. बैक-टू-टॉप बटन

<button id="back-to-top" class="back-to-top">↑</button>

आमतौर पर, कुछ JS भी होने चाहिए, जैसे:


window.addEventListener('scroll', () => {
  document.getElementById('back-to-top').style.display =
    window.scrollY > 300 ? 'block' : 'none';
});


document.getElementById('back-to-top').onclick = () =>
  window.scrollTo({ top: 0, behavior: 'smooth' });

भाग	क्या करें?
XML नामस्थान	ब्लॉगर टैग सक्षम करें
व्यूपोर्ट	उत्तरदायी
सभी-शीर्ष-सामग्री	ब्लॉगर से SEO + मेटा ऑटो
सीएसएस	संपूर्ण लेआउट डिज़ाइन करें
हैडर	लोगो + मेनू
पात्र	2-स्तंभ ग्रिड
ब्लॉग1	ब्लॉग पोस्ट दिखाएँ
साइड बार	विजेट को इच्छानुसार रखें.
फ़ुटबाल	कॉपीराइट नोटिस
शीर्ष पर वापस जाएं	पिछला बटन

4. ब्लॉगर साइडबार बाएँ थीम कोड + मेनू जोड़ें

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>

  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
      margin: 0;
    }

    a { text-decoration: none; color: inherit; }
    a:hover { color: #008f7a; }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: #008f7a; font-size: 1.5rem; }
    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    .container {
      display: grid;
      grid-template-columns: 300px 1fr; /* Sidebar 300px / Main content flexible */
      gap: 20px;
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 15px;
    }

    /* Post card */
    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* Sidebar */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }

    /* Footer */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

    /* Back to top */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #008f7a;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 20px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .back-to-top:hover {
      background: #006f5a;
    }

    /* Responsive */
    @media screen and (max-width: 900px) {
      .container {
        grid-template-columns: 1fr;
      }
      .sidebar { margin-bottom: 20px; }
    }
  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Container: Sidebar + Main -->
  <div class="container">
    <!-- Sidebar -->
    <aside class="sidebar">
      <h3>Menu &amp; Gadgets</h3>
      <b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>

    <!-- Main content -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to top -->
  <button id="back-to-top" class="back-to-top">↑</button>

  <script>
    const btn = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
    });
    btn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

<!– Sidebar (ซ้าย) –>

<!– Main content (ขวา) –>

🔷 इस थीम में कोड का अवलोकन

यह है 2-कॉलम ब्लॉगर टेम्पलेट (साइडबार + मुख्य) साथ:

हेडर चिपचिपा
साइडबार की निश्चित चौड़ाई (300px)
मुख्य सामग्री लचीली
पोस्ट कार्ड डिज़ाइन
फ़ुटबाल
शीर्ष पर वापस जाएँ बटन
उत्तरदायी लेआउट
पोस्ट को आगे खींचें <b:widget type="Blog">

🔶 4.1. XML घोषणा और नामस्थान अनुभाग

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

✔ समझाएँ

यह है मुख्य संरचना जिसका उपयोग ब्लॉगर्स को अवश्य करना चाहिए:

नाम स्थान	कर्तव्य
`बी:`	ब्लॉगर के सिस्टम टैग का उपयोग करें जैसे: `<b:section>`, `<b:widget>`
`डेटा:`	जैसे डेटा खींचें `<data:blog.title/>`
`अभिव्यक्ति:`	इस तरह के भाव लिखना: `expr:href="data:blog.homepageUrl"`

🔶 4.2. `<head>` — वेब हेडर

✔4.2.1 मोबाइल के लिए व्यूपोर्ट

<b:if cond='data:blog.isMobile'>
  <meta content="width=device-width, initial-scale=1.0" />
<b:else/>
  <meta content="width=device-width, initial-scale=1.0" />
</b:if>

✔ 4.2.2 ब्लॉगर के स्वतः-निर्मित मेटा और स्क्रिप्ट जोड़ें

<b:include data='blog' name='all-head-content'/>

ब्लॉगर स्वचालित रूप से निम्नलिखित जोड़ देगा:

पृष्ठ का शीर्षक / विवरण
ग्राफ़ खोलें
लेख स्कीमा
कैनोनिकल URL
खिलाना
सीएसएस विजेट

यह एक महत्वपूर्ण हिस्सा है, इसे न हटाएं।

✔ 4.2.3 पृष्ठ शीर्षक

<title><data:blog.pageTitle/></title>

पृष्ठ के अनुसार नाम खींचें, जैसे:

होम → ब्लॉग का नाम
पोस्ट प्रदर्शन पृष्ठ → पोस्ट का नाम
लेबल वाला पृष्ठ → लेबल का नाम

✔ 4.2.4 Google फ़ॉन्ट्स डाउनलोड करें

<link href="https://fonts.googleapis.com/css2?family=Kanit..." />

साइट पर फ़ॉन्ट सेट करें

🔶 4.3. `<b:skin>` — टेम्पलेट का CSS अनुभाग

ब्लॉगर को सभी CSS को अपने अंदर शामिल करना होगा <b:skin><![CDATA[ ... ]]></b:skin>

✔ 4.3.1 वेबसाइट की मुख्य शैली परिभाषित करें।

body {
  font-family:'Kanit';
  background:#f7f9fc;
  color:#333;
}

पृष्ठभूमि रंग, फ़ॉन्ट, पाठ रंग सेट करें

✔ 4.3.2 हेडर स्टिकी

header {
  position:sticky;
  top:0;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

स्क्रॉल करते समय → हेडर शीर्ष पर संलग्न होता है

✔ 4.3.3 नेविगेशन मेनू

nav ul {
  display:flex;
  gap:20px;
  list-style:none;
}

फ्लेक्सबॉक्स के साथ क्षैतिज मेनू

✔ 4.3.4 2-स्तंभ लेआउट संरचना

.container {
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:20px;
}

स्तंभ	चौड़ाई
साइड बार	300px निश्चित
मुख्य सामग्री	1fr (पूरी तरह से फैलने योग्य)

✔ 4.3.5 पोस्ट कार्ड (लेख सूची के लिए)

.post-card {
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

सुंदर पोस्टकार्ड बनाएं

✔ 4.3.6 साइडबार बॉक्स

.sidebar {
  background:#fff;
  border-radius:12px;
  padding:20px;
}

साइडबार की शैली कार्ड जैसी है।

✔ 4.3.7 पाद

footer {
  background:#222;
  color:#eee;
  text-align:center;
}

✔ 4.3.8 बैक-टू-टॉप बटन

.back-to-top {
  position:fixed;
  bottom:20px;
  right:20px;
  background:#008f7a;
  width:50px;
  height:50px;
  border-radius:50%;
  display:none;
}

अभी के लिए बटन छिपाएँ.

✔4.3.9 उत्तरदायी मोबाइल

@media (max-width:900px) {
  .container {
    grid-template-columns:1fr;
  }
}

मोबाइल → 1 कॉलम में बदलें

🔶 4.4 भाग `<body>`

✔ हेडर

<header>
  <h1><data:blog.title/></h1>
  <nav>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

ब्लॉग का नाम प्रदर्शित करने के लिए खींचें

✔ लेआउट: साइडबार + मुख्य

<div class="container">

📌 साइडबार

<aside class="sidebar">
  <b:section id='sidebar'/>
</aside>

है विजेट प्लेसमेंट क्षेत्र जैसे कि:

लोकप्रिय पोस्ट
लेबल
एचटीएमएल/जेएस
प्रोफ़ाइल

ब्लॉगर के लेआउट पृष्ठ के माध्यम से जोड़े गए उपयोगकर्ता

📌 मुख्य सामग्री

<main>
  <b:section id='main'>
    <b:widget type='Blog'/>
  </b:section>
</main>

यह टेम्पलेट का हृदय है।
प्रदर्शन:

पोस्ट सूची
पूरा लेख
चित्र
पृष्ठ पर अंक लगाना
टिप्पणी प्रपत्र

✔ पाद

<footer>
  © <data:blog.title/>
</footer>

✔ बैक-टू-टॉप बटन + स्क्रिप्ट

बटन

<button id="back-to-top" class="back-to-top">↑</button>

कार्यशील स्क्रिप्ट

window.addEventListener('scroll', () => {
  btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
});

शर्त: नीचे स्क्रॉल करें > 200px → बटन दिखाएँ

btn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

क्लिक करने पर → ऊपर की ओर आसानी से स्क्रॉल करें

✨ यह कोड क्या करता है इसका सारांश

भाग	यह कैसे काम करता है?
XML नामस्थान	ब्लॉगर टैग सक्षम करें
व्यूपोर्ट	एक उत्तरदायी वेबसाइट बनाएं
सभी-शीर्ष-सामग्री	स्वचालित SEO मेटा
हैडर	स्टिकी + नेविगेशन
पात्र	2-स्तंभ ग्रिड लेआउट
साइड बार	लेआउट पृष्ठ से विजेट रखें
मुख्य अनुभाग	ब्लॉग पोस्ट स्वचालित रूप से प्रदर्शित करें
सीएसएस	संपूर्ण UI डिज़ाइन करें
उत्तरदायी	मोबाइल के लिए अनुकूलित लेआउट
शीर्ष पर वापस जाएं	स्वचालित स्क्रॉल अप बटन

5. ब्लॉगर पूर्ण सुविधाएँ साइडबार बाएँ और दाएँ

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b' 
      xmlns:data='http://www.google.com/2005/gml/data' 
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
    <meta content='width=1200, initial-scale=1.0' name='viewport'/> 
  </b:if> 

  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>


  <link href='https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&amp;display=swap' rel='stylesheet'/>

  <b:skin><![CDATA[
    /* ---------- Variables ---------- */
    :root {
      --primary-color: #008f7a;
      --layout-max-width: 1200px;
      --sidebar-width: 250px;
    }

    /* ---------- Reset ---------- */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Kanit', sans-serif;
      background: #f7f9fc;
      color: #333;
      line-height: 1.6;
    }

    a { text-decoration: none; color: inherit; }
    a:hover { color: var(--primary-color); }

    header {
      background: #fff;
      padding: 15px 30px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 { color: var(--primary-color); font-size: 1.5rem; }
    nav ul { display: flex; gap: 20px; list-style: none; }
    nav li { font-weight: 500; }

    /* ---------- Layout ---------- */
    .container {
      display: grid;
      grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
      gap: 20px;
      max-width: var(--layout-max-width);
      margin: 30px auto;
      padding: 0 15px;
    }

    main { display: flex; flex-direction: column; }

    .post-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s;
    }
    .post-card:hover { transform: translateY(-4px); }
    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
    .post-card p { color: #666; }

    /* ---------- Sidebar ---------- */
    .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      height: fit-content;
    }
    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--primary-color); }

    /* ---------- Footer ---------- */
    footer {
      background: #222;
      color: #eee;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }

    /* ---------- Back to Top ---------- */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--primary-color);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 20px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .back-to-top:hover { background: darken(var(--primary-color), 10%); }

    /* ---------- Responsive ---------- */
    @media screen and (max-width: 1200px) {
      .container { grid-template-columns: 200px 1fr 200px; }
    }

    @media screen and (max-width: 900px) {
      .container { grid-template-columns: 1fr; }
      .sidebar { margin-bottom: 20px; }
    }
  ]]></b:skin>
</head>

<body>
  <!-- Header -->
  <header>
    <h1><data:blog.title/></h1>
    <nav>
      <ul>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Container: Left Sidebar + Main + Right Sidebar -->
  <div class="container">
    <!-- Left Sidebar -->
    <aside class="sidebar">
      <h3>Left Menu</h3>
      <b:section id='left-sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>

    <!-- Main Content -->
    <main>
      <b:section id='main' class='main' showaddelement='yes'>
        <b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'/>
      </b:section>
    </main>

    <!-- Right Sidebar -->
    <aside class="sidebar">
      <h3>Right Menu</h3>
      <b:section id='right-sidebar' class='sidebar-widgets' showaddelement='yes'/>
    </aside>
  </div>

  <!-- Footer -->
  <footer>
    <p>© <data:blog.title/> - Powered by Blogger</p>
    <p><a href='//siammakemoney.com' style='color:#00c9a7;'>siammakemoney.com</a></p>
  </footer>

  <!-- Back to Top -->
  <button id="back-to-top" class="back-to-top">↑</button>

  <script>
    const btn = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
      btn.style.display = window.scrollY > 200 ? 'flex' : 'none';
    });
    btn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

–प्राथमिक-रंग: #008f7a; /* प्राथमिक रंग, संपादन योग्य /

–लेआउट-अधिकतम-चौड़ाई: 1200px; / लेआउट की चौड़ाई समायोजित करें /

–साइडबार-चौड़ाई: 250px; / साइडबार की चौड़ाई */

6. बुलेट (सामने का बिंदु) हटाएँ।

(बुलेट पॉइंट इस प्रकार है)

ul, ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

7. एक सरल 20×20 पिक्सेल छवि जोड़ें।

<img src="https://example.com/icon.png" alt="icon" width="20" height="20">

8. आसानी से फ़ॉन्ट विस्मयकारी आइकन जोड़ें।

8.1 फ़ॉन्ट विस्मयकारी CDN जोड़ें (यदि पहले से उपलब्ध नहीं है)

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css' rel='stylesheet'/>

8.2 फ़ॉन्ट विस्मयकारी आइकन जोड़ें और उसका आकार बदलें।

<i class="fa-solid fa-house" style="font-size:20px;"></i>

8.2 फ़ॉन्ट विस्मयकारी आइकन में रंग जोड़ें

<style>
.icon-small {
  font-size: 20px;
  color: #000; /* เปลี่ยนสีไอคอนได้ */
}
</style>

<i class="fa-solid fa-heart icon-small"></i>

&amp;

9. ब्लॉगर थीम एक सुंदर शीर्ष मेनू जोड़ता है।

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
   <meta content='width=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Reset body */
body {
  margin: 0;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4; /* สีพื้นหลัง */
}

/* Container เมนู */
.radio-inputs {
  position: relative;
  display: flex;
  border-radius: 1rem;
  background-image: linear-gradient(to right, #31c7c1, #499b87, #4a715b, #3d4a3b, #262724);
  box-sizing: border-box;
  font-size: 17px;
  width: 80%;
  padding: 1rem 1rem 0 1rem;
}

/* ซ่อน radio จริง */
.radio-inputs .radio input {
  display: none;
}

/* ปุ่มเมนู */
.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0.8rem;
  color: #fff;
  transition: all 0.15s ease-in-out;
  position: relative;
}

/* ปุ่มที่ถูกเลือก */
.radio-inputs .radio input:checked + .name {
  background-color: #FFFFFF;
  font-weight: 600;
  color: #000;
}

/* Hover */
.radio-inputs .radio input + .name:hover {
  color: #fff;
}
.radio-inputs .radio input:checked + .name:hover {
  color: #000;
}

/* มุมโค้งสวย ๆ เวลาเลือก */
.radio-inputs .radio input:checked + .name::after,
.radio-inputs .radio input:checked + .name::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 0;
}

.radio-inputs .radio input:checked + .name::after {
  right: -10px;
  border-bottom-left-radius: 300px;
  box-shadow: -3px 3px 0px 3px #FFFFFF;
}
.radio-inputs .radio input:checked + .name::before {
  left: -10px;
  border-bottom-right-radius: 300px;
  box-shadow: 3px 3px 0px 3px #FFFFFF;
}
]]></b:skin>

 </head>
 <body>
  <!-- Navigation Menu -->
  <div class='radio-inputs'>
    <label class='radio'>
      <input checked='' name='radio' type='radio'/>
      <span class='name'>Home</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>HTML</span>
    </label>

    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>CSS</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>JS</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>PHP</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>Name</span>
    </label>
    
    <label class='radio'>
      <input name='radio' type='radio'/>
      <span class='name'>Menu</span>
    </label>
  </div>
  <!-- Main Section -->
  <b:section class='main' id='main' showaddelement='yes'/>
  

</body>

</html>

สามารถใส่ script ก่อนปิด </body> หรือ หาแท็ก <head>

उपयोग और बजाय और हमेशा

टेम्पलेट में कम से कम एक b:section टैग अवश्य होना चाहिए.

10. ब्लॉगर टेम्पलेट कोड (SEO के साथ)

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

  <!-- VIEWPORT -->
  <b:if cond='data:blog.isMobile'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'/>
  <b:else/>
    <meta name='viewport' content='width=1100'/>
  </b:if>

  <!-- Blogger HEAD -->
  <b:include data='blog' name='all-head-content'/>

  <!-- TITLE -->
  <title><data:blog.pageTitle/></title>

  <!-- ==========================
        SEO META TAGS
       ========================== -->

  <!-- Meta Description -->
  <meta name="description" expr:content="data:blog.metaDescription"/>

  <!-- Keywords -->
  <meta name="keywords" content="blogger, seo, website, travel, tutorial"/>

  <meta name="author" content="Your Name"/>

  <!-- Open Graph (Facebook / LINE) -->
  <meta property="og:title" expr:content="data:blog.pageTitle"/>
  <meta property="og:description" expr:content="data:blog.metaDescription"/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" expr:content="data:blog.url"/>
  <meta property="og:image" expr:content="data:blog.postImageUrl"/>

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" expr:content="data:blog.pageTitle"/>
  <meta name="twitter:description" expr:content="data:blog.metaDescription"/>
  <meta name="twitter:image" expr:content="data:blog.postImageUrl"/>

  <!-- Canonical -->
  <link rel="canonical" expr:href="data:blog.url"/>

  <!-- Robots -->
  <meta name="robots" content="index, follow"/>
  <meta name="googlebot" content="index, follow"/>

  <!-- Schema.org -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "<data:blog.homepageUrl/>",
    "name": "<data:blog.title/>",
    "alternateName": "<data:blog.title/>"
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="YOUR-FAVICON-URL.png"/>

  <!-- ==========================
        CSS ZONE
       ========================== -->
  <b:skin>
    <![CDATA[
      /* ----- Your CSS Here ----- */
      body { font-family: sans-serif; }
    ]]>
  </b:skin>

</head>

<body>

  <!-- MAIN CONTENT SECTION -->
  <b:section class='main' id='main' showaddelement='yes'/>

  <!-- CREDITS -->
  <center><a href="//siammakemoney.com/">siammakemoney.com/</a></center>

</body>
</html>

फेसबुक टिप्पणी बॉक्स

ब्लॉगर

एडमिन.सियामकेमनी

पर25 सितंबर,

209 दृश्य

पिछला लेख

शुरुआती लोगों के लिए ब्लॉगर थीम निर्माण गाइड: ब्लॉगर ब्लैंक पेज

ब्लॉगर थीम निर्माण मार्गदर्शिका

HTML के साथ एक “वास्तव में खाली” खाली पृष्ठ बनाएं

1. कोड ब्लॉगर थीम रिक्त ब्लॉगर रिक्त पृष्ठ

मूल कोड समझाएँ

✔ यह अनुभाग XML घोषित करने और नामस्थान परिभाषित करने के लिए है।

✔ इंटरनेट एक्सप्लोरर को IE7 की तरह प्रदर्शित करने के लिए सेट करें

✔ मोबाइल / डेस्कटॉप के लिए विभाजित स्क्रीन आकार सेट करें

✔ ब्लॉगर को सामग्री शामिल करने के लिए कहें <head> ब्लॉगर मानक

✔ ब्लॉग पेज के नाम से वेब पेज का नाम रखें।

✔ थीम CSS डालने के लिए अनुभाग

✔ ब्लॉगर का मुख्य सामग्री प्रदर्शन अनुभाग

✔ HTML संरचना बंद करें

2. ब्लॉगर थीम (कोई साइडबार नहीं)

🧱 वेबसाइट शीर्ष (शीर्षक)

📰 सामग्री अनुभाग

सामग्री अनुभाग यह कैसे काम करता है?

📘 फ़ुटबाल

2.1 विभिन्न ब्लॉगर्स में संरचना

2.2 ब्लॉगर शीर्षक जोड़ें

3. थीम साइडबार गैजेट/विजेट जोड़ता है।

✅ 3.1. XML घोषणा और नामस्थान अनुभाग

व्याख्या करना

✅ 3.2. <head> वेबसाइट हेडर

3.2.1 पुराने इंटरनेट एक्सप्लोरर का समर्थन करता है

3.2.2 मोबाइल/डेस्कटॉप व्यूपोर्ट

3.2.3 ब्लॉगर हेडर को स्वचालित रूप से लोड करें

3.2.4 पृष्ठ का नाम इस प्रकार खींचें <title>

3.2.5 Google फ़ॉन्ट्स लोड करें

🎨3.3 सभी CSS (अंदर <b:skin>)

🧱 4. वेबसाइट हेडर

व्याख्या करना

📰 5. सामग्री कंटेनर लेआउट

5.1 मुख्य सामग्री

5.2 साइडबार

🧩 6. पाद

व्याख्या करना

⬆️ 7. बैक-टू-टॉप बटन

4. ब्लॉगर साइडबार बाएँ थीम कोड + मेनू जोड़ें

🔷 इस थीम में कोड का अवलोकन

🔶 4.1. XML घोषणा और नामस्थान अनुभाग

✔ समझाएँ

🔶 4.2. <head> — वेब हेडर

✔4.2.1 मोबाइल के लिए व्यूपोर्ट

✔ 4.2.2 ब्लॉगर के स्वतः-निर्मित मेटा और स्क्रिप्ट जोड़ें

✔ 4.2.3 पृष्ठ शीर्षक

✔ 4.2.4 Google फ़ॉन्ट्स डाउनलोड करें

🔶 4.3. <b:skin> — टेम्पलेट का CSS अनुभाग

✔ 4.3.1 वेबसाइट की मुख्य शैली परिभाषित करें।

✔ 4.3.2 हेडर स्टिकी

✔ 4.3.3 नेविगेशन मेनू

✔ 4.3.4 2-स्तंभ लेआउट संरचना

✔ 4.3.5 पोस्ट कार्ड (लेख सूची के लिए)

✔ 4.3.6 साइडबार बॉक्स

✔ 4.3.7 पाद

✔ 4.3.8 बैक-टू-टॉप बटन

✔4.3.9 उत्तरदायी मोबाइल

🔶 4.4 भाग <body>

✔ हेडर

✔ लेआउट: साइडबार + मुख्य

📌 साइडबार

📌 मुख्य सामग्री

✔ पाद

✔ बैक-टू-टॉप बटन + स्क्रिप्ट

बटन

कार्यशील स्क्रिप्ट

✨ यह कोड क्या करता है इसका सारांश

5. ब्लॉगर पूर्ण सुविधाएँ साइडबार बाएँ और दाएँ

6. बुलेट (सामने का बिंदु) हटाएँ।

7. एक सरल 20×20 पिक्सेल छवि जोड़ें।

8. आसानी से फ़ॉन्ट विस्मयकारी आइकन जोड़ें।

8.1 फ़ॉन्ट विस्मयकारी CDN जोड़ें (यदि पहले से उपलब्ध नहीं है)

8.2 फ़ॉन्ट विस्मयकारी आइकन जोड़ें और उसका आकार बदलें।

8.2 फ़ॉन्ट विस्मयकारी आइकन में रंग जोड़ें

9. ब्लॉगर थीम एक सुंदर शीर्ष मेनू जोड़ता है।

10. ब्लॉगर टेम्पलेट कोड (SEO के साथ)

15 मुफ्त प्लगइन्स लिंक प्रबंधित करें लिंक सम्मिलित करें लिंक वर्डप्रेस पर एएफएफ लिंक को छोटा करें तुलना करें

आगे पढ़िए

शुरुआती लोगों के लिए ब्लॉगर कैसे बनाएं (3 मिनट में) और गुप्त टिप्स जो आप नहीं जानते

कॉपी करने से रोकने के लिए 10 जावास्क्रिप्ट कोड ❌ वेबसाइट पर टेक्स्ट कॉपी न करें।

✔ ब्लॉगर को सामग्री शामिल करने के लिए कहें `<head>` ब्लॉगर मानक

✅ 3.2. `<head>` वेबसाइट हेडर

3.2.4 पृष्ठ का नाम इस प्रकार खींचें `<title>`

🎨3.3 सभी CSS (अंदर `<b:skin>`)

🔶 4.2. `<head>` — वेब हेडर

🔶 4.3. `<b:skin>` — टेम्पलेट का CSS अनुभाग

🔶 4.4 भाग `<body>`