Расширить шаблон, и добавить поле для гаджетов сверху,и снизу блога.

Здравствуйте дорогие друзья, так уж вышло что у меня в блоге много различных счетчиков. И вот недавно они мне надоели, потому как стояли в разных гаджетах по всей страничке. Я решил их убрать да так что б они мне не мешали, в принципе я знал чего я хочу, но не знал как это реализовать, а потом так получилось что я нашел решение. Оно оказалось не сложным надо было добавить гаджет, в то место где его раньше не было, а именно сверху странички настройки гаджетов, и снизу

 Проще говоря (чердак, и подвал) странички настройки гаджетов. А вот и решение
первым делом нам надо скопировать свой шаблон на компьютер, что бы если что-то пойдет не так то его сожно было востановить. А основное для начала заходим в меню справа шаблон изменить 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>

  вставляем такие строки:

<div id='top-wrapper'>
<b:section class='topper' id='topper'/>
</div>

Это будет наш Верх, настройек странички гаджетов. Сохраняем и не закрывая этой странички что бы не искать потом тот код в шаблоне, открываем еще одну вкладку с блоггер, и проверяем если верхний гаджет на месте то значит все работает нормально. А если нет то либо вы не в том месте вcтавили код либо к вашему шаблону код не подходит.


А теперь будет наш Низ, настройек странички гаджетов.
Прокручиваем в самый низ нашего шаблона видим строчки

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

И перед тегом  </div>  вставляем код для нашего подвала:

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

И в принципе все готово, то есть у вас должны появится гаджеты сверху, и снизу в вашем меню.Но если делать все по уму то нам надо сделать 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 - Это  ширина вашего гаджета, её можно изменить. 

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

Не забываем все сохранить, и проверить на работоспособность.
 На этом я заканчиваю данную статью, всем спасибо за внимание подписывайтесь еще будет много интересного.