ब्लगमा Multi-tabbed widget बनाउने हैन !!!

केही ब्लगर मित्रहरुले Multi-tabbed widget को प्रयोगको बारेमा मलाई प्रश्न गर्नुभएको थियो,र आज multi-tabbed widget को बारेमा उहाँहरु लगायत सबै (जो चाहनु हुन्छ) लाइ एउटा सानो तरिका तयार गर्दै छु जुन यक्दमै सजिलो छ मैले यो Multi-tabbed widget बिभिन्न ब्लग टिप्स बाट लियको हुँ |यसमा मैले सबै टिप्स लाइ समेटिएर यो पोस्ट तयार गर्दै छु यसमा मैले केही कोड हरुलाई मोडिफाइ गरेको छु जुन तपाइहरुले आफ्नो चाहना अनुसार मोडिफाइ गर्न सक्नु हुन्छ  |
Multi-tabbed widget साइड बार फराकिलो भएको ब्लगमा राम्रो हुन्छ किन की यसमा टयाब हरु तपाईंको चाहना अनुसार जतिपनी राखन सक्नुहुन्छ ,जस्तै मेरो ब्लगमा हेर्नुस् मैले ४ ओटा र ५ ओटा राखेको छु तपाइ पनी आफ्नो चाहना अनुसार राखनुस् !!


##यो Multi-tabbed widget तयार गर्नको लागि तलको तरिकालाई फलो गर्नुस् ##

1.तपाईंको ब्लग login गर्नुस्  

2.Design मा क्लिक गर्नुस् 

3.Edit HTML मा क्लिक गर्नुस् 

**Login to your blogger dashboard--> Design- -> Edit HTML**

Expand Widget Templates मा टिक्क लगाउन नबिर्सनुस् ##

4.अब तपाइले ctrlर f लाई एकै पल्ट दबाएर </head> खोजनुस् 

5. </head> भन्दा अगाडि तलको कोडलाइ कपि गरेर पेस्ट गर्नुस्

तलको कोड लाइ कपि गर्नुस !! <script type='text/javascript'> //<![CDATA[ document.write('<style type="text/css">.tabber{display:none;}<\/style>'); function tabberObj(argsObj) { var arg; this.div = null; this.classMain = "tabber"; this.classMainLive = "tabberlive"; this.classTab = "tabbertab"; this.classTabDefault = "tabbertabdefault"; this.classNav = "tabbernav"; this.classTabHide = "tabbertabhide"; this.classNavActive = "tabberactive"; this.titleElements = ['h2','h3','h4','h5','h6']; this.titleElementsStripHTML = true; this.removeTitle = true; this.addLinkId = false; this.linkIdFormat = '<tabberid>nav<tabnumberone>'; for (arg in argsObj) { this[arg] = argsObj[arg]; } this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); this.tabs = new Array(); if (this.div) { this.init(this.div); this.div = null; } } tabberObj.prototype.init = function(e) { var childNodes, i, i2, t, defaultTab=0, DOM_ul, DOM_li, DOM_a, aId, headingElement; if (!document.getElementsByTagName) { return false; } if (e.id) { this.id = e.id; } this.tabs.length = 0; childNodes = e.childNodes; for(i=0; i < childNodes.length; i++) { if(childNodes[i].className && childNodes[i].className.match(this.REclassTab)) { t = new Object(); t.div = childNodes[i]; this.tabs[this.tabs.length] = t; if (childNodes[i].className.match(this.REclassTabDefault)) { defaultTab = this.tabs.length-1; } } } DOM_ul = document.createElement("ul"); DOM_ul.className = this.classNav; for (i=0; i < this.tabs.length; i++) { t = this.tabs[i]; t.headingText = t.div.title; if (this.removeTitle) { t.div.title = ''; } if (!t.headingText) { for (i2=0; i2<this.titleElements.length; i2++) { headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; if (headingElement) {  t.headingText = headingElement.innerHTML;  if (this.titleElementsStripHTML) {    t.headingText.replace(/<br>/gi," ");    t.headingText = t.headingText.replace(/<[^>]+>/g,"");  }  break; } } } if (!t.headingText) { t.headingText = i + 1; } DOM_li = document.createElement("li"); t.li = DOM_li; DOM_a = document.createElement("a"); DOM_a.appendChild(document.createTextNode(t.headingText)); DOM_a.href = "javascript:void(null);"; DOM_a.title = t.headingText; DOM_a.onclick = this.navClick; DOM_a.tabber = this; DOM_a.tabberIndex = i; if (this.addLinkId && this.linkIdFormat) { aId = this.linkIdFormat; aId = aId.replace(/<tabberid>/gi, this.id); aId = aId.replace(/<tabnumberzero>/gi, i); aId = aId.replace(/<tabnumberone>/gi, i+1); aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); DOM_a.id = aId; } DOM_li.appendChild(DOM_a); DOM_ul.appendChild(DOM_li); } e.insertBefore(DOM_ul, e.firstChild); e.className = e.className.replace(this.REclassMain, this.classMainLive); this.tabShow(defaultTab); if (typeof this.onLoad == 'function') { this.onLoad({tabber:this}); } return this; }; tabberObj.prototype.navClick = function(event) { var rVal, a, self, tabberIndex, onClickArgs; a = this; if (!a.tabber) { return false; } self = a.tabber; tabberIndex = a.tabberIndex; a.blur(); if (typeof self.onClick == 'function') { onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; /* IE uses a different way to access the event object */ if (!event) { onClickArgs.event = window.event; } rVal = self.onClick(onClickArgs); if (rVal === false) { return false; } } self.tabShow(tabberIndex); return false; }; tabberObj.prototype.tabHideAll = function() { var i; for (i = 0; i < this.tabs.length; i++) { this.tabHide(i); } }; tabberObj.prototype.tabHide = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } div = this.tabs[tabberIndex].div; if (!div.className.match(this.REclassTabHide)) { div.className += ' ' + this.classTabHide; } this.navClearActive(tabberIndex); return this; }; tabberObj.prototype.tabShow = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } this.tabHideAll(); div = this.tabs[tabberIndex].div; div.className = div.className.replace(this.REclassTabHide, ''); this.navSetActive(tabberIndex); if (typeof this.onTabDisplay == 'function') { this.onTabDisplay({'tabber':this, 'index':tabberIndex}); } return this; }; tabberObj.prototype.navSetActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = this.classNavActive; return this; }; tabberObj.prototype.navClearActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = ''; return this; }; function tabberAutomatic(tabberArgs) { var tempObj, divs, i; if (!tabberArgs) { tabberArgs = {}; } tempObj = new tabberObj(tabberArgs); divs = document.getElementsByTagName("div"); for (i=0; i < divs.length; i++) { if (divs[i].className && divs[i].className.match(tempObj.REclassMain)) { tabberArgs.div = divs[i]; divs[i].tabber = new tabberObj(tabberArgs); } } return this; } function tabberAutomaticOnLoad(tabberArgs) { var oldOnLoad; if (!tabberArgs) { tabberArgs = {}; } oldOnLoad = window.onload; if (typeof window.onload != 'function') { window.onload = function() { tabberAutomatic(tabberArgs); }; } else { window.onload = function() { oldOnLoad(); tabberAutomatic(tabberArgs); }; } } /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == 'undefined') { tabberAutomaticOnLoad(); } else { if (!tabberOptions['manualStartup']) { tabberAutomaticOnLoad(tabberOptions); } } //]]> </script> <style type='text/css'> .tabberlive{ margin:0; padding:5px; clear:both; background:#f8f8f8; border:1px solid #DDD; } .tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #ddd; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; } .tabbernav li { list-style:none; margin:0; display:inline; } .tabbernav li a { padding:3px 0.5em; margin-right:1px; border:1px solid #DDD; border-bottom:none; background:#6c6c6c; text-decoration:none; color:#ffffff; } .tabbernav li a:hover { color:#6c6c6c; background:#ffffff; border:1px solid #DDD; text-decoration:none; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { background:#ffffff; color:#6c6c6c; border-bottom: 1px solid #ffffff; } .tabberlive .tabbertab { padding:5px; border:1px solid #DDD; border-top:0; background:#ffffff; } .tabberlive .tabbertab h2, .tabberlive .tabbertabhide { display:none; } .tabbertab .widget-content ul{ list-style:none; margin:0 0 10px 0; padding:0; } .tabbertab .widget-content li { border-bottom:1px solid #ddd; margin:0 5px; padding:2px 0 5px 0; } </style>

***</head> को अगाडि पेस्ट गरिसकेपछी फेरि तलको तरिकालाई फलो गर्नुस् ***


1.Design मा जानुस्  अनी क्लिक गर्नुस्
2.Page Elements मा गएर "Add a gadget"  मा क्लिक गर्नुस्
**Go to Design-->Page Elements and click on "Add a gadget"**.
3."html/java script" मा जानुस्  अनी क्लिक गर्नुस्
4.र तलको कोड लाई कपि गरेर पेस्ट गर्नुस्

तलको कोड लाई कपि गर्न view plain मा क्लिक गर्नुस्  

<div class='tabber'>


<div class='tabbertab section' id='tab1'>
<h2>भर्खरै का पोस्टहरु </h2>

ENTER-TAB1-CONTENT-HERE

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab2'>
<h2 class='title'>लोकप्रिय पोस्टहरु </h2>

ENTER-TAB2-CONTENT-HERE

</div>
<div class='clear'></div>


<div class='tabbertab section' id='tab3'>
<h2>प्रतिक्रियाहरु </h2>

ENTER-TAB3-CONTENT-HERE

</div>
<div class='clear'></div>

</div>

**अब तपाइले ENTER-TAB1-CONTENT-HERE  लाई हटाएर तसको ठाउँमा तपाइले चाहेको contents राख्न सक्नु हुन्छ ,जस्तै
ENTER-TAB3-CONTENT-HERE लेखियको ठाउँमा तपाइले कमेन्ट को कोड हाल्नुस जस्तै भर्खरै का प्रतिक्रियाहरु देखाउन चाहनु हुन्छ भने यो कोड हाल्नुस्

**तलको कोड लाई कपि गर्न view plain मा क्लिक गर्नुस् ** 

  
<div style="height:260px;overflow:auto;"> 
<script style="text/javascript" src="http://www.freewebs.com/filer/blogger/rc.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=50;</script><script src="http://your blog name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script><div;><small>  <a href="/"> </a><a href="" target="_blank" title=""></a></small></div;>
 

यसरी नै तपाइले क्रमबद्द तरिकाले आफुलाई  चाहेको TAB बनाउनुस्
**अन्त्य मा माथि ३ ओटा टयाब छन् यसलाई बढाउन मनलाग्यो भने तलको कोड लाइ जोडनुस् वा घटाउन मन्लाग्यो भने माथिको कोड बाट तलको जस्तै कोड लाइ हटाउनुस् **

<div class='tabbertab section' id='tabX'>

<h2 class='title'>YOUR-TAB-NAME</h2>

<!--ENTER-TABX-CONTENT-HERE-->

</div>

<div class='clear'></div> 

कोड प्रयोग गर्दा कुनै समस्या आयमा कमेन्ट बक्स मा लेख्नुस् वा मेरो मेल आइ डि मा मेल गर्नुस् 
>>हाप्पी ब्लग्गिङ <<