Переходим на вкладку "Дизайн"-"Изменить 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. |
Аналогично с левой панелью (<div class='column-left-inner'>).
В итоге, у нас в "Дизайн"-"Элементы страницы" появятся новые поля для добавления гаджетов.
Добавить гаджеты в меню вкладками для Blogger. |
63 комментария:
строчки, ни другой ....?)) Куда ставить та?))
<div id='sidebar-wrapper'>
<div class='span-10 last'>
Я сделала список страниц в виде вкладок, так теперь эта строка меню идет через всю страницу. А мне хотелось бы сделать так, чтобы этот гаджет был по ширине одинаковый с другими элементами.
Я что-то словами плохо могу объяснить http://hopegracefields.ru/ - вот эта строка на всю ширину страницы, как бы ее обрезать?
Перед
/* 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" не являются ключевыми продвигаемыми словами блога.
a {
text-decoration:none;
color:#800000;
}
a:hover {
color:#4B4B4B;
}
a {} - для ссылок
a:hover {} - при наведении
*Для правой боковой панели:
div class='column-right-inner'
либо здесь код меню
aside
..........
/aside
либо здесь код меню
/div*
и подскажите, что такое код меню? и где его взять ?
А перед ]]></b:skin> код от .tabberlive
Это два разных кода, а вы добавили всё в скрипт. Кстати, довольно частая ошибка.
ой.. вкладки то появились, только теперь не знаю как их привести в нормальный вид
от column-left-inner
и добавляем после column-right-inner (как на скриншоте).
Искал-искал, так и не нашел :(
Как пример, вот на этом блоге в верхнем колонтитуле http://coscwatch.blogspot.com/
За ранее спасибо.
Крутил-вертел так и не получилось.
Вернул как было.
Может есть, Html-ем какой-то вариант для создания тАба.
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
Там же можно уменьшить шрифт, поменять цвет и т.п.
Хочу начать конечно же с дизайна и навигации, С шапкой проблем думаю не будет (ну разве что возникнет вопрос позже, как в шапку вверху вставить графический блок Google Adsense).
Так вот такой вопрос можно ли сделать так,(вот я помимо главной страницы создал еще несколько) чтобы на этих страницах можно было бы добавлять материал как на главной - поочередные сообщения через разделительную вставку "Читать Далее". Вот в этом не могу разобраться.
Или это можно только через вкладки сделать (создавать для каждого сообщения, которое должно быть в разделе другой страницы , а там уже только ссылку на сообщение размещать ? Хотелось бы чтоб в каждом разделе-странице, шли сообщения не зависимо от главной , ну или как нибуть так.
http://naribalochke.blogspot.com - не рекламма. Спасибо.
в комментарии 20 выдает ошибку...
Жду Вашего ответа с нетерпением.
скрипт
</b:if>
См. про условные теги http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html
Предполагаю, что и это пригодиться http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#ubrat
Но по той инструкции, что указана на том блоге, у меня так и не получилось до конца. Блоки не переключаются, а просто друг под другом висят. http://edodina.blogspot.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.