Меню с вкладками (табами) в сайдбаре Blogger.

Здравствуйте, дорогие друзья, читатели и гости блога. Сегодня предлагаю вам сделать блок вкладок (табов) в сайдбаре блога с помощью JavaScript. Это позволит значительно сэкономить место в боковой колонке и создаст удобство для посетителей.

Просматривая новые современные шаблоны для Блоггер, обратила внимание, что вариант используется практически в каждом. Мы имеем возможность более компактно разместить большее количество гаджетов в одном месте. У меня уже был один пост на эту тему, как сделать компактный виджет вкладок на CSS. Сегодняшний блок вкладок хорош ещё и тем, что не нужно править их размер, так как он автоматически подгоняется под размер ширины сайдбара.

Для тех, кого заинтересовала сегодняшняя тема попрошу посмотреть рабочий вариант здесь , внизу на боковой панели.

Нам нужно будет в шаблоне блога добавить некоторые коды, а потом уже мы сможем непосредственно в разделе дизайн устанавливать нужные гаджеты. Так что, перед началом работы обязательно сделайте резервное копирование, если что-то пойдёт не так.

Шаг 1. Заходим во вкладку шаблон-изменить HTML. Находим закрывающийся тег </head>. Копируем следующий JavaScript. Он достаточно большой. Его, для тех кто знает, можно вынести во внешний файл. Для кого это пока тяжело берём код как есть.(Копируйте код сначала в блокнот или черновик, так как он оформлен у меня с полосой прокрутки).

<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','strong'];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};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)}}}if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad()}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions)}}
//]]>
</script>

Шаг 2. Теперь добавим стили CSS для всей этой конструкции. Здесь можно будет сделать своё оформление. Об этом ниже. Находим строку ]]></b:skin> и над ней устанавливаем следующее.

.tabberlive{ clear: both; margin: 10px 0 10px 0;}

.tabbernav {
margin: 0 0 0 15px;
padding: 3px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;}

.tabbernav li {
list-style: none;
margin: 0;
display: inline;}

.tabbernav li a {
padding: 3px 0.5em;
margin-right: 1px;
text-decoration: none;
color:#21068C ;
border-radius: 3px 3px 0 0;}

.tabbernav li a:hover {
background:#F1F1F6 ;
border-color:#191072 ;
border-radius: 2px 2px 0 0;
color: #21068C ;
}

.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
color: #ffffff;
border-bottom: 1px solid #ffffff;
background:#999094 ;}

.tabberlive .tabbertab {
padding: 5px;
border: 1px solid #5588aa;
background:#F1ECEE  ;
border-radius: 0 3px 3px 3px;}

.tabberlive .tabbertab h2,
.tabberlive .tabbertab strong,
.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 #ffffff;
margin: 0 5px;
padding: 2px 0 5px 0;}

Все значения, которые я выделила синим цветом, можно установить свои. Это цвета фона, рамок, названия гаджетов. После завершения работы вы сможете с ними поэкспериментировать.

Шаг 3. Ну, и наконец, самая интересная часть всей этой затеи. Вы должны определиться, сколько вкладок у вас будет. На примере я показываю с двумя вкладками. Можно сделать и 3 и 4. Если у вас две боковые колонки, сразу подумайте в каком месте это меню вкладок хотите видеть. Пример для правого сайдбара.
С помощью клавиш Ctrl+F (читаем здесь) находим в шаблоне вот такую строку.

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

Сразу под ней устанавливаем вот этот код.

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
</div>

Посмотрите скриншот. Устанавливать можно или над  <aside>, или после </aside>.

В зависимости от количества вкладок добавляйте ещё фрагмент.

<b:section class='tabbertab' id='tab3' maxwidgets='1'/>.

И если у вас эта красота будет на левой колонке, нужен будет вот такой участок кода <div class='column-left-inner'>.

ну всё. Самое страшное уже прошли. Сохраните шаблон. Идём во вкладку дизайн и видим, что у нас появились новые поля для гаджетов.

В них-то и добавляем обычным способом любой виджет. Урааа.. Это я себе. Поверьте я дольше писала это сообщение, чем вы всё это сделаете. Потренируйтесь пока у себя на тестовом блоге. Если такого нет, всегда рекомендую сделать по подобию рабочего ещё один, и на нём проводить все эксперименты.

Идею подсказал автор блога http://rivai-silaban.blogspot.ru/

 Если возникнут затруднения или вопросы пишите в комментариях. Будем разбираться. И сегодня ставлю точку в шпаргалке. Спасибо за внимание. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email