blogger template कैसे create करे from scratch - ldkalink
Custom blogger template कैसे बनाये: ब्लॉगर यह एक content management system (CMS) है यहाँ से हम अपने लिए एक website create कर इसकी सहायता से अपने नॉलेज को बड़ी ही आसानी से लोगो तक पहुंचा सकते है।
website या Blog बनाने के लिए एक Domain name के साथ एक Template की भी जरूरत होती है क्यों हर साइट का अपना एक अलग नाम और लुक होता है internet पर कभी भी एक नाम के दो साइट नहीं हो सकते है।
वैसे तो इंटेंटनेट पर कई सारे पहले से बना हुआ फ्री और पेड दोनों तरह के टेम्पलेट मौजूद होते है free वाले टेम्पलेट में कुछ लिमिटेशन होता है और पेड वर्शन में कुछ सुविधाएं और दे दी जाती है।
पर इसे हम अपने तरीके से पूरी तरह कस्टमाइज नहीं कर सकते है इसलिए हमें एक कस्टम ब्लॉगर टेम्पलेट क्रिएट करने की जरूरत होती है जिसे हम अपने तरीके से बना सकते है।
लेकिन यदि आप खुद से यानि blogger में manual method से Custom template कैसे create करते है इसके बारे में जानना चाहते है तो आज से इस आर्टिकल में हम how to make a blogger template हिंदी में सिखने वाले है यानि blogger में custom template कैसे design करते है।
इसके लिए किस तरह का सिंटेक्स ब्लॉगर प्लेटफॉर्म पर यूज़ किया जाता है क्या क्या जरुरी चीजे इसमें शामिल होती है जो हमें एक थीम बनाते समय इसमें ऐड करना होता है इन सब के बारे में आज हम बात करने वाले है।
 |
| Create blogger template basic syntax |
ब्लॉगर टेम्पलेट जिसे पहले थीम के नाम से भी जाना जाता है यह एक तरह का XML फाइल होता है ब्लॉगर टेम्पलेट बनाते समय CSS, XML, JavaScript जैसे कई सारे लैंग्वेज का यूज़ जरूरत पढ़ने पर इसमें यूज़ किया जाता है।
अभी हम manual method से blogger टेम्पलेट का basic structure बनाना सीखेंगे इसके लिए ब्लॉगर के edit theme सेक्शन में जाकर इसमें कोडिंग करके एक layout इसके लिए बनाते है।
यदि आप कोडिंग फ़ास्ट करना चाहते है इसके लिए कई सारे सॉफ्टवेयर आपको इंटरनेट पर मिल जाते है इसका उपयोग करके आप अपने कोड़िंग वाला वर्क बहुत ही फ़ास्ट कर सकते है या फिर आप ब्लॉगर के html वाले सेक्शन में भी कोडिंग कर सकते है।
blogger Template create करने के लिए coding का नॉलेज होना जरुरी होता है तभी आप अपने तरीके से यानि manual method से एक शानदार थीम बना सकते है तो चलिए अब हम ब्लॉगर टेम्पलेट कैसे बनाते देखते है।
Custom blogger template कैसे create करे
how to create blogger template in Hindi: टेम्पलेट बनाने के लिए जितने भी code का use हम करेंगे वे सभी ब्लॉगर के main.xml में लिखा जाता है और इसके Basic layout के लिए जो syntax उपयोग किया जाता है वह इस प्रकार है :-
Step 1: Basic layout बनाने के लिए syntax
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>ब्लॉगर पर टेम्पलेट बनाने के लिए इसके अनुसार इसमें कुछ जरुरी चीजे जैसे XHTML और blogger elements का होना जरुरी होता है और साथ ही namespace का भी यूज़ इसमें करना होता है।
namespace (xmlns) जो की गूगल द्वारा पहले ही बनाया गया है जिसका उपयोग हम ब्लॉगर टेम्पलेट बनाते समय करते है तीन तरह से namespace इसमें उपयोग में लाया जाता है।
- xmlns:b - 'b' इस namespace का उपयोग blogger elements तक पहुंचने के लिए किया जाता है।
- xmlns:data - इसका उपयोग कर यह बताया जाता है की ब्लॉग का डाटा कहा से आता है।
- xmlns:expr - इसका use attributes के expression को कैलकुलेट करने के लिए किया जाता है।
Basic layout syntax को ब्लॉगर के theme में कैसे add करे
- Blogger.com पर login करे।
- इसके dashboard के left मेनू में theme ऑप्शन पर क्लिक करे।
- customize ऑप्शन में डाउन एरो पर क्लिक करे।
- edit html पर क्लिक करे।
जब आप एडिट html पर क्लिक करते है तो इसमें डिफ़ॉल्ट रूप से कोडिंग रहता है पहले इस पुरे coding को डिलीट कर ले delete करने के लिए ctrl + a करके एक साथ पुरे coding को सेलेक्ट कर के कीबोर्ड से डिलीट बटन प्रेस करे या backspace प्रेस करे।
उसके बाद बताये गए Basic layout syntax के कोडिंग को यहाँ पेस्ट करे क्यों की हम ब्लॉगर में एक नए टेम्पलेट डिज़ाइन कर रहे है।
कोड पेस्ट करने के बाद इसे सेव करके देखते है जैसे ही हम इसे सेव करते है यहाँ कुछ एरर दिखाई देगा जिसमे "There should be one and only one skin in the theme, and we found 0". लिखा हुआ है।
यह मैसेज इसलिए दिया जा रहा है क्यों की blogger टेम्पलेट में <b:skin> वाला कोड का होना अनिवार्य होता है यदि आप इसे कोडिंग में शामिल नहीं करते है तो आपका टेम्पलेट सेव नहीं होगा।
<b:skin> syntax format
<b:skin>
<![CDATA[
/* Custom CSS rules goes here... */
]]>
</b:skin>
इस ऊपर दिए हुए कोड को <head> कोड यहाँ पेस्ट करे </head> टैग के बिच में पेस्ट करे।
इसका उपयोग CSS coding करने के लिए किया जाता है जहा पर custom css rules goes here लिखा हुआ है यहाँ पर टेम्पलेट का css कोड लिखा जयेगा।
इतना करने के बाद इसे दुबारा सेव करके देखते है हम पाते है की यह अभी भी सेव नहीं हो रहा है और यह एरर "We din not find any section in your theme. A theme must have at least one b:section tag." दिखाई दे रहा है।
इस मैसेज में यह बताया जा रहा है की ब्लॉगर के टेम्पलेट में कम से कम एक 'b' सेक्शन जरूर होना चाहिए जो की कम्पलसरी होता है।
इतना करने के बाद आप एक बार और थीम को सेव करके देखते है तो आप देखेंगे की यह थीम successfully सेव हो चूका है।
Section
blogger टेम्पलेट में Sections क्या होता है और इसका उपयोग क्यों किया जाता है इसका उपयोग layout elements को दर्शाने के लिए किया जाता है।
अपने कभी नोटिस किया होगा की जब भी हम कोई वेबसाइट ओपन करते है तो यह कई सारे ब्लॉक में बटा होता है इसे ही हम सेक्शन कहते है।
जैसे की header section इसके अंतर्गत वेबसाइट के हैडिंग को डिस्प्ले किया जाता है उसी तरह से navigation menu वेबसाइट में जितने भी मेनू होंगे इसको इसी में रखा जाता है उसी तरह से sidebar, main content, footer, social icon के लिए सेक्शन हम इसमें क्रिएट कर सकते है।
Basic Sections format
<b:section id=’ ‘ class=' ' maxwidgets=' ' showaddelement=' '>
<b:widget……../>
</b:section>
निचे लिखा हुआ Section एक wrong format है:
<b:section id=' ' class=' ' maxwidgets=' ' showaddelement=' '>
<h1>Content heading</h>
<div>Content</div>
</b:section>ये भी ध्यान रखे की सेक्शन में HTML कोड का उपयोग नहीं करना होता है पर इसके आस पास में हम html coding का use कर सकते है।
Section Attributes
सेक्शन क्रिएट करने के बाद इसमें attribute ऐड करने होते है जिसमे id सिर्फ required attribute होता है इसके अलावा और जो भी attributes उपयोग किये जाते है ये सभी optional होते है।
- id -
- class -
- maxwidgets -
- showaddelement -
- groth -
widget attributes
widget में कई तरह से एट्रिब्यूट यूज़ किये जाते है जिसमे id और type केवल required होता है और इसके अलावा जो ऐट्रिब्यूट्स होते है वे एक तरह से ऑप्शनल होते है।
- id - इसमें केवल letters और number को ऐड किया जा सकता है इसमें प्रत्येक widget id एक यूनिक होता है जब कभी हमें विजेट को चेंज करना हो तो इसे डिलीट करके या फिर नया जोड़कर ही इसे बदल सकते है।
- type - यह एक तरह से widget के प्रकार हो दर्शाता है निचे दिए गए लिस्ट में से इसमें से कोई भी हो सकता है।
- BlogArchive
- Feed
- Blog
- Header
- HTML
- Link list
- Singleimage
- List
- Logo
- Blo profile
- Navbar
- Videobar
- Newsbar
section के लिए widgets एक इम्पोर्टेन्ट पार्ट होता है जहा पर real data को डिस्प्ले किया जाता है और यह एक placeholder की तरह कार्य करता है।
ब्लॉगर में पहले से ही कुछ default widgets होते है इसके अलावा यदि आप अपना ख़ुद का custom widgets इसमें ऐड करना चाहते है तो इसे बढ़ी ही आसानी से लगा सकते है।
Step 2. add section syntax
blogger template बनाते समय पहले इसे कई सारे सेक्शन में divide किया जाता है इसके बेसिक सेक्शन जैसे की Header, Footer, Sidebar, Content इसके अलावा भी कई सारे सेक्शन क्रिएट किये जा सकते है।
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section> Blogger के html coding में section कैसे add करे
blogger template में section को add करने के लिए ऊपर बताये गए Basic layout syntax के <body> code को यहाँ पेस्ट करे </body> वाले पार्ट में ऊपर दिए गए syntax को पेस्ट करना है।
Step 3: widget syntax का उपयोग करना
widgets का उपयोग section के अंदर किया जाता है syntax का उपयोग करने के बाद यह कुछ इस तरह से दिखाई देगा हमारे द्वारा जो content लिखा जायेगा इसे बनाये हुए सेक्शन में दिखने के लिए Widget element का यूज़ किया जाता है।
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>- locked - इसमें दो ऑप्शन 'yes' और 'no' होता है जिसमे default value 'no' होता है जब यह लॉक होता है तो इसे page element tab से न move किया जा सकता है और न ही इसे delete किया जा सकता है।
- title - यह widget के टाइटल को दर्शाता है इसमें जो भी टेक्स्ट ऐड करेंगे वह इसके टाइटल के रूप में शो होगा और default title के रूप में 'List1' का यूज़ होता है।
- page Type - यह इसमें से सभी हो सकता है 'Archive,' 'main,' या फिर 'items'. इसमें सभी डिफ़ॉल्ट है widget केवल designed page पर ही दिखाई देगा।
- mobile - इसमें 'yes' और 'no' या डिफ़ॉल्ट भी होता है इसके द्वारा यह बताया जाता है की यह widget मोबाइल में दिखाई देगा या नहीं सिर्फ Header, Blog, profile, PageList, Adsense, Attribute ही मोबाइल पर दिखाई देगा यदि यह default mode में होगा।
save theme
widget syntax ऐड करने के बाद थीम को save कर लेते है सेव बटन क्लिक करते ही successfully का मैसेज शो होगा इस तरह से आप ब्लॉगर टेम्पलेट क्रिएट करने के लिए इसमें बताये गए बेसिक सिंटेक्स का उपयोग कर सकते है।
यदि आप इसे देखना चाहते है की सेक्शन क्रिएट हुआ है की नहीं, तो ब्लॉगर के डैशबोर्ड में लेफ्ट मेनू में layout पर क्लिक करके देख सकते है।
आज एक इस आर्टिकल में हमने जाना की ब्लॉगर पर टेम्पलेट क्रिएट करने के लिए इसका बेसिक सिंटेक्स क्या होता है और इसका यूज़ ब्लॉगर के html coding वाले सेक्शन में कैसे किया है।
इतना करने के बाद अब हम एक पोस्ट करके देखते है की यह किस तरह दिखाई देता है अभी यह एक सिपंल ही दिखाई देगा क्यों की अभी यह एक रेस्पॉन्सिव टेम्पलेट नहीं है।
नेक्स्ट आर्टिकल में हम ब्लॉगर blogger template को customize कैसे करते है जिसमे navigation bar create करना बताया जायेगा और इसके लिए किस तरह से html coding, CSS coding, java लैंग्वेज का यूज़ करते है इसके बारे में स्टेप बय स्टेप सिखने वाले है।
टिप्पणियाँ
एक टिप्पणी भेजें
please do not enter any spam link in the comment box.