Найти выпадающее меню для блоггера не самое сложное занятие, сложно его установить в блог, точнее найти место в котором нужно разместить html код менюшки, потому как шаблоны бывают разные. Так что лучший вариант это выбрать подходящий шаблон в котором будет не только меню, но другие нужные вам виджеты.
Доброго времени суток. Сегодняшняя статья повествует о том, как добавить на ваш блог blogspot меню для боковой панели или же Multi Tab sidebar widget. Что это такое? Это вкладки или же иными словами переключатель, который служит для перехода с одного виджета на другой который спрятан. Состоит это меню из тех же ячеек. Для чего оно нужно? К примеру в вашем шаблоне всего одна боковая панель для виджетов и гаджетов и вам нужно разместить на ней много виджетов в таком случая боковая панель сильно растягивается по высоте, что согласитесь выглядит не очень красиво и тут в дело вступает наше меню. Свои виджеты вы можете спрятать под одну из трех или четырех ячеек и когда пользователь кликнет по ней, тогда и появятся ваши виджеты. В общем то лучше посмотреть на живом примере и второй пример. Как вы поняли сегодня мы добавим два разных варианта.
Итак, чтобы установить такие вкладки на своем сайте вам нужно перейти в раздел Шаблон - Изменить 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'];
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>
После этого ищете следующий код в старых шаблонах это <div class='column-right-inner'> в новых <div id='sidebar-wrapper'> сразу после этого кода вставляете следующий код:
Все, жмете сохранить шаблон и проверяете, в разделе Дизайн у вас должны образоватся панели под названием tab1 tab2 tab3 tab4 под ними и и вставляете свои гаджеты. Если 4 панели слишком много тогда можете одну или две удалить . Также на своем сайте вы увидите в боковой панели виджет с ячейками 1 2 3 4 название они берут от того виджета который вы под ними разместите.
Теперь добавляем второй вариант, все в том же разделе Шаблон - Изменить HTML перед этим кодом >]]></b:skin> вставляете следующий код:
После находите следующий код в старых шаблонах это <div class='column-right-inner'> в новых <div id='sidebar-wrapper'> сразу после этого кода вставляете следующий код:
Тут уже название ячеек не меняется автоматически, как в первом варианте, нужно задавать их вручную.
Popular Post
Comments
Archive
меняете на название своих виджетов. Сохраняете шаблон. В разделе Дизайн должны появится панели tab1 tab2 tab4 под ними и располагаете свои виждеты. Чтобы изменить зеленый цвет ячеек ищете этот код 64A071 и меняете на свой, чтобы изменить черный цвет, находите и меняете этот код 404040.
Переходим к просмотру видео:
К этой теме нам больше нечего добавить. Заходите еще будет много вкусняшек. Всего доброго.
Приветствую вас дорогие блоггеры. Сегодня мы с вами продолжим изучать Blogger, и на очереди у нас комментарии. Это мега большая и разносторонняя публикация, которая полностью ответит на все ваши вопросы касательно настройки комментариев в Blogger.
Описание: Новая постраничная навигация в отличии от предыдущих версий имеет более легкий скрипт. Еще одним главным преимуществом является то, что она безлимитная. Старые версии отображают всего 150 сообщений блога. Пользователь может сразу перейти к самому последнему (первому) сообщению одним кликом. Можно ставить на любые темы blogger, в том числе contempo soho emporio notable. Виджет переведен на русский язык.
Сегодня речь пойдет о ссылке Читать дальше, которая была придумана для удобства читателей блога. По сей день мои читатели (это касается новичков, которые используют стандартные шаблоны блоггера) спрашивают меня, как сделать так, чтобы текст в постах на главной странице отображался частично, а не полностью. Вот как раз таки в этом случае нам и поможет ссылка Читать Дальше.
Lightbox - это всплывающее окно в котором читатель может просматривать изображения постов. Очень удобная штука, особенно когда картинок в посте много и автор делает их
Календарь и часы виджеты для блога, какая от них польза
Не совсем понимаю блогеров, которые хотят разместить на своем сайте виджеты календарь, часы, анимации снега, фейерверка и прочей ерунды. Хотя немного понимания все же есть, ведь каждый хочет украсить блог сделать его полезным и т.д..