Blogger मा Css Tab Menu कसरी बनाउने ?

तपाइंले Blogger कत्तिको लेख्नुहुन्छ सायद तपाइंले एउटा कुराको बिचार गर्नु नै भएको छ होला की Blogger जती धेरै तपाईं लेख्दै जानुहुन्छ त्यति नै झन्झट हुन्छ तपाइंले लेखेका पुराना-पुराना पोस्टहरु खोज्नको लागी र Visitor लाई झन कती गाह्रो होला है त्यस्ता CSS Tab Menu नराखेका Blogger हरुमा त्यसैले मैले हजुर लाई त्यसको समस्या को बारेमा एउटा Cool  and beutiful Css tab menu राख्ने बारेमा जानकारी गराउँछु आउनुस तल ध्यान दिएर हेर्नुस

१. सबैभन्दा पहिला त तपाइंले यो जान्न जरुरी छ की तपाईंको Blogger Layout मा पहिला देखि नै Layout मा रहेको Header Gadget भन्दा ठिक मुनी अथवा Header भन्दा ठिक माथी एउटा अर्को Gadget राख्नको लागी Coloumn छ की छैन यदी छ भने तपाइंले अर्को Coloumn बनाउनु पर्दैन र छैन भने बनाउनु पर्छ प्राय Blogger मा नहुन सक्छ त्यसैले तपाईं आँफैले एकचोटी Check गर्नुहोस उदाहरणको लागी यहाँ तलको चित्र हेर्नुस

२. यहाँ माथीको चित्र त तपाइंले हेरीहाल्नु भयो यदी यस्तो छैन भने तपाइंले बनाउनु पर्ने छ र बनाउनको लागी तपाईंले Left Side बाट  "Template" मा Click गर्नुस र Edit HTML" मा Click गर्नुस अनि "Proceed" मा Click गर्नुस र Computer को Keyboard बाट "F3" अथवा "CTRL+F" key कुनै एकलाई थिच्नुस र Windows को सबैभन्दा माथी एउटा Search Box खुल्नेछ त्यसलाई बन्द नगर्नुहोला
३. त्यसपछी अब त्यहाँ खुलेको सानो Search Box मा यो तलको Code Paste गर्नुस
<b:section class='header' id='header' maxwidgets='
४. जब तपाइंले त्यहाँ Search Box मा यो माथीको Code Paste गर्नुहुन्छ त्यसपछी Automatic त्यहाँ एउटा Highlight मा त्यी Code हरु देखिनेछ र तपाइंले ठिक त्यसको पछी 1 अथवा 0 लेखेको देख्नुहुनेछ त्यसलाई हटाएर त्यसको ठाउँमा 2 राख्नुस र no लेखेको हटाएर त्यहाँ Yes type गर्नुस जस्तै यहाँ तल हेर्नुस यस Code लाई Notepad अथवा Wordpad मा राखेर राम्रो संग हेर्दा पनि हुन्छ
पहिला यस्तो देख्नुहुनेछ <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='लक्की बस्नेत कम्प्युटर (Header)' type='Header'/><br /> </b:section> यस्तो बनाउनुहोस <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'><br /> <b:widget id='Header1' locked='true' title='लक्की बस्नेत कम्प्युटर (Header)' type='Header'/><br /> </b:section>
र अब अन्त्यमा तल "Save Template" मा Click गर्नुस र Layout मा गएर हेर्नुस अब त्यहाँ Header भन्दा माथी अर्को एउटा Coloumn बनेको छ की छैन अबश्य पनि बनेको हुनुपर्छ

५. र अब अहिले भर्खरै तपाइंले बनाएको त्यस "Add a gadget" मा Click गरी खुलेको Window मा "HTML/JavaScript" लेखेको Link मा Click गर्नुस
६. र अब त्यहाँ एउटा खाली Box खुलेको तपाइंले देख्नुहुनेछ र त्यस खाली Box मा यो तलको सबै Code लाई Copy गरेर त्यहाँ Paste गर्नुस

<style type="text/css"> /*- Menu Tabs J--------------------------- */ #tabsI { width:900px; margin:0px 30px 0; background:#2D8930; font-size:150%; 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: #3333FF; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background: #339999; padding:5px 15px 4px 6px; color: #FFFF00; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color: #CC0000; } #tabsI a:hover { background-position:100% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a title="नयाँ पोस्टहरु हासील गर्नुहोस" href="http://luckybasnet.blogspot.com/"><span>मुख्य घर</span></a></li> <li><a title="यस Link भित्र रहेका सबै Post हरु हेर्नुहोस" href="http://www.luckybasnet.blogspot.com"><span>लक्की बस्नेत कम्प्युटर</span></a></li> <li><a title="यस Link भित्र रहेका सबै Post हरु हेर्नुहोस" href="http://luckybasnet.blogspot.com/"><span>लक्की बस्नेत कम्प्युटर</span></a></li> <li><a title="यस Link भित्र रहेका सबै Post हरु हेर्नुहोस" href="http://luckybasnet.blogspot.com"><span>लक्की बस्नेत कम्प्युटर</span></a></li> <li><a title="यस Link भित्र रहेका सबै Post हरु हेर्नुहोस" href="http://luckybasnet.blogspot.com"><span>लक्की बस्नेत कम्प्युटर</span></a></li> <li><a title="यस Link भित्र रहेका सबै Post हरु हेर्नुहोस" href="http://luckybasnet.blogspot.com"><span>लक्की बस्नेत कम्प्युटर</span></a></li> </div>

 ७. यी स-साना Code हरु तपाइंले यहाँ माथी भने झैं Paste गरीसकेपछी अब त्यहाँ तपाइंले केहि फेरबदल गर्नु पर्ने हुन्छ जस्तै: यहाँ तल हेर्नुस त्यहाँ लेखिएको
 http://luckybasnet.blogspot.com जती पनि देख्नुहुनेछ त्यी सबै मा आफ्नो Blogger को Label को Link ले दोहोर्याउनुस Label को Link लिनको लागी Blogger Site बाट Label मा Right Click गरेर "Copy Link Address" मा Click गर्नुस र त्यस Code भित्र जती पनि
लक्की बस्नेत कम्प्युटरलेखेको देख्नुहुनेछ त्यी सबै लाई हटाएर आफ्नो Label को Name अथवा आफुले चाहेको अरु कुनै नाम राख्दा पनि हुन्छ

 ८. यसै गरी तपाइंले धेरै Tab Menu बनाउन सक्नुहुन्छ जस्तै तपाइंले धेरै Tab Menu बनाउन पर्यो भने ठिक यो भन्दा पछाडी </span></a></li> यो Code Paste गर्नुस <li><a title="यस Link भित्र रहेका सबै Post हरु हेर्नुहोस" href="http://luckybasnet.blogspot.com"><span>लक्की बस्नेत कम्प्युटर</span></a></li>
Save गर्दा Title नराखी Save गर्नुहोला
९. त्यसपछी "Save" Button मा Click गर्नुस र Blogger मा गएर हेर्नुस र तपाइंले यहाँ माथी अन्य Code हरु पनि Change गर्न सक्नुहुन्छ जस्तै Text Size Background color Color Text color यदी तपाइंले चाहेमा आँफै पनि गर्न सक्नुहुन्छ र Color Code को लागी यो लिंकमा गएर आफ्नो इच्छा अनुसारको Color Codes Choose गर्नुहोला धन्यबाद