Итак, открываем "Дизайн" - "Изменить HTML" и находим там с вот такую строку кода :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Полностью она выглядит так: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id="Header1" locked="false" title="Название вашего блога (заголовок)" type="Header">
</b:widget></b:section>
Но чтобы иметь возможность добавлять гаджеты над секцией с заголовком, необходимо изменить значение некоторых параметров:<b:widget id="Header1" locked="false" title="Название вашего блога (заголовок)" type="Header">
</b:widget></b:section>
- maxwidgets - это количество гаджетов которое вы хотите разместить, цифра указывает сколько максимально можно расположить виджетов в этой секции, например: 1, 2, 3 и т.д. Если ни указано ничего, количество не ограничено. Нам необходимо поменять "1" на любое нужное число.
- showaddelement - параметр, который делает видимым поле для добавления виджета - "Добавить гаджет". Изменяем no на yes
Так будет выглядеть итоговый вариант:
<b:section class="header" id="header" maxwidgets="3" showaddelement="yes">
...
...
Теперь легким движением руки и курсора перетягиваем гаджет в поле над шапкой. Там можно разместить дополнительное меню или рекламный баннер, а может и флеш-презентацию тут уж кто на что горазд :)
Размещение гаджета над шапкой
Вот и все. Буду рад вашим комментариям.
Спасибо, помогли. Сделала гаджет на верху и пустила бегущую строчу. Красота!
ОтветитьУдалитьДа, работает. Спасибо.
ОтветитьУдалитьОчень нравится ваш блог! И по оформлению и по изложению материала
ОтветитьУдалитьСпасибо, стараемся :)
УдалитьА как сделать, чтобы Заголовок и гаджет (скажем, окно поиска) поставить на одном уровне?
ОтветитьУдалитьКак-то не задавался этим вопросом для гаджета "Окно поиска", но думаю сделать такое можно при помощи CSS. Узнать идентификаторы и вперед, пример кода стиля будет примерно такой:
Удалить#BlogArchive1 h2 {
background: #fff1f0;
color: #000;
text-align: center;
padding-top: 20px;
float: left;
height: 100px;
width: 20%;
}
#ArchiveList {
float:right;
background: #f1f1f0;
height: 120px;
width: 80%;
overflow-y: auto;
}
З.Ы. Эксперименты проводились над "Архив блога" расположенном горизонтально вне колонок.
Пытаюсь сделать так:
Удалить#PageList1 {
background: #ffffff;
color: #000;
text-align: center;
padding-top: 20px;
float: left;
height: 100px;
width: 80%;
}
#HTML1 {
float:right;
background: #ffffff;
height: 100px;
width: 20%;
overflow-y: auto;
}
Оба виджета становятся в ряд, но не работают (ни тот, ни тот).
Тогда убираю строки float, они работают, но становятся друг под друга (((
Не знаю что придумать.
И ещё вопрос -- что значит # и точка вместо него?
Спасибо за инструкцию, но есть маленькая проблема.
ОтветитьУдалитьЯ вставил панель ссылок над шапкой, но теперь, она отображается не горизонтальной полоской, а вертикальным списком. Подскажите как поправить.
Первое - что за панель и каких ссылок? Стандартная (гаджет "Список ссылок" или самописная(по-иному - "левая")? Ссылки в списке (UL - LI) или просто в блоке?
УдалитьЕсли это стандартный гаджет "Список ссылок", то рецепт такой -
#LinkList1 li {
display: inline; /*можно inline-block*/
list-style: none; /*убираем маркеры*/
}
/*это бонус - стиль для самих ссылок в гаджете (если понадобится). Свойства и значения по-вкусу*/
#LinkList1 li>a {
color: #C6F;
}
Вставлял обычный гаджет "список ссылок", или список страниц блога. Оба списка над заголовком отображаются вертикально, а под заголовком - горизонтально.
УдалитьСтили выше пробовали применять? И откройте блог, чтобы можно было посмотреть, наощупь как-то не очень понятно где копать.
Удалитьhttp://cosmos--o.blogspot.ru/
УдалитьСтили менять не пробовал, в редакторе HTML подобных строчек не нашел, а с css еще не разобрался
В редакторе подобных строчек и не будет, т.к. гаджет этот добавочный и стили к нему по умолчанию не прописаны, поэтому их нужно добавлять самостоятельно.
УдалитьНа всякий случай изучаете статью Добавляем CSS в HTML шаблона Blogger(Blogspot)
Про гаджет "Страницы" тут воял:
гаджет "Страницы" в Blogger(Blogspot)
Но вам должен помочь такой стиль:
#PageList1 li {
display: inline; /*можно inline-block*/
list-style: none; /*убираем маркеры*/
}
Иногда нужно записывать так (если первый вариант не помог)
.header section #PageList1 li {
display: inline;
list-style: none;
}
Спасибо огромное, помог первый вариант, но только с "inline-block".
ОтветитьУдалитьЕдинственный ньюанс в том, что после смены стилей, расстояние между ссылками на страницы уменьшилось, видимо до минимального. Не подскажете где найти параметр отвечающий за это?
ОтветитьУдалитьИспользуйте свойства padding - отступ внутри, и margin - отступы снаружи, чтобы выставить расстояния, также можете указать высоту - height , ширину - width.
УдалитьПример:
#PageList1 li {
height: 30px;
width: 150px /*можно указать auto, если регулировка ширины происходит за счет padding*/
padding: 5px 15px 10px 20px;
margin: 0 2px;
}
Значения для padding и margin записываются так:
4 значения - верх, право, низ, лево;
2 зн. - верх/низ, право/лево;
1зн. - все стороны.
Также можете поэкспериментировать с #PageList1 li a {...} - так вы будете влиять на сами ссылки, а не на блоки в которых они расположены.
Доброе время суток! А у меня такой вопрос! Все сделал, понравилось ибо работает, но! Баннер висит только на главной странице! По статьям банер не висит! Не знаете как поправить? Блог - спул.рф Спасибо!
ОтветитьУдалитьЧестно говоря с таким не сталкивался, надо смотреть по исходному коду, возможно там прописан условный тег.
УдалитьИ еще вопросик! Дайте свои контакты куда мне можно написать с вопросиком по блогу! Очень сложно нагуглить нужный ответ! Спасибо за полезную информацию!
ОтветитьУдалитьВсе мои контакты есть во разделе меню "Присоединяйся", там ссылки и на скайп и на почту. Пишите и добавляйтесь.
УдалитьДобрый день. А мне бы хотелось строку поиска добавить в один ряд с меню (как у Вас тут на блоге). По идее, у меня (http://edodina.blogspot.ru/) - это оба гаджета (страницы и HTML/JavaScript соответственно). Как подобное реализовать?
ОтветитьУдалитьЗаранее спасибо за ответ.
У меня это все дело самописное, в одну из секций меню добавлен пользовательский поиск.
УдалитьПро него тут - http://www.magentawave.com/2013/02/gcse-simple-css-design.html
Не забудьте сделать резервную копию шаблона, прежде чем приступить к изменениям!
Итак самый простой вариант: размещаете ваш гаджет с поиском в той же секции что и гаджет страницы - просто перетяните его туда в админке. Он должен стать выше или ниже меню. Теперь переходите в настройки шаблона и добавляете CSS(можно через панель, можно в код - http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html) - для гаджета Страницы - это PageList1, для поиска (гаджет HTML/JS) - это HTML1 - его порядковый идентификатор.
#PageList1 {
width: 45%;
display: inline-block;
float: left;
}
#HTML1 {
display: inline-block;
width: 45%;
float: right;
}
Подробно про гаджеты - http://www.magentawave.com/2012/02/change-widget-style.html
Важный момент - перед размещением(перетаскиванием) гаджета просмотрите в исходном коде параметры для секции, в которой размещен Страницы и будете размещать Поиск, а именно maxwidgets его значение должно быть больше одного("1") или его вообще не должно быть, что гаджет добавился именно в эту секцию.
Александр, спасибо, но по Вашему рецепту не получилось. Несмотря на то, что страницы отображались слева, а строка поиска справа, они располагались в два ряда, как бы друг под другом. Проблему решила, разделив поле гаджета под заголовком на два по рецепту: http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#razdelit
УдалитьНо всё равно спасибо за участие)
Евгения, это второй способ, Просто не стал писать статью в комментарии :) Но и то, я делаю не так - участвуют не секции, а блоки с секциями, как по мне, то так правильнее. но вариант Натальи тоже нормуль, простой :))
УдалитьИзвините, что достаю. Я всё пробую выстовить свои гаджеты (PageList1 и HTML) в один ряд, вверху.
УдалитьТеперь я пришла к следующему: я могу выставить в ряд их таким способом:
#PageList1 {
display: inline-block;
float: left;
}
#html1 {
display: inline-block;
float: right;
}
в этом случае, они становятся в ряд (правда ниже, чем мне хотелось бы -- когда виджет страницы один, он стоит выше, почти вплотную с краем), но! оба виджета не работают.
тогда я меняю "html1" на "social-icons" и соцкнопки начинают работать (не знаю как система понимает что такое social-icons, вроде бы нигде не прописано, но это работает).
теперь маюсь -- не знаю какое имя дать PageList1, чтобы и странички заработали вновь?
и хотелось бы их всё-таки поднять выше...
Возможно вам помогут приемы описанные в этой статье
Удалитьhttp://www.magentawave.com/2012/10/why-not-droping.html
там есть описаны некоторые моменты, которые могут помочь в решении вашей проблемы.
Спасибо! Все работает! А как добавить гаджет в самый низ блога? У меня не стандартный шаблон и они скорее всего удалены! можно добавлять только под сообщения в само тело...
ОтветитьУдалитьВы можете добавлять гаджеты в любое место самостоятельно, для этого вам нужно просто создать для него новую секцию (оболочку), примерно так как это показано в примере, в нужном месте.
Удалить<b:section class='footer' id='footer-one' maxwidgets='1' showaddelement='yes'>
</b:section>
Она появится в админке и вы сможете добавлять новые гаджеты из нее.
Вот дополнительная информация из справки по Blogger: https://support.google.com/blogger/answer/46888?hl=ru&topic=12449&ctx=topic
Спасибо за помощь и за полезный сайт...еще нашел у Вас такую вещь как закрытие сайта до полной его загрузки,но у меня почему-то не ставится код в шаблон,пишет ошибка Html и выделяет тег body... не подскажите,что бы это могло быть...
УдалитьВы допускаете ошибку при установке кода в шаблон, нужно быть внимательным если шаблон не стандартный. Это может быть из-за неправильного добавления скрипта или недописанного закрывающего тега. Относительно скриптов можно почитать здесь:
Удалитьhttp://www.magentawave.com/2013/03/how-connect-scripts.html
Просмотрите внимательно добавленный код, но в любом случаи чтобы разобраться с такой проблемой нужно смотреть на исходный код вашего блога с добавленными элементами.
Спасибо...будем пробовать еще...
УдалитьСпасибо получилось! Люблю Ваш блог за то что все всегда отлично воплощается.
ОтветитьУдалитьСпасибо! Все получилось.
ОтветитьУдалитьСпасибо огромное! Умеете не только сделать, но и преподать урок для самыхъ непонятливых
ОтветитьУдалить