Как сделать меню вкладками для Blogger.

Как расположить гаджеты Blogger
Меню вкладками можно сделать как с помощью только CSS, так и обращаясь к JavaScript. Здесь я хочу предложить последний вариант, поскольку данный элемент будет полностью интегрирован в шаблон Blogger, что позволит нам добавлять в него стандартные гаджеты. Тут не нужно подбирать ширину и высоту, данные параметры настраиваются автоматически. По моим наблюдениям для более выигрышного вида ширина боковой панели должна быть от более 330 пикселей. Таким может быть конечный вариант: пример.

Переходим на вкладку "Дизайн"-"Изменить HTML". Нажав CTRL+F, ищем </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','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>
Преимуществом данного скрипта является то, что не требуется подключать дополнительные библиотеки. Его можно также вынести во внешний файл.

Перед ]]></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: #5588aa;
border-radius: 3px 3px 0 0;}

.tabbernav li a:hover {
background: #5588aa;
border-color: #5588aa;
border-radius: 3px 3px 0 0;
color: #ffffff;
}

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

.tabberlive .tabbertab {
padding: 5px;
border: 1px solid #5588aa;
background: #ffffff;
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;}
Здесь простой CSS:
  • background - фон,
  • border - рамка,
  • color - цвет текста,
  • font-size - размер шрифта.
Цвета (цифры после значка #) я подбираю с помощью программ Colorpicker (для определения исходного значения) и Фотошопа на панели "Окно"-"Инструменты"-"Палитра цветов" (для их варьирования).

И заключительный шаг. Нужно разместить код, который определяет количество вкладок (<b:section class='tabbertab' id='tab1' maxwidgets='1'/>):
<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>
Для правой боковой панели:
<div class='column-right-inner'>
либо здесь код меню
<aside>
..........
</aside>
либо здесь код меню
</div>
Изменить шаблон Blogger.
Изменить шаблон Blogger.

Аналогично с левой панелью (<div class='column-left-inner'>).

В итоге, у нас в "Дизайн"-"Элементы страницы" появятся новые поля для добавления гаджетов.
Добавить гаджеты в меню вкладками для Blogger.
Добавить гаджеты в меню вкладками для Blogger.
в f t
наверх ↑

63 комментария:

Шушуда
Спасибо, все получилось!
NMitra
Отлично! Должно безотказно работать))
EHUPhotoBlog
перепробовал кучу навороченных вариантов, но это первый, который сработал. спасибо огромное!
NMitra
Благодарю за отклик!
Антоха
Я заключительный шаг не понял. Куда код размещать?
NMitra
После фрагмента <div class='column-right-inner'>
Антоха
а если этой строчки нету?
NMitra
Я не вижу ваш шаблон, но попробуйте после <div id='sidebar2'>. Только предварительно сохраните шаблон.
Антоха
Если я вам как нибудь на почту скину шаблон, сможете сами вставить и обратно мне отправить? пожалуйста)
NMitra
Отправляйте. См. пункт меню "Контакты".
Антоха
Отправил, заранее спасибо!!!
NMitra
Немножко промахнулась: после <div id='sidebar-wrapper'>
Антоха
Все работает, спасибо!
Анонимный
А что, если нет ни этой
строчки, ни другой ....?)) Куда ставить та?))
NMitra
Если код основан на более ранних версиях шаблона, то после кода:

<div id='sidebar-wrapper'>
Анонимный
Ааа...ммм...и этого фрагмента нет...Может мне шаблон Вам выслать, чтобы Вы мне помогли разобраться наверняка...?
NMitra
Давайте шаблон посмотрю, только о результатах после выходных сообщу.
NMitra
Не очень люблю самописные шаблоны. Нужно добавить после

<div class='span-10 last'>
Таня
А подскажите пожалуйста как изменить длину вкладки со страницами.
Я сделала список страниц в виде вкладок, так теперь эта строка меню идет через всю страницу. А мне хотелось бы сделать так, чтобы этот гаджет был по ширине одинаковый с другими элементами.
Я что-то словами плохо могу объяснить http://hopegracefields.ru/ - вот эта строка на всю ширину страницы, как бы ее обрезать?
NMitra
Татьян, как я вижу, вы уже справились, не всегда получается оперативно ответить на комментарий, но как правило в течении суток. Я бы сделала следующим образом.

Перед

/* Headings
----------------------------------------------- */

добавила

.tabs-outer {
background: transparent !important;
}

.cap-top, .cap-bottom{
border: none !important;
}

.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}

#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}

Вот что мне не нравится, так это очень большие буквы в меню, они больше по размеру, чем заголовок статьи, а это не есть хорошо с точки зрения SEO. Тем более "Главная" и "About" не являются ключевыми продвигаемыми словами блога.
Якушевская Юлия Сергеевна
Огромное спасибо, у меня получилось http://yakushevskaya.blogspot.com
NMitra
Всё чётко работает. Отлично!
Наиль
Здравствуйте!А как изменить цвет всех ссылок на блоге?Подскажите.Шаблон не стандартный.
NMitra
Здравствуйте! В самом начале стилей:

a {
text-decoration:none;
color:#800000;
}
a:hover {
color:#4B4B4B;
}

a {} - для ссылок
a:hover {} - при наведении
Наиль
Огромное спасибо!
Olga Bakun
заключительный шаг что то не поняла, первый код как на картинке вставила, а куда это

*Для правой боковой панели:

div class='column-right-inner'
либо здесь код меню
aside
..........
/aside
либо здесь код меню
/div*

и подскажите, что такое код меню? и где его взять ?
NMitra
Какой адрес блога, посмотрю, но коды должны быть уже добавлены? Пусть не весь, сделайте что поняли.
Olga Bakun
сделала что поняла, ничего не получилось ) вот адрес http://olgabakun.blogspot.com/
NMitra
На данный момент ни скрипта, ни стилей не вижу. Добавьте. В новом редакторе "Шаблон" - кнопка "Изменить HTML".
Olga Bakun
поставила последний код перед *aside* . .но ничего не поменялось, может я что неправильно сделала
NMitra
Несколько не так. Перед </head> добавляем <script type='text/javascript'></script>

А перед ]]></b:skin> код от .tabberlive

Это два разных кода, а вы добавили всё в скрипт. Кстати, довольно частая ошибка.
Olga Bakun
спасибо
ой.. вкладки то появились, только теперь не знаю как их привести в нормальный вид
NMitra
Теперь убираем <div class='tabber'>
от column-left-inner

и добавляем после column-right-inner (как на скриншоте).
Olga Bakun
спасибо получилось это ! я вас сейчас замучаю.. но еще пару вопросов, как сделать чтобы вместо чисел названия были? и как эти вкладки сделать по центру большие, а не с боку как сейчас?
NMitra
Добавьте гаджеты, в новые пунктирные поля на вкладке "Дизайн". Их заголовки и будут названиями.
Olga Bakun
Спасибо за помощь !
NMitra
Как правило ограничиваются двумя вкладками.
АНДРЕЙ PANERAI
Подскажите, возможно создать вкладки(табы)в горизонтальном списке меню?
Искал-искал, так и не нашел :(
Как пример, вот на этом блоге в верхнем колонтитуле http://coscwatch.blogspot.com/

За ранее спасибо.
NMitra
В "Дизайнере шаблонов" группа "Венецианское окно". Добавьте гаджет "Страницы" над блоком сообщения.
АНДРЕЙ PANERAI
NMitra, попробовал )))
Крутил-вертел так и не получилось.
Вернул как было.
NMitra
Дело в том, что в указанном примере это не меню вкладками (нет перехода на другую страницу), а стилевое оформление меню. Образец указан в "Венецианском окне".
АНДРЕЙ PANERAI
NMitra, что Вы посоветуете?
Может есть, Html-ем какой-то вариант для создания тАба.
NMitra
Сделайте меню, к которому пропишите стили к пунктам li.

border-radius: 20px 20px 0 0;

а именно

.tabs-inner .widget li a {
border-radius: 20px 20px 0 0;
margin: 2px;
}

http://shpargalkablog.ru/2011/02/zakruglennye-ugly-css.html

Там же можно уменьшить шрифт, поменять цвет и т.п.
АНДРЕЙ PANERAI
NMitra,спасибо Вам.
Luka Brazi
Здравствуйте. Вот подумал создать блог на Blogger"е про рыбалку. И хоть эта тематическая ниша уж даже через-чур заполнена, но все же, и сам сервис Blogger"а немного познать и мало ли ).
Хочу начать конечно же с дизайна и навигации, С шапкой проблем думаю не будет (ну разве что возникнет вопрос позже, как в шапку вверху вставить графический блок Google Adsense).
Так вот такой вопрос можно ли сделать так,(вот я помимо главной страницы создал еще несколько) чтобы на этих страницах можно было бы добавлять материал как на главной - поочередные сообщения через разделительную вставку "Читать Далее". Вот в этом не могу разобраться.

Или это можно только через вкладки сделать (создавать для каждого сообщения, которое должно быть в разделе другой страницы , а там уже только ссылку на сообщение размещать ? Хотелось бы чтоб в каждом разделе-странице, шли сообщения не зависимо от главной , ну или как нибуть так.

http://naribalochke.blogspot.com - не рекламма. Спасибо.
NMitra
Воспользуйтесь ярлыками - http://shpargalkablog.ru/2011/03/yarlyki-blogger.html, с помощью них можно сгруппировать статьи по темам. Но все они (сообщения) будут отражаться на Главной. Хотя и здесь есть лазейки - см. там же.
Админ
Помогите пожалуйста, увеличить ширину окна вкладки, то что вы предлагаете
в комментарии 20 выдает ошибку...
Админ
С шириной разобрался.... У меня возник второй вопрос: нужно сделать такие же вкладки, но только на странице поста, как можно это реализовать.
Жду Вашего ответа с нетерпением.
NMitra
<b:if cond='data:blog.pageType == &quot;item&quot;'>
скрипт
</b:if>

См. про условные теги http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html
Предполагаю, что и это пригодиться http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#ubrat
Наталка Михайлівна Зуб
Извините, что пишу не в тему, просто не нашла подходящего обсуждения. Меня интересует вопрос: можно ли в блоге сделать на вкладках в сообщениях ссылку "читать дальше"? Просто на главной странице она делается и работает, а на вкладках почему-то нет.А это очень неудобно, потому что на одной странице хочется разместить много информации, но пока всю страницу пролистаешь, не захочется искать кому что нужно...
NMitra
Предполагаю, что вы ищите это http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html
taki-ha
NMitra, помогите, пожалуйста, никак не могу разобраться. Как сделать страницу с контактами, точнее где ее сделать? Я создала обычное сообщение и там написала контактную информацию, но я не хочу чтобы это сообщение было видно в основном тексте (тогда нет никакого смысла в закладке). Ну, даже если и так, все равно, вкладка контакты не работает, страницу выносит на авторизацию. Что делать, помогите!!!
NMitra
Посмотрите эту статью http://shpargalkablog.ru/2011/08/stranicy-blogger.html
taki-ha
Спасибо огромное, получилось!!!
Анонимный
Это самый большой и длинный код для JS табов который я видел.... Это все делается в 3 строки на JQ )))
NMitra
С удовольствием посмотрю, предоставьте ссылку.
Евгения
Наташ, вот здесь есть с помощью JQ: http://www.magentawave.com/2013/02/tabs-in-sidebar-on-blogger.html
Но по той инструкции, что указана на том блоге, у меня так и не получилось до конца. Блоки не переключаются, а просто друг под другом висят. http://edodina.blogspot.ru/ Вот думаю. может скрипт не работает, или я что-то где-то не дописала....
NMitra
Библиотеку jQuery нужно подключить. Там ссылка в статье есть на http://www.magentawave.com/2013/03/jquery.html
Евгения
Спасибо. Проблема, правда, не решена. ))) Ладно, покрутим ещё пару дней)
Nataliya Mityashina
Здравствуйте! Скажите пожалуйста, данный код нужно прописывать в шаблон в ручную? Уж больно он объёмный!!!!!!!!!!!
NMitra
Здравствуйте, некоторые скрипт кладут на хостинг, а в шаблон прописывают адрес скрипта.
Nataliya Mityashina
А не подскажите более подробно, как это сделать?
NMitra
Вам нужен хостинг, например, бесплатный http://www.hostinger.ru/
Там прикрепляете свой домен ( http://shpargalkablog.ru/ ) или поддомен ( http://img.shpargalkablog.ru/ )
Создаёте новую страницу с расширением .js , например, pn.js
В шаблон блога пишите <script type='text/javascript' src="http://img.shpargalkablog.ru/ pn.js"></script>

Я прямо в шаблон весь код добавляю и не мучаюсь с внешними файлами.

Можно применить один из примеров http://shpargalkablog.ru/2012/03/css-tabs.html Там кода меньше, но у меня пока нет времени приспосабливать его для Blogger.