ब्लग विधालाई ट्याबमा राख्‍नुहोस –Easy CSS Menu

यो पोष्टको कुरा छोटकरीमा राख्दा, यो पोस्ट ब्लगको लेबललाई यस्तो :

बाट यस्तो बनाउने तरिकाको बारेमा हो ।

करिव १ महिना अघि देखीनै केही नयाँ तथा पुराना ब्लगर साथीहरुले मलाई लेबललाई हेडरमा ट्याब वा CSS Navigation Menus को रुपमा राख्ने तरिकाको बारेमा सोध्दै आउनु भएको थियो । केही साथीहरुलाई ईमेलबाट सामान्य तरिका बताए पनि अरु नयाँ आउनेहरुलाई पनि सहयोग होस भन्ने उद्देश्यले यो पोष्ट लेख्दैछु ।

यो मेनु कसरी बनाउने भन्ने बताउनु भन्दा पहिला, १-२ कुराहरु:

हामीहरु हरेकको टेम्प्लेट फरक-फरक हुने तथा यो मेनु राख्‍ने कुनै तयारी ग्याजेट भने नबनेकोले यसका कोडहरुमा टेम्प्लेट पिछ्चे केही सामान्य हेरफेर गर्नु पर्ने हुन सक्छ । यो पोष्टमा म सो सम्भावित कोडहरुलाई पनि हाईलाईट गरेर यो विधिलाई सम्भव भएसम्म सरल बनाउने कोसिस गर्ने छु ।

यो कोड- कन्टेन्टहरु मैले http://www.blogdoctor.me , http://www.blogbulk.com , http://bloggeruniversity.blogspot.com र अन्य केही साईटबाट लिएको छु र सबैलाई मिसाएर सकेसम्म सरलीकरण गर्ने प्रयास गरेको छु । माथीका साईटहरु मध्य केही साईटहरु हाल अपडेट भैरहेका छैनन, तर ती सबै साईटहरु ब्लगरमा ब्लग चलाउनेको लागि एकदमै जानकारी मूलक र उपयोगी छन, विशेषगरी ब्लगरमा छेड-छाड गर्न रुचाउने सबैलाई म ती साईटहरु हेर्न सल्लाह दिन्छु ।

हुन त यो मेनु बनाउने तरिका ‘सेफ प्रोसेस’मै पर्छ, तैपनि, म सबैलाई आफ्नो लेआउटमा कुनै परिवर्तन गर्नु अगाडि पुरानो लेआउटको व्याकअप राख्‍न सल्लाह दिन्छु ।

अब सुरु गरौं मेनु राख्ने तयारी । यसको लागि सबैभन्दा पहिला आफ्नो टेम्प्लेटमा यो नयाँ मेनु बस्ने ठाउँ बनाउनु जरुरी हुन्छ । त्यसैले सबैभन्दा पहिला ब्लगरको Dashboard मा जानुहोस अनी Layout हुँदैं 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 भन्दा माथि बायाँ पट्टी रहेको "Layout" मा थीच्नु भयो भने तपाईले माथिको चित्रमा जस्तै हेडर भन्दा माथि एउटा "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>

५) अब "SAVE" मा थीच्नुहोस । बस सक्कियो।

ध्यान दिनु पर्ने केही कुराहरु:

माथिको कोडको अन्ततिर रहेको AAAAA को सट्टामा आफ्नो ब्लगको नाम राख्‍नुहोस। त्यस्तै XXXXX को ठाउँमा आफ्नो ब्लगको लेबल ।

माथीको कोडमा रहेको title="Home" वा title="Poem" मा भएको "Home" र "Poem" ले माउसको क्रसर कुनै पनि ट्याब माथि लग्दा देखिने ‘टुल टिप्स’ लाई बुझाउँछ भने वा <span> र </span> बीचमा रहेका “घर” र “कविता” जस्ता शब्दहरु भने ट्याबमा सधैं देखीने अक्षर समुह हुन ।

यसलाई सजिलो संग बुझ्न मेरै ब्लगको लेबल ट्याबमा माउस क्रसर लगेर हेर्न सक्नु हुन्छ । त्यहाँ “गृहपृष्ठ” मा माउसको क्रसर पुर्‍याउँदा ‘टुल टिप्स’ मा भने "Home" देखिनेछ । तपाई चाहनुहुन्छ भने यी दुबैमा एउटै शब्द पनि राख्‍न सक्नुहुन्छ ।

माथीको कोडमा मैले केवल ‘घर’ र ‘कविता’ भन्ने दुईवटा लेबल मात्रै राखेको छु, तर कोडको अन्तमा भएको

</ul>
</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>

भन्दा माथि

<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; परिवर्तन गर्दा माउस क्रसर ट्याबमा लग्दा परिवर्तन हुने रंगलाई देखाउँछ , यो पनि आफ्नो ईच्छा र टेम्प्लेटको रंगको अनुपातमा फेर्न सकिन्छ । कस्तो रंगको कलर कोड के हुन्छ र कुन कोड हाल्दा कस्तो रंग बन्छ हेर्न यहाँ जानुहोस।

ट्याबको व्याक ग्राउण्डमा रंगको सट्टा कुनै ईमेज पनि राख्‍न पनि सकिन्छ । तर यो पोष्ट नै धेरै लामो भएकोले आजलाई यत्ती ।

Happy Blogging !