كيفية اضافة اداء جديدة متعددة الاقسام لعرضها فى وقت واحد add Multi Tabbed

اضافة اداء جديدة متعددة الأقسام لعرضها فى وقت واحد كما نلاحظها بالمدونات الأجنبية والمدونات الأخرى الكبرى هذه الاضافة الأكثر من رائعة من الممكن ان نعرض بداخلها بعض الاضافات فى وقت واحد لعدم اخذ مساحة من القالب على سبيل المثال بأمكانك ان تعرض قطعة المشاركات الشائعة وقطعة التصنيف وقطعة الأرشيف وغيرها فى وقت واحد اعتقد ان الكل يعلم جيدا هذه الأضافة وكما افعل فى كل تدوينة قبل ان اضع لكم اى اضافة اقوم بتجربتها اولا لكى اتأكد بأن الاضافة تعمل بشكل سليم ام يوجد بها مشاكل وبالفعل بعد التجربة استنتجت بأن الاضافة تعمل بدون اى مشاكل وخفيفة على القالب ولا تسبب اى ثقل للمتصفح لان هذه الأضافة لا تعتمد على اى صور نأتى الى طريقة التركيب فقط تابعو معى الشرح :

شرح اضافة اداء جديدة متعددة الوظائف فى وقت واحد add Multi Tabbed

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML

الأن قم بالبحث عن

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

قم بالبحث مرة اخرى عن هذا الكود :

]]></b:skin>

ضع فوقة مباشرة هذا الكود :

/*---------- Multi Tabbed Widget By www.realcombiz.com -------- */

    .tabberlive{

    margin:0;

    padding:5px;

    clear:both;

    background:$tbbxbgcolor;

    border:1px solid $tbbxbrcolor;

    }

    .tabbernav {

    margin:0;

    padding: 3px 0;

    border-bottom: 1px solid $tbbxbrcolor;

    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 $tbbxbrcolor;

    border-bottom:none;

    background:$tbbxcolor2;

    text-decoration:none;

    color:$tbbxcolor1;

    }

    .tabbernav li a:hover {

    color:$tbbxcolor2;

    background:$tbbxcolor1;

    border-color:$tbbxbrcolor;

    text-decoration:none;

    }

    .tabbernav li.tabberactive a,

    .tabbernav li.tabberactive a:hover {

    background:$tbbxcolor1;

    color:$tbbxcolor2;

    border-bottom: 1px solid $tbbxcolor1;

    }

    .tabberlive .tabbertab {

    padding:5px;

    border:1px solid $tbbxbrcolor;

    border-top:0;

    background:$tbbxcolor1;

    }

    .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 $tbbxbrcolor;

    margin:0 5px;

    padding:2px 0 5px 0;

    }

    /*------- Multi Tabbed Widget By www.realcombiz.com --------*/

قم بالبحث ايضا عن هذا العنوان وهو رمز التعريفات وهو متواجد بكل القوالب

/* Variable definitions

====================

ضع هذا الكود فى اسفلة مباشرة هذا الكود بمعنى فى اول التعريف :

صورة موضحة :

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8"/>

<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc"/>

<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff"/>

<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#b60000" value="#b60000"/>

قم بالبحث عن هذا الكود :

<div class='column-right-inner'>

ان لم تجد هذا الكود قم بالبحث عن هذا الكود :

<div id='sidebar-wrapper'>

الأن ضع فوقة مباشرة هذا الكود :

<div style='clear:both;'/>
    <div class='tabber'>
    <b:section class='tabbertab' id='tab1' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab2' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab3' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab4' maxwidgets='1'/>
    </div>

بالأخير قم بالضغط على حفظ التغيرات وانتهى التركيب 

ماذا تفعل الأن ؟

فقط قم بالذهاب الى صفحة التخطيط وستجد اضافة اداء متعددة

فقط قم باضافة الأدوات بالترتيب لكى يتم اضافاتها بالمدونة 

بالأخير لن اقول سوى كلمة واحدة (( لا خير فى كاتم العلم ))
هذه الأضافة تم نقلها من موقع http://www.realcombiz.com