Subcribe to our RSS feeds Join Us on Facebook Join Us on Facebook Join Us on Facebook Follow us on Twitter Add to Circles

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

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


شرح اضافة اداء جديدة متعددة الوظائف فى وقت واحد 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

ليست هناك تعليقات :

إرسال تعليق

قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )

الأرشيف