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