-->

تقنية ، إنترنت ، برامج ، إسلامية ، إقتصادية ، إجتماعية ، تعليمية ، رياضية

سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ... سُبْحَانَ اللَّهِ العَظَيم

الجمعة، 14 فبراير 2014

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

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

قبل أن نضيف أي كود  بمدونة بلوجر ، يجب أن نأخذ  نسخة إحتياطية من قالب المدونة ،  ولكي نضيف كود اضافة اداء جديدة متعددة الوظائف فى وقت واحد   add Multi Tabbed بمدونة بلوجر  نتبع الخطوات التالية :

شرح تفصيلي لطريقة التركيب  بالنسبة لمحرر بلوجر  الحديث

1- ندخل الى لوحة تحكم المدونة .  

 2- نضغط على كلمة  قالب  من القائمة الجانبية   مثل الصورة التالية :



بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:




 ومن  تلك الصورة السابقة نضغط على تحرير   HTML    ، لكي يظهر لنا الصورة التالية:  


3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):
 

</head> 
4 - بعد أن نجد الكود السابق  نضع الكود التالي فوقه مباشرة :

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

5 - ثم نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):
 
]]></b:skin>
 بعد أن نجد الكود السابق  نضع الكود التالي فوقه مباشرة :
/*---------- Multi Tabbed Widget By www.tebaaa.BlogSpot.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 --------*/
6- ثم نبحث عن هذا العنوان وهو رمز التعريفات وهو متواجد بكل القوالب :
/* 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"/>
7- ثم نبحث عن هذا الكود :
<div class='column-right-inner'>
وإذا لم تجد الكود السابق يتم البحث عن هذا الكود :
<div id='sidebar-wrapper'>
 بعد أن نجد الكود السابق  (الكود المطلوب في خطوة 7 الموجود (الأول أو الثاني )نضع الكود التالي فوقه مباشرة  :
<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>
 8- نضغط على زر حفظ التغيرات   لكي يتم حفظ القالب .

جزى الله خيرا كل من ساهم فيه

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

إرسال تعليق