Здравствуйте дорогие друзья, так уж вышло что
у меня в блоге много различных счетчиков. И вот недавно они мне надоели, потому
как стояли в разных гаджетах по всей страничке. Я решил их убрать да так что б они
мне не мешали, в принципе я знал чего я хочу, но не знал как это реализовать, а
потом так получилось что я нашел решение. Оно оказалось не сложным надо было
добавить гаджет, в то место где его раньше не было, а именно сверху странички
настройки гаджетов, и снизу
Проще говоря (чердак, и подвал) странички настройки гаджетов. А вот и решение
первым делом нам надо скопировать свой шаблон на компьютер, что бы если что-то пойдет не так то его сожно было востановить. А основное для начала заходим в меню справа шаблон изменить HTML далее зажимаем CTRL+F открывается окно поиска и в нем находим строчки кода такие:
вставляем такие строки:
А теперь будет наш Низ, настройек странички гаджетов.
Прокручиваем в самый низ нашего шаблона видим строчки
Проще говоря (чердак, и подвал) странички настройки гаджетов. А вот и решение
первым делом нам надо скопировать свой шаблон на компьютер, что бы если что-то пойдет не так то его сожно было востановить. А основное для начала заходим в меню справа шаблон изменить HTML далее зажимаем CTRL+F открывается окно поиска и в нем находим строчки кода такие:
<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><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Заголовок вашего блога (Header)' type='Header'/>
</b:section>
</div>
<div id='top-wrapper'>
<b:section class='topper' id='topper'/>
</div>
Это будет наш Верх, настройек странички гаджетов. Сохраняем и не закрывая этой странички что бы не искать потом тот код в шаблоне, открываем еще одну вкладку с блоггер, и проверяем если верхний гаджет на месте то значит все работает нормально. А если нет то либо вы не в том месте вcтавили код либо к вашему шаблону код не подходит.<b:section class='topper' id='topper'/>
</div>
А теперь будет наш Низ, настройек странички гаджетов.
Прокручиваем в самый низ нашего шаблона видим строчки
</body>
</html>
И перед тегом </div> вставляем код для нашего подвала:
<div id='bottom-wrapper'>
<b:section class='bottommer' id='bottommer'/>
</div>
И в принципе все готово, то есть у вас должны появится гаджеты сверху, и снизу в вашем меню.Но если делать все по уму то нам надо сделать CSS - описание для верхних, и нижних строчек гаджетов вашего меню. Как их прописать, и где об этом ниже:
<b:section class='bottommer' id='bottommer'/>
</div>
Для верха настройек странички гаджетов
#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 - Это ширина вашего гаджета, её можно изменить.
background - Это ваш фон, задавать мы его будем в переменной top_bg (для верха) и
bottom_bg (для низа)
color- Это цвет шрифта, задавать мы его будем в нашей переменной top_color (для
верха) и bottom_color (для низа)
font-size- Это размер шрифта вашего гаджета
Вставлять наши описания CSS надо после строчки ]]></b:skin>
Теперь нам осталось добавить переменные, они будут выглядеть как черные, буквы на белом фоне. Если захотите их изменить то меняйте либо в этом коде либо через Дизайнер шаблонов Blogger
А вот и сам код:
<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">
вставляется он перед строчкой кода:
/* Variable definitions
Не забываем все сохранить, и проверить на работоспособность.
На этом я заканчиваю данную статью, всем спасибо за внимание подписывайтесь еще будет много интересного.
0 коммент. :