ब्लॉगर टेम्पलेट डिजाइनर

जैसा कि आप जानते होंगे कि Google का अपना एक ब्लॉगिंग प्लेटफॉर्म है, जिसे ब्लॉगर कहा जाता है। इसी तरह की सेवाओं के बीच इसकी विशिष्ट विशेषता टेम्पलेट संपादन के लिए इसकी पहुंच है, जहां आप अपने ब्लॉग की उपस्थिति और लेआउट के साथ कुछ भी कर सकते हैं। जो लोग एचटीएमएल / सीएसएस / जेएस नहीं जानते हैं, उनके लिए अपनी शैली बनाने का अवसर टेम्पलेट डिजाइनर की घोषणा के बाद ही दिखाई दिया। हालांकि, यह संपादक केवल मानक टेम्पलेट्स के साथ सही ढंग से काम करता है, जिनमें से कई नहीं हैं।



" ब्लॉगर टेम्पलेट एनाटॉमी " लेख में, एक टेम्पलेट डिजाइनर के साथ काम करने के लिए एक कस्टम टेम्पलेट स्थापित करने का प्रश्न लेखक द्वारा छोड़ा गया था, इसलिए मैंने इस अंतर को भरने का फैसला किया।

चर

गैर-मानक टेम्पलेट में इस संपादक का समर्थन करने के लिए, आपको उन चरों को जोड़ना होगा जो कुछ इस तरह दिखते हैं:

<Variable name="NAME" description="DESCRIPTION" type="TYPE" default="DEFAULT VALUE" value="VALUE"/> 

• name='' - चर का नाम जिसे बाद में शैलियों में उपयोग किया जाएगा। केवल लैटिन, संख्या और कुछ वर्णों की अनुमति है।
• description='' - वैरिएबल डिज़ाइनर में प्रदर्शित होने वाले वेरिएबल का विवरण। ऐसे अर्थ हैं जो कई भाषाओं में अनुवादित हैं (नीचे दी गई सूची)।
• type='' - चर का प्रकार। उनमें से 4 हैं: background , length , font , color ।
• default='' - डिफ़ॉल्ट मान। यदि आप टेम्पलेट की अलग-अलग सेटिंग्स रीसेट करते हैं तो यह स्थापित हो जाएगा।
• value='' - चर का वर्तमान मूल्य। प्रारंभ में, इसे डिफ़ॉल्ट मान से मेल खाना चाहिए, फिर इसे उपयोगकर्ता द्वारा बदला जा सकता है।

पृष्ठभूमि

 <Variable name="body.background" description="Body Background" type="background" color="#ffffff" default="$(color) url(none) no-repeat fixed top left" value="#dddddd url(none) repeat fixed top center"/> 

पृष्ठभूमि का निर्धारण करने के लिए चर का उपयोग केवल एक बार और पूरे ब्लॉग के लिए किया जा सकता है। इसके अलावा, केवल इस प्रकार के चर के साथ आप अतिरिक्त पैरामीटर color='' उपयोग कर सकते हैं - यह पृष्ठभूमि छवि की अनुपस्थिति में ब्लॉग के पृष्ठभूमि रंग के लिए जिम्मेदार है। नाम और विवरण को बदलने की अनुशंसा नहीं की जाती है, क्योंकि संपादक चर नहीं देख सकता है। चर मान को सीएसएस गुणों द्वारा निम्नलिखित क्रम में सेट किया गया है: [ पृष्ठभूमि-रंग ] [ पृष्ठभूमि-छवि ] [ पृष्ठभूमि-दोहराना ] [ पृष्ठभूमि-लगाव ] [ पृष्ठभूमि-स्थिति ]।

मूल्य

 <Variable name="post.border.radius" description="Post Border Radius" type="length" default="10px" value="5px"/> 

मान को परिभाषित करने वाला एक चर टेम्पलेट डिजाइनर में संपादन योग्य नहीं है। क्या अफ़सोस है।

फ़ॉन्ट

 <Variable name="post.title.font" description="Post Title Font" type="font" default="normal normal 16px/1.25 Arial, sans-serif" value="bold normal 22px/1.5 Tahoma, sans-serif"/> 

एक विशिष्ट तत्व के फ़ॉन्ट को निर्धारित करने के लिए एक चर। मूल्य सीएसएस गुणों के एक सेट द्वारा निम्न क्रम में निर्धारित किया गया है: [ फ़ॉन्ट-वजन ] [ फ़ॉन्ट-शैली ] [ फ़ॉन्ट-आकार / रेखा-ऊंचाई ] [ फ़ॉन्ट-परिवार ]।

रंग

 <Variable name="post.text.color" description="Text Color" type="color" default="#000000" value="#222222"/> 

एक तत्व के किसी भी भाग के रंग को निर्धारित करने के लिए एक चर: पृष्ठभूमि, पाठ, सीमा, छाया, आदि। मूल्य हेक्साडेसिमल प्रारूप में निर्दिष्ट है।

परिवर्तनीय समूह

कुछ चरों को एक समान चयनकर्ता द्वारा समूहों में जोड़ा जा सकता है (उदाहरण के लिए, ऐसे समूह "पृष्ठ पाठ", "पृष्ठभूमि", "लिंक", आदि लेख की शुरुआत में स्क्रीनशॉट में हैं), जो इस तरह दिखते हैं:

 <Group description="Widget Text" selector=".widget"> <Variable name="widget.text.font" description="Widget Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 12px Georgia, serif"/> <Variable name="widget.text.color" description="Text Color" type="color" default="#000000" value="#000000"/> <Variable name="widget.border" description="Border Color" type="color" default="#efefef" value="#efefef"/> <Variable name="widget.background" description="Background Color" type="color" default="#fff" value="#fff"/> </Group> 

समूह के दो मुख्य पैरामीटर हैं: description='' विवरण के लिए और selector='' उस तत्व के स्ट्रोक के साथ हाइलाइट करने के लिए जिसके लिए इस समूह के चर लागू होते हैं।

चर का उपयोग करना

टेम्प्लेट पर विशेष रूप से डिज़ाइन किए गए स्थान पर चर स्वयं लिखे जाने चाहिए।

 <b:skin><![CDATA[ /*    CSS- */ ]]></b:skin> 

एक चर का उपयोग करने के लिए, यह सीएसएस संपत्ति के बाद $(NAME) जोड़ने के लिए पर्याप्त है, जहां NAME वांछित चर का नाम है।

 .widget { background-color: $(widget.background); /* background-color: #fff; */ font: $(widget.text.font); /* font: normal normal 12px Georgia, serif; */ border: 1px solid $(widget.border); /* border: 1px solid #efefef; */ color: $(widget.text.color); /* color: #000000; */ } 

ब्लॉग की चौड़ाई

समान टेम्प्लेट डिज़ाइनर में, आप ब्लॉग की चौड़ाई और साइड कॉलम को बदल सकते हैं, हालाँकि, अजीब तरह से पर्याप्त है, गैर-मानक टेम्प्लेट में यह सुविधा खो जाएगी। इसे वापस करने के लिए, आपको इसमें शामिल चर के साथ खो <b:template-skin> अनुभाग जोड़ना होगा। आप इन चरों में नाम नहीं बदल सकते हैं, अन्यथा संपादक फिर से उन्हें "नहीं" देखेगा।

 <b:template-skin> <b:variable default='900px' name='content.width' type='length' value='1000px'/> <b:variable default='250px' name='main.column.left.width' type='length' value='200px'/> <b:variable default='250px' name='main.column.right.width' type='length' value='300px'/> <![CDATA[ /*  CSS-     */ .page { max-width: $(content.width); width: $(content.width); } .sidebar-left { width: $(main.column.left.width); } .sidebar-right { width: $(main.column.right.width); } ]]> </b:template-skin> 

वैरिएबल विवरण

ब्लॉगर के पास कई चर विवरण हैं जिनके अलग-अलग स्थानीयकरण हैं। मैं स्वयं चर के लिए और समूहों के लिए अलग से सूची देता हूं।

निष्कर्ष

मुझे उम्मीद है कि यह लेख उन लोगों के लिए उपयोगी होगा जो इस ब्लॉगिंग प्लेटफॉर्म के साथ काम करते हैं। इस मुद्दे पर मदद बहुत दुर्लभ है, इसलिए अधिकांश जानकारी टेम्पलेट्स के साथ कई प्रयोगों से तैयार की गई है। और हमेशा याद रखें कि ब्लॉगर के साथ काम करते समय मुख्य बात यह है कि कोई भी बदलाव करने से पहले टेम्पलेट का बैकअप लें;;