How to make Menu Bar in Blogger
Published on: Saturday, August 4, 2012 //
हामीहरु हरेकको टेम्प्लेट फरक-फरक हुने तथा यो मेनु राख्ने कुनै तयारी ग्याजेट भने नबनेकोले यसका कोडहरुमा टेम्प्लेट पिछ्चे केही सामान्य हेरफेर गर्नु पर्ने हुन सक्छ । यो पोष्टमा म सो सम्भावित कोडहरुलाई पनि हाईलाईट गरेर यो विधिलाई सम्भव भएसम्म सरल बनाउने कोसिस गर्ने छु ।
यो कोड- कन्टेन्टहरु मैले http://www.blogdoctor.me , http://www.blogbulk.com ,http://bloggeruniversity.blogspot.com र अन्य केही साईटबाट लिएको छु र सबैलाई मिसाएर सकेसम्म सरलीकरण गर्ने प्रयास गरेको छु । माथीका साईटहरु मध्य केही साईटहरु हाल अपडेट भैरहेका छैनन, तर ती सबै साईटहरु ब्लगरमा ब्लग चलाउनेको लागि एकदमै जानकारी मूलक र उपयोगी छन, विशेषगरी ब्लगरमा छेड-छाड गर्न रुचाउने सबैलाई म ती साईटहरु हेर्न सल्लाह दिन्छु ।
हुन त यो मेनु बनाउने तरिका ‘सेफ प्रोसेस’मै पर्छ, तैपनि, म सबैलाई आफ्नो लेआउटमा कुनै परिवर्तन गर्नु अगाडि पुरानो लेआउटको व्याकअप राख्न सल्लाह दिन्छु ।
अब सुरु गरौं मेनु राख्ने तयारी । यसको लागि सबैभन्दा पहिला आफ्नो टेम्प्लेटमा यो नयाँ मेनु बस्ने ठाउँ बनाउनु जरुरी हुन्छ । त्यसैले सबैभन्दा पहिला ब्लगरको Dashboard मा जानुहोस अनी Design हुँदैं Edit HTML मा।
१) अब “Edit Template” भन्दा मुनी देखीने कोड बक्समा निम्न कोड खोज्नुहोस्:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
(कोड खोज्न किबोर्डमा भएको ‘Ctrl’ र ‘F’ एकै पटक थीचेर खुल्ने सानो बक्समा यो कोड हाल्दा छिटो र सजिलो हुन्छ)
२) अब सो कोड भेटिए पछि त्यसमा भएको '1' लाई '2' बनाउनुहोस र 'no' लाई 'yes'। अर्थात माथिको कोडलाई निम्न बमोजिम परिवर्तन गर्नुहोस:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
र "SAVE TEMPLATE" थीच्नुहोस्।
३) अब Edit HTML भन्दा माथि बायाँ पट्टी रहेको "Design" मा थीच्नु भयो भने तपाईले माथिको चित्रमा जस्तै हेडर भन्दा माथि एउटा "Add a gadget" भन्ने नयाँ लामो बक्स देख्नु हुनेछ। त्यो "Add a Gadget" थीच्नुहोस। र त्यसपछि खुल्ने पेजमा “HTML/JavaScript 
” मा थिच्नुहोस।
” मा थिच्नुहोस।
४) अब खुल्ने कोड बक्समा “Title” खाली नै राख्नुहोस र Content मा भने तलको कोड कपि गरेर तल बताए जस्तै सामान्य परिवर्तन गरी पेष्ट गर्नुहोस: (कोड लामो छ तर नआत्तिनुहोस, यो अन्तिम चरण हो) । सजिलोको लागि यो कोडलाई पहिला कुनै वर्ड प्रोसेसरमा कपी गरेर तल बताईए जस्तै गरी आ-आफ्नो लेबलको url लिन्क हालेर पेष्ट गर्दा गल्ती नहुन सक्छ ।
कोड:
<style type="text/css">
/*- Menu Tabs J--------------------------- */
#tabsI {
width:850px;
margin:0px 30px 0;
background:#2D8930;
font-size:90%;
line-height:normal;
border-bottom:none;
}
#tabsI ul {
margin:0;
padding:0px 10px 0 10px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background: #2D8930;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background: #2D8930;
padding:5px 15px 4px 6px;
color: #ffffff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color: #FFCCFF; }
#tabsI a:hover {
background-position:100% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
<div id="tabsI">
<ul>
<li><a href="http://AAAAA.blogspot.com/" title="Home"><span>घर</span></a></li>
<li><a href="http://AAAAA.blogspot.com/search/label/XXXXX" title="Poem"><span>कविता</span></a></li>
</ul>
</div>
/*- Menu Tabs J--------------------------- */
#tabsI {
width:850px;
margin:0px 30px 0;
background:#2D8930;
font-size:90%;
line-height:normal;
border-bottom:none;
}
#tabsI ul {
margin:0;
padding:0px 10px 0 10px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background: #2D8930;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background: #2D8930;
padding:5px 15px 4px 6px;
color: #ffffff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color: #FFCCFF; }
#tabsI a:hover {
background-position:100% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
<div id="tabsI">
<ul>
<li><a href="http://AAAAA.blogspot.com/" title="Home"><span>घर</span></a></li>
<li><a href="http://AAAAA.blogspot.com/search/label/XXXXX" title="Poem"><span>कविता</span></a></li>
</ul>
</div>
५) अब "SAVE" मा थीच्नुहोस । बस सक्कियो।
ध्यान दिनु पर्ने केही कुराहरु:
माथिको कोडको अन्ततिर रहेको AAAAA को सट्टामा आफ्नो ब्लगको नाम राख्नुहोस। त्यस्तै XXXXXको ठाउँमा आफ्नो ब्लगको लेबल ।
माथीको कोडमा रहेको title="Home" वा title="Poem" मा भएको "Home" र "Poem" ले माउसको क्रसर कुनै पनि ट्याब माथि लग्दा देखिने ‘टुल टिप्स’ लाई बुझाउँछ भने वा <span> र </span> बीचमा रहेका “घर” र “कविता” जस्ता शब्दहरु भने ट्याबमा सधैं देखीने अक्षर समुह हुन ।
यसलाई सजिलो संग बुझ्न मेरै ब्लगको लेबल ट्याबमा माउस क्रसर लगेर हेर्न सक्नु हुन्छ । त्यहाँ “गृहपृष्ठ” मा माउसको क्रसर पुर्याउँदा ‘टुल टिप्स’ मा भने "Home" देखिनेछ । तपाई चाहनुहुन्छ भने यी दुबैमा एउटै शब्द पनि राख्न सक्नुहुन्छ ।
माथीको कोडमा मैले केवल ‘घर’ र ‘कविता’ भन्ने दुईवटा लेबल मात्रै राखेको छु, तर कोडको अन्तमा भएको
</ul>
</div>
</div>
भन्दा माथी आफुलाई थप्न मन लागेको लेबलको अरु लिन्कहरु पनि थप्न सकिन्छ । यसलाई सजिलो गरी बुझ्न:
<li><a href="http://AAAAA.blogspot.com/" title="Home"><span>घर</span></a></li>
<li><a href="http://AAAAA.blogspot.com/search/label/XXXXX" title="Poem"><span>कविता</span></a></li>
मुनि र
</ul>
</div>
</div>
भन्दा माथि
<li><a href="http://AAAAA.blogspot.com/search/label/YYYYY" title="Story"><span>कथा</span></a></li>
<li><a href="http://AAAAA.blogspot.com/search/label/ZZZZZ" title="News"><span>समाचार</span></a></li>
जस्तै गरी आफुलाई चाहिने अरु लेबल थप्न सकिन्छ । यहाँ पनि AAAAA को सट्टामा आफ्नो ब्लगको नाम राख्नुहोस अनि YYYYY र ZZZZZ को सट्टामा आफ्नो अरु लेबलको नाम । साथै ‘कथा’ र ‘समाचार’ को सट्टामा आफ्नो विधाको नाम । लेबलको नाम case sensitive हुने भएको र क्यापिटल वा स्मल लेटर मात्रै तलमाथी परे पनि काम नगर्ने भएकोले ध्यान पूर्वक राख्नुहोला ।
अन्य थपथाप:
कोडको शुरुमा निलो रंगले लेखिएको width:860px; र font-size:90%; ले क्रमश: ट्याबको कुल चौडाई र ट्याबमा देखीने फन्टको साईज निर्धारण गर्छ। त्यसलाई आ-आफ्नो टेम्प्लेटको साईज र ईच्छा अनुसार अंकलाई घटी बढि गरेर मिलाउन सकिन्छ ।
कलेजी रंगले लेखिएको color: #ffffff; लाई परिवर्तन गर्दा ट्याबको फन्टको रंग परिवर्तन हुन्छ।
ट्याबमा रहेका विधालाई बोल्ड गर्न <span>र </span> बीचमा रहेको अक्षरलाई <b> र </b> को बिचमा हाल्नुहोस । उदाहरणको लागि माथीको “घर” लाई बोल्ड गर्नु छ भने <span>घर</span> लाई
<span><b>घर</b></span> गर्नुहोस ।
हरियो रंगले लेखिएको कोड background:#2D8930; ट्याबको व्याकग्राउण्ड कलर हो । यसलाई पनि आफ्नो ईच्छा अनुसार फेर्न सकिन्छ
रातो रंगले लेखीएको कोड color:#FFCCFF; परिवर्तन गर्दा माउस क्रसर ट्याबमा लग्दा परिवर्तन हुने रंगलाई देखाउँछ , यो पनि आफ्नो ईच्छा र टेम्प्लेटको रंगको अनुपातमा फेर्न सकिन्छ । कस्तो रंगको कलर कोड के हुन्छ र कुन कोड हाल्दा कस्तो रंग बन्छ हेर्न यहाँ जानुहोस।
ट्याबको व्याक ग्राउण्डमा रंगको सट्टा कुनै ईमेज पनि राख्न पनि सकिन्छ । तर यो पोष्ट नै धेरै लामो भएकोले आजलाई यत्ती ।
