Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
Показаны сообщения с ярлыком шаблоны. Показать все сообщения
Показаны сообщения с ярлыком шаблоны. Показать все сообщения
четверг, 7 июня 2018 г.

Разделить одно поле гаджета на два под заголовком.

 информация с сайта:http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#razdelit
Для того, чтобы вместо одного гаджета добавить пару по горизонтали между заголовком и сообщением, выполним ряд несложных действий.
Заменим
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
на
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
Перед
]]></b:skin>
внесём
#crosscol-left {width: 45%; display: inline-block; float: left;}
#crosscol-right {width: 45%; display: inline-block; float: right;}
#crosscol-right .widget {margin: 0;}
Процентное соотношение пишите на своё усмотрение. В данном случае это 40/40.
До
]]>
    </b:template-skin>
укажем
#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}



среда, 6 июня 2018 г.

Горизонтальные меню навигации в блог ,8 примеров

Устанавливаются горизонтальные меню в блог довольно просто. В окне "Дизайн" надо выбрать место для добавления гаджета (виджета). Затем на это место вставить гаджет "HTML-javascript", со скопированным в него кодом выбранного горизонтального меню. После этого можно вносить свои правки отступов, рамки, цвета меню, адресов и ссылок, выделенных красным цветом, визуально контролируя изменения. Вообще, редактировать коды на горизонтальные меню можно как в блокноте, так и непосредственно в окне гаджета.
1).3040753_01Snimok (485x42, 1Kb)
Код для меню, что выше:
<style>
#navcontainer { /* none needed */ }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0px 4px 0px; background-color: #666666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }
#navlist a,
#navlist a:link { margin: 0px; padding: 5px 9px 4px 9px; color: #FFFFFF; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist
li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #FFFFFF; background-color: #FE9C54; }
</style>
<br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
2).3040753_02Snimok (548x46, 1Kb)
<style>
#navcontainer { float:left; width:100%; background:#FFFFFF; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }
 #navlist a,
#navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #FFFFFF; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist
li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #666; background-color: #FFFFFF; }
</style>
<br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
3).3040753_03Snimok (548x61, 1Kb)
<style>
#tabs { font: bold 7.5pt Verdana; }
#navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a,
#navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; }
 #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
</ul>
</div>

4)3040753_04Snimok (460x40, 1Kb)
<style>
#tabs1 { font: bold 7.5pt Verdana; }
#tabs9 img { border: none; }
#navcontainer { margin: 10px 0 0 0px; padding: 0; height: 20px; }
#navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; }
#navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; }
#navcontainer ul li a { background: #fff; width: 60px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; }
#navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; }
#navcontainer a:active { background: #c60; color: #fff; }
#navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; }
</style> <br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
5)3040753_05Snimok (537x60, 1Kb)
<style>
.container { width: 520px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; }
#nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; }
#nav li { margin: 0; padding: 0; display: inline; list-style-type: none; }
#nav a:link,
#nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; }
#nav a:link.active,
#nav a:visited.active,
#nav a:hover { color: #666; background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKF2gMzhH9P5kl3t66v-M5Qdf3cs2UwP3c2YJo7Bm76YNCDfBvnFplP1y4_CXVoyRPTP4SbIqEIFKmjKSvt1y7WiA5faqLYgu0_I1WjSJZ2dswFXt470U7ycXbhgwcodrMI3warbwQnF4/s1600/Inverted.png[/url]) no-repeat top center; border-top: 4px solid #5F6A71; }
</style>
<br />
<div class="container">
<ul id="nav">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
6)3040753_06Snimok (545x64, 1Kb)
<style>
#navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; }
#navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } }
#navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body
#navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; }
#navlist a,
#navlist a:link,
#navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; }
#navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; }
#navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; }
#navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body
#navlist li#active { background: #000; margin: 0 4px 0 4px; }
#navlist #active a,
#navlist09 #active a:link,
#navlist09 #active a:visited,
#navlist09 #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
7)3040753_07Snimok (548x93, 1Kb)
<style>
.container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */
#navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; }
#navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; }
#navSquare a:link,
#navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; }
#navSquare a:link.active,
#navSquare a:visited.active,
#navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <br />
<div class="container">
<ul id="navSquare">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
</ul>
</div>
8)3040753_08Snimok (547x71, 2Kb)
<style>
#navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif;  font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; }
ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; }
ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; }
ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; }
#navcontainer>
ul#navlist li a { width: auto; }
ul#navlist li#active a { background: #f0e7d7; color: #800000; }
ul#navlist li a:hover,
ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }
</style>
<br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
</ul>
</div>
источник:   http://ob-bl.blogspot.com/2014/01/horizont-menu01.html



вторник, 5 июня 2018 г.

Гаджеты для Blogger.

 информация с сайта http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#razmeshchenie

1. Сделать гаджет Blogger над/под заголовком.

2.Увеличить ширину всего блога.

3.Убрать гаджет Blogger с определённой страницы.

4.Не показывать боковую панель на определённой странице.

5.Разделить одно поле гаджета на два под заголовком.




Галерея blogspot на jQuery с zoom эффектом

источник: https://www.mycrib.ru/2012/11/gallery-blogspot-jquery-zoom-effect.html
Еще статьи автора:
1.Простой галереи blogspot(http://www.mycrib.ru/2012/09/galereya-blogspot.html) в виде слайд-шоу,
2.Подборка шаблонов галерей для blogger(http://www.mycrib.ru/2012/09/shablony-blogger-gallery.html)и 3.Создание jquery карусели (http://www.mycrib.ru/2012/09/jquery-jcarousel.html)



суббота, 26 мая 2018 г.

Чердак и подвал у вас в шаблоне.


У кого таких подвала и чердака нет, и кто хочет себе их построить, читаем инструкцию:

1. CSS - описание для чердака или подвал
Чердак:
#top-wrapper {
width: 900px;
margin: 0 auto;
background: $top_bg;
color: $top_color;
font-size: 100%;
}
Подвал
#bottom-wrapper {
width: 900px;
margin: 0 auto;
background: $bottom_bg;
color: $bottom_color;
font-size: 100%;
}
width
- это по английски ширина. Найдите самую широкую часть вашего блога (называться она может по-разному) и поставьте вместо моих 900px .
Кто использует "резиновые шаблоны" (у вас ширина измеряется не в пикселях, а в процентах) ставит width 100%.

background - фон мы сказали, что фон будет задаваться в переменной top_bg (для чердака) и bottom_bg (для подвала)
color - цвет шрифта тоже для удобства вынесем в переменные: top_color (для чердака) и bottom_color (для подвала)
font-size - размер шрифта я для начала поставила 100% но вы потом можете уменьшить или увеличить размер шрифта в зависимости от ваших потребностей

1а. Куда поставить CSS описания чердака и подвала:

Я предлагаю в вашем шаблоне найти строчку ]]></b:skin> и ПЕРЕД ней добавить наши описания.
Раз уж мы с вами решили все делать удобно и по науке, т.е. вынесли описания цветов фона и шривта в переменные, то

2. Переменные :

<Variable name="top_bg" description="Цвет фона на чердаке"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bottom_bg" description="Цвет фона в подвале"
type="color" default="#ffffff" value="#ffffff">
<Variable name="top_color" description="Цвет шрифта на чердаке"
type="color" default="#000000" value="#000000">
<Variable name="bottom_color" description="Цвет шрифта в подвале"
type="color" default="#000000" value="#000000">
Чтобы не долго думать, да и у всех цвета в блоге разные я поставила начальные цвета: черные буквы на белом фоне - как в книжке, а вы уж потом их сами себе исправьте. Очень удобно будет через Дизайн - Цвета и Шрифты
Следующий вопрос куда эти описания цветов поставить... Очень вероятно, что у вас в HTML-коде шаблона есть такая строчка:
/* Variable definitions
Она обычно располагается очень близко к началу и после этой строчки обычно идут описания переменных примерно такого же вида как мы только что описали. Вот и добавьте туда описание наших новых четырех переменных.

Все описания сделаны осталось последнее вставить их на конкретное место в структуре блога.

Проверьте не сломалось ли чего-нибудь в вашем шаблоне нажав кнопку ПРОСМОТР и если все хорошо нажимаем кнопку СОХРАНИТЬ.
Внимание! Чтобы совсем не запутаться галочку на РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА мы НЕ СТАВИМ.

3. Изменения в структуре шаблона.

Это самая трудная для объяснения-описания часть, потому что во многих шаблонах используются разные названия для структурных единиц.

а) Прежде всего находим начало <body>

не далеко от <body> видим описание заголовочной части блога. Оно очень похоже на это:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Заголовок вашего блога (Header)' type='Header'/>
</b:section>
</div>
Теперь после закрывающего </div> можно вставить наш чердак:
<div id='top-wrapper'>
<b:section class='topper' id='topper'/>
</div>
Если ничего в шаблоне не испортилось, то можно сохранить изменения.

б) Подвал  будем вставлять внизу кода.
Идем в самый низ нашего кода видим строчки:

</div>
</body>
</html>


ПЕРЕД </div> вставляем код для нашего подвала:

<div id='bottom-wrapper'>
<b:section class='bottommer' id='bottommer'/>
</div>


Еще раз проверяем и если ничего в нашем шаблоне не испортилось нажимаем кнопку СОХРАНИТЬ.

Теперь идем в Элементы страницы и видим новые места в Макете куда можно добавить гаджеты. Идем в Шрифты и цвета и меняем скучную черно-белую раскраску наших чердака и подвала на более соответствующую цветам вашего блога.
Еще на чердаке можно разместить горизонтальное меню, но о нем мы поговорим в следующий раз.

источник:http://blogger4you.blogspot.com/2009/05/blogger-attic-and-basement-in-your.html



пятница, 25 мая 2018 г.

2 гаджета в шапке блога на Blogger

источник:блога Я блоггер.

В нынешнем уроке расскажу как добавить гаджет HTML/JavaScript в шапку блога. В стандартных шаблонах Blogger (Blogspot) в блоке Header по умолчанию стоит один гаджет «Заголовок страницы».

Нестандартное размещение виджетов в шаблоне (теме) blogger
Если рационально использовать шапку блога, то можно добавить еще один гаджет и вставить к примеру социальные кнопки, код баннера рекламы , поиск по сайту от Яндекса или Google, бегущую строку или меню сайта. Изменения будем делать в шаблоне .
Заходим в Административную панель = > Шаблон = > Изменить HTML. Находим участок кода:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Я блоггер (заголовок)' type='Header'
Изменяем его на:
<b:section class='header' id='header'><b:widget id='HTML666' locked='false' type='HTML'/><b:widget id='Header1' locked='true' title='Я блоггер (заголовок)' type='Header'
Тitle в коде измените на свой.

Открываем вкладку Дизайн и смотрим, над заголовком должен появится новый гаджет HTML/JavaScript. Добавляем в него нужный код.

Что бы настроить гаджет заходим снова в шаблон блога и добавляем стиль СSS. Перед ]]></b:skin> вставляет код:
#header {position: relative;}#HTML666 { z-index: 200; position: absolute; top: 10%; right: 2; }
Настройки:
top- отступ сверху
right- отступ справа

Второй вариант как добавить гаджет HTML/JavaScript в шапку над заголовком

Все делаем как описано выше. Находим строку в коде:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
изменяем на
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
maxwidgets='2' это число гаджетов в шапке блога.



воскресенье, 20 мая 2018 г.

Ширина шаблона Blogger

Как увеличить ширину шаблона Blogger
Тяжело будет впихивать третью колонку(http://dotrb.blogspot.com/2009/12/3-kolonka-v-shablone.html) 
в шаблон, предварительно не расширив страницу. Добавить блогу ширины можно с помощью несложного тюнинга стилей CSS шаблона.
Разные шаблоны спроектированы по-разному, и основные блоки
в них могут называться и задаваться по-разному.  
Хорошее правило: увеличивать ширину тех блоков, где она задана с использованием свойства width.
Пример:по-умолчанию  шаблон составляет 660 пикселей в ширину, увеличим его до 1000 px.
Элементы шаблона Blogger.
Элементы шаблона Blogger
В общем случае, нужно будет увеличить следующие элементы:
«Обертка» страницы
Меняю ширину с 660px на 1000px:
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}
#outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}
Здесь и далее изменяется только свойство width; все остальное остается без изменений.
Заголовок
Меняю:
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}
#header-wrapper {
  width:1000px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;

}
«Подвал»
тоже увеличивается до 1000 пикселей в ширину
#footer {
  width:660px;
  /* ... */
}
#footer {
  width:1000px;
  /* ... */
}
Теперь нужно сохранить шаблон.
После этого появится место для дополнительной колонки в блоге.
Пост скриптум
Возможно, в некоторых шаблонах нужно будет увеличить ширину «обертки» центрального блока, внутри которого находятся блок сообщений блога и боковая панель.
В шаблоне «Минима» это блок #content-wrapper, но ширина для него задается «автоматически» и тут ничего менять не надо.
источник: http://dotrb.blogspot.com/2010/02/shirina-shablona-blogger.html#.WwFvCYtqc7Y



среда, 9 мая 2018 г.

Горизонтальное меню на сторонних шаблонах

Еще вариант горизонтального меню с выпадающими вкладками.
На родных шаблонах блоггер можно добавить гаджет над заголовком, или у кого в футере есть возможность добавить гаджет на всю ширину блога. Если установите под заголовком, где обычно меню "страницы", расположение вкладок изменится, настроить трудно. Надо в шаблоне удалять настройки PageList. Посмотрите в демо(https://experiment-u.blogspot.com/) пример меню на родном шаблоне в футере внизу.
А это скриншот:
Горизонтальное меню с выпадающими вкладками для блогов блоггер на сторонних шаблонах
Код для копирования
<style>
#main-nav {
width: 100%;
background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMSgFOylogBiMO6HvcSZkZbsB9gp0HxjuerZC21OLxzdcgtnC3tkmxBp-p4-7nXr3icABaDDL3xNQTPVTCyCNLDsfWsnBbAmW2K6EN28rD_IwD0FF3IDl4GUWmjAnJFPFS2r4jz9-ibEp/s1600/main-nav-back.png[/url]);
}
ul#main-nav li {
    float: left;
    position: relative;
    display: inline;
}
ul#main-nav li a {
    position: relative;
    width: 110px;
    height: 26px;
    display: block;
    background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71KUlAgY94GOoUj-y4R2LVHrooKSoAdZB-nHJeihnN9i9gEW7td-6Pw0OPHw_Uor3eyVXJNVykffy0kkyI1jRRgA8tAE_Of02Or1Z9hmZ-jDGeiGR1So66mpzazNTDReErPu2Cv8m67E-/s1600/menuback4.png[/url]);
    background-position: center center;
    color: #404040;
    text-decoration: none;
    font-family: arial;
    font-size: 14px;
    padding-top: 12px;
    text-align: left;
    padding-left: 26px;
    font-weight: normal;
    text-shadow: 0 0.6px 0 rgba(255, 255, 255, 0.2), 0 -0.6px #000;
}
ul#main-nav li.home a {
background-image: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZM1wtEcNroIQ7sqSpK0g7KGWuCcFlxiZ7gFChhfEW5WuAcZrXEvEEf3AGYYnrSgvEyKaSVMqGK6R7tM-MnVKSVG9ASQUUOwBEpQ8zWpLIDWJrCugfr0aMDP36XwEk1lzdXVadr0oNtvD/s1600/menuback1.png[/url]);
color: #03b4cc;
}
ul#main-nav li.home a:hover {
background-image: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZM1wtEcNroIQ7sqSpK0g7KGWuCcFlxiZ7gFChhfEW5WuAcZrXEvEEf3AGYYnrSgvEyKaSVMqGK6R7tM-MnVKSVG9ASQUUOwBEpQ8zWpLIDWJrCugfr0aMDP36XwEk1lzdXVadr0oNtvD/s1600/menuback1.png[/url]);
color: #f7f7f7;
}
ul#main-nav li.current a {
    background-position: top;
    color: #ffffff;
}
ul#main-nav li a:hover {
    background-position: bottom;
    color: #c2c2c2;
    background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj08OGzH4oO5i-CC7D19K9aRCf1r_PZ6-fiscKhlpAGpirVCLj88Dr9jgUESQ5uCxqFBQwbJTSwjEXh2zmPPEQ-ECNBFY5TgCmhY3nqHRjaEt5Tv9bSWqEBHUUacuusjm_D-kJIylsA9M83/s1600/menuback5.png[/url]);
    padding-left: 25px;
    cursor: pointer;
}
ul#main-nav li.current a:hover {
    background-position: top;
    color: #ffffff;
}
ul#main-nav li.current {
    z-index: 100;
}
ul#main-nav li.home {
    z-index: 100;
}
ul#main-nav li.web-design {
    z-index: 99;
}
ul#main-nav li.web-development {
    z-index: 98;
}
ul#main-nav li.blogging {
    z-index: 97;
}
ul#main-nav li.blogger-tips {
    z-index: 96;
}
ul#main-nav li.widgets {
    z-index: 95;
}
ul#main-nav {
margin-left: 10px;
}
ul#main-nav li {
    float: left;
    position: relative;
    margin-left: -20px;
    display: inline;
}
.mbt_navigation1 {
        position:absolute;
        display:none;
} 
.mbt_navigation1 li {
        clear:both;
}
ul#mbt_navigation1 li a {
background: #242424;
width: 196px;
padding-left: 10px;
color: #c2c2c2;
opacity: 0.9;
font-family: arial;
font-size: 14px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
ul#mbt_navigation1 li a:hover {
background: #535353;
color: #f7f7f7;
margin-left: -22px;
}
#main-nav li ul {
    background: #242424;
    border-left: 2px solid #2b2b2b;
    border-right: 2px solid #2b2b2b;
    border-bottom: 2px solid #2b2b2b;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.9;
    position: absolute;
    width: 177px;
    z-index: 200;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
/*top:1em;
/*left:0;*/
}
#main-nav li:hover ul {
    display: block;
    background-image: none;
}
#main-nav li li {
    display: block;
    float: none;
    padding: 0px;
    width: 245px;
}
.searchbutton1:hover{
opacity: 0.9;
border: none;
}
.icon-right2 {
  color: #4e4e4e;
  font-size: 7px;
}
</style>
<ul id='main-nav'>
<li class='home'><a href='#'>Главная</a></li>
<li class='web-design'><a>Название<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
<li><a href='#'>название</a></li>
</ul></li>
<li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Название</a></li>
</ul></li>
<li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Название</a></li>
</ul></li>
<li class='main-nav web-development'><a>Название<span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Название</a></li>
</ul></li>
<li class='blogging'><a href='#'>Название</a></li>
<li class='widgets'><a href='адрес'>Виджеты</a></li>
<li class='main-nav'><a>Заголовок <span class='icon-right2'>&#9660;</span></a>
<ul id='mbt_navigation1'>
<li><a href='#'>SEO</a></li>
<li><a href='#'>HTML Code</a></li>
<li><a href='#'>HTML Code</a></li>
<li><a href='#'>Заголовок</a></li>
<li><a href='#'>Generator</a></li>
<li><a href='#'>Кнопки</a></li>
</ul></li>
</ul>

Настройки: выделено зеленым цвет и размер шрифта вкладок; синим цвет вкладки главной страницы; бардовым цвет заголовков при наведении мыши; коричневым отступ от края слева ( этому значению уделите внимание), голубым цвет и размер иконки; сиреневый цвет удалить или добавить вкладку и ссылки в выпадающем меню; лиловым размер шрифта названий ссылок в выпадающей вкладке;
Вместо решеток вставьте адреса ссылок; &#9660; код иконки, измените на свою при необходимости;



понедельник, 16 апреля 2018 г.

Убираем ссылку "Подписаться на: Сообщения (Atom)"

В стандартных шаблонах Blogger (Blogspot) внизу головной страницы присутствует ссылка "Подписаться на: Сообщения (Atom)". Изысканным дизайном она не блещет, информативностью тоже. Да и польза от нее под большим вопросом. Существуют же стандартные виджеты "Канал" и "Подписка", которые можно разместить на боковой панели.
Скорее всего разработчики Blogger заключили какое-то соглашение на рекламу протокола Atom - почему и появилась эта нелепая ссылка в нижней части шаблона.
Избавиться от этой ссылки довольно просто. Открываем редактор шаблона (Дизайн->Изменить HTML),  после чего ищем этот код:

1<!-- feed links -->
2<b:include name='feedLinks'/>
А потом его таким вот образом видоизменяем:
1<!-- feed links
2<b:include name='feedLinks'/> -->                                



Язык шаблонов Blogger: Тэги для описания элементов страницы

Данная статья открывает небольшую серию публикаций с переводами на русский язык разделов справки Blogger, посвященных синтаксису шаблонов разметки блога. Серия призвана помочь тем, для кого сообщение "Запрошенная вами информация в настоящий момент недоступна на вашем языке" представляет собой достаточно большую проблему.

(Перевод материала Page Elements Tags for Layouts, дополненный мной)

Тело страницы блога формируется, главным образом, из секций и виджетов. Секции представляют собой области страницы, такие как боковая панель, подвал и т.д. Виджет - индивидуальный элемент, размещаемый в секции, такой как "Статистика блога", "Постоянные читатели" или любой другой компонент, который вы можете добавить в конструкторе "Элементы страницы".

Для создания секции используется парный тэг <b:section></b:section>, который может иметь следующие атрибуты:
  • id (обязательно) - уникальное имя. Допустимые символы: цифры и латинские буквы.
  • class (опционально) - имя класса. При переключении блога с одного шаблона на другой эти имена помогают движку определить, куда в новом шаблоне следует перенести контент. Стандартные имена классов: navbar, header, tabs, main, foot.
  • maxwidgets (опционально) - максимальное количество виджетов, которое может быть размещено в данной секции. Не ограничено, если атрибут не указан.
  • showaddelement (опционально) - может принимать значения 'yes' или 'no'. Значение по умолчанию: 'yes'. Определяет, будет ли на странице "Дизайн->Элементы страницы" отображаться ссылка "Добавить гаджет" для данной секции.
  • growth (опционально) - может принимать значения 'horizontal' или 'vertical'. Значение по умолчанию: 'vertical'. Определяет, располагаются ли виджеты в секции горизонтально или вертикально друг над другом.
Пример тэга, определяющего секцию:
<b:section class="header" id="header" maxwidgets="1" showaddelement="no"></b:section>
Секция может содержать только виджеты, она не может содержать другие секции или произвольный HTML-код. Если вам нужно поместить дополнительный код между виджетами, вам придётся разделить секцию на несколько отдельных секций. В простейшем случае, виджет представлен одиночным тэгом <b:widget/>, на место которого подставляется содержимое виджета при выдаче страницы браузеру.
Примеры виджетов:
<b:widget id="header" type='Header' locked="yes"/>
<b:widget id="myList" type='List' locked="no" title="My Favorites"/>
Виджет может иметь следующие атрибуты:
  • id (обязательно) - может содержать только цифры и латинские буквы, и каждый идентификатор виджета в шаблоне должен быть уникальным. Идентификатор не может быть сменён без удаления виджета и создания нового.
  • type (обязательно) - тип виджета, один из перечисленных ниже.
  • locked (опционально) - принимает значения 'yes' или 'no', значение по умолчанию: 'no'. При значении 'yes' виджет не может быть перемещён или удалён при помощи конструктора "Элементы страницы".
  • title (опционально) - отображаемое имя виджета. Если не указано, будет использовано имя по умолчанию, такое как List1 и т.п.
  • pageType (опционально) - может иметь значения 'all', 'archive', 'main', 'index', 'static_page', или 'item', значение по умолчанию: 'all'. Виджет будет отображаться только на страницах соответствующего типа. (В конструкторе "Элементы страницы" видны все виджеты, вне зависимости от значения этого свойства.)
Стандартные, на момент публикации статьи, типы виджетов и их русские названия:
  • AdSense (AdSense)
  • Attribution (Атрибуты блога в "подвале")
  • Blog (Основная часть блога)
  • BlogArchive (Архив блога)
  • BloggerButton (Логотип)
  • BlogList (Blog List)
  • CustomSearch (Окно поиска)
  • Feed (Канал)
  • FollowByEmail (Рассылка обновлений по электронной почте)
  • Followers (Постоянные читатели)
  • Header (Заголовок страницы)
  • HTML (HTML/JavaScript)
  • Image (Картинка)
  • Label (Ярлыки)
  • LinkList (Список ссылок)
  • NewsBar (Новости)
  • PageList (Страницы)
  • Poll (Опрос)
  • PopularPosts (Популярные сообщения)
  • Profile (Профиль)
  • Slideshow (Показ слайдов)
  • Stats (Статистика блога)
  • Subscribe (Ссылки на подписки)
  • Text (Текст)
  • TextList (Список)
  • VideoBar (Панель видео)
Каждый виджет, также, может быть записан в расширенной форме, содержащей полную разметку и содержимое виджета. Расширенную форму виджетов вы увидите, например, если скачаете шаблон на вкладке "Дизайн->Изменить HTML" или поставив галочку напротив "Расширить шаблоны виджета" (там же). Более подробную информацию о структуре виджетов содержится в статье "Тэги для содержимого виджетов".

Примечание: При отдаче страницы блога браузеру, все тэги <b:section> и <b:widget> заменяются на тэги <div>, имеющие соответствующий ID. Таким образом, например, имеется возможность ссылаться на них через div#header, div#myList и т.п. из CSS.
источник

Данная статья продолжает небольшую серию публикаций с переводами на русский язык разделов справки Blogger, посвященных синтаксису шаблонов разметки блога. В статье описываются тэги, которые вам понадобятся для тонкой настройки шаблона под свои потребности.
(Перевод материала Widget Tags for Layouts)

Тэг widget
Одинарная форма тэга <b:widget> для создания виджетов была рассмотрена в предыдущей статье. Если для работы с шаблоном блога используется только конструктор "Элементы страницы", то этого материала более чем достаточно. Для тонкой же настройки нам потребуется полная форма шаблона. Ее можно увидеть, если скачать шаблон на компьютер или же в режиме, который инициируется при установке галочки напротив "Расширить шаблоны виджета" на вкладке "Изменить HTML".

В полной форме тэг <b:widget> является парным, внутри которого помещается фактическое содержимое виджета.
<b:widget [...атрибуты...]="">
</b:widget>

Теперь рассмотрим, какие тэги вы можете использовать внутри пары тэгов
<b:widget></b:widget>.
Тэги includable и include
Содержимое виджета располагается в подключаемых сегментах, которые имеют следующий формат:
<b:includable id="main" var="thiswidget">
[подключаемое содержимое]
</b:includable>

Атрибуты тэга:
  • id (обязательно) - уникальный идентификатор. (Из цифр и латинских букв.)
  • var (опционально) - идентификатор для данных, адресуемых из содержимого сегмента (см. ниже).
Каждый виджет обязан иметь один подключаемый сегмент с идентификатором id='main'.
Он обычно содержит большую часть контента виджета, и во многих случаях других сегментов не требуется.

Созданные вами сегменты с различными идентификаторами не отображаются автоматически.
Для подключения сегмента (из тела сегмента main или другого сегмента) используйте одиночный тэг <b:include>. (Сегмент main всегда подключается автоматически.)
Атрибуты тэга b:include:
  • name (обязательно) - идентификатор подключаемого сегмента.
  • data (опционально) - выражение, которое передается в сегмент как параметр. Значение данного выражения будет доступно из сегмента через переменную, указанную в его атрибуте var.
Пример, демонстрирующий использование b:includable и b:include. (Тэги loop и data описаны
в следующих разделах данной статьи.) Сегмент main подключает сегмент post, передавая ему в качестве параметра i. Сегмент post получает доступ к данным i через переменную p и выводит свойство title.
<b:includable id="main">
<b:loop values="posts" var="i">
<b:include data="i" name="post" />
</b:loop></b:include>
<b:includable id="post" var="p"> Title: </data:p.title /></b:includable>

Механизм подключаемых сегментов крайне полезен, если нужно в различных местах вставить вставить один и тот же код. Если такой необходимости не возникает, можно просто расположить весь код виджета в пределах одного сегмента main.
Тэг data
При помощи данного тэга осуществляется вставка в тело страницы реального содержимого блога. Примеры использования data:
<data:title />
<data:photo.url />
Первый пример будет работать в большинстве виджетов, поскольку практически все виджеты имеют заголовок, содержащийся в переменной title. Во втором примере используется составная переменная, из которой мы выбираем отдельный компонент.
Скажем, в контексте виджета, отображающего профиль пользователя, переменная photo может иметь компоненты url, height и width. Символ "." означает, что мы выбираем компонент url переменной photo. Существует множество данных, которые вы можете получить при помощи тэга data, в зависимости от конкретного виджета. Подробный список переменных, доступных через данный тэг, представлен в следующей статье.
Тэг loop

Тэг b:loop даёт возможность повторить фрагмент кода несколько раз с различными данными. Он используется чтобы вывести сообщения, комментарии к сообщению, метки сообщения и т.п. Тэг имеет следующий формат:
<b:loop var='identifier' values='set-of-data'>
[код, который будет повторяться в цикле]
</b:loop>

Атрибут var содержит имя переменной, в которой на каждой итерации цикла будет содержаться новая порция данных. Атрибут values содержит имя переменной, в которой находится список, перебор элементов которого будет производиться в цикле. Следующий пример кода выводит заголовки сообщений:
<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>
Тэг if / else

Тэги b:if и b:else используются, чтобы отобразить один вариант контента при выполнении заданного условия и другой вариант — при не выполнении.
Формат использования:
<b:if cond='условие'>
[содержимое, отображающееся, если условие выполняется]
<b:else/>
[содержимое, отображающееся, если условие не выполняется]
</b:if>
Тэг b:else не обязателен. Если он отсутствует, в случае невыполнения условия в данном месте не отображается ничего.

В условие можно помещать что угодно, что вычислится как булево значение. Некоторые переменные сами содержат булево значение, например allowComments. Некоторые примеры:

<b:if cond='data:post.showBacklinks'> Истинно, если в этом посте нужно отображать обратные ссылки.
<b:if cond='data:displayname != "Fred"'> Истинно, если отображаемое имя не равно Fred.
<b:if cond='data:post.numComments > 1'> Истинно, если пост имеет более одного комментария