Делаем CSS Menu для вашего блога на blogspot(blogger)Часть 2

Начало тут -Делаем CSS Menu для вашего блога на blogspot(blogger).Продолжение темы.Для создания я воспользуюсь одним из сайтов которые я привел тут ,вы можете выбрать другой ,посмотрите потому что можно выбрать стиль .Итак идём на http://www.cssmenubuilder.com/home .Тут я покажу как работать с сайтом генератором и как генерировать меню .Смотрите видео .Да кстати -тема будет продолжена -как вручную подогнать меню к вашему блогу!

CSS Menu для вашего блога на blogspot(blogger)

Навигация -красивая навигация в вашем блоге.Ну что ж.Что для этого надо?
1 Первое -нужно само меню-которое мы берём с сайта о которых я рассказал здесь( CSS Menu).
2 Затем выбераем место где вы будете его устанавливать ,это уже зависит от вас -его вид вертикальное ,горизонтальное .В этой статье я расскажу -о том как поставить горизонтальное меню.
3 Для этого нужно создать в макете (если у вас есть пропускаем ) элемент -например мы ставим меню над Header -смотрим как это сделать тут (Создаём элемент для гаджет над Header)
Если вы ставите меню под Header -создаём элемент под ним -как это сделать смотрим тут(Создаём элемент для гаджет под Header)
4 На сайте после генерации CSS Menu вы получаете два кода.Css и html.Что с ними делать?

Разберёмся для начала с CSS

1)Макет-Изменить HTML
2)Затем сохраняем ваш шаблон на компьютер (резервная копия).
3)Вставляем ваш код CSS перед кодом ]]>b:skin>
4)Сохраняем шаблон.

Теперь разберёмся с HTML кодом вашего меню .
1)Мы создали элемент под Header.


Так вот используем его -и вставляем в этот элемент ваш Html код.Так же как обыкновенный ява скрипт.Помните как мы сделали поиск для вашего блога?



2)Сохраняем шаблон .


Вот вобщем то и всё!


Пример тут -можно глянуть (тут правда над Header http://purgatory-kino.blogspot.com/ )



Социальные закладки в конце поста.

«Настройки» -> «Форматирование» -> «Шаблон» -HTML изменить -ставим галочку расширить виджеты -находим чать кода

<p><data:post.body/>p>

* This source code was highlighted with Source Code Highlighter.

вставаляем после него -код полученный -со следующих сервисов
1)для русскоязычного блога http://odnaknopka.ru/get/





2)Для англоязычного блога придёться пройти простую регистрацию на сайте и тоже получить код с АddThis



Сохраняем шаблон .

Делаем фоновое изображение

Делаем фоновое изображение с помощью CSS. Через "Макет - Изменить HTML" задать правило для body.

Ищем ищем часть кода body. Выглядит примерно так:
body {
  /* что то там */

}

забрасываем фоновую картинку:
body {
  background:url('http://your_url.com/image.gif');
}

http://your_url.com/image.gif заменить своей картинкой.

Это если кратко -если подробнее.
background: background-attachment || background-color || background-
image || background-position || background-repeat

background-attachment -- бывает два [fixed | scroll]
  fixed - при прокрутке окна остается неподвижным
  scroll - изображение прокручивается вместе с содержимым окна

background-color -- цвет фона.
  Может быть задан по названию цвета (например: red, green, blue);
  16-ричным значением (#FF0000, #00FF00, #0000FF);
  RGB значением. Например: rgb(255,0,0)

background-image -- url изображения.
  у нас: url('http://your_url.com/image.gif')

background-position -- позиция фонового изображения.
  Прописываеться по разному, в процентах, с
помощью ключевых слов в порядке "горизонталь вертикаль": [left |
center | right] || [top | center | bottom] (Например left top)

background-repeat -- отвечает за "повторение" фонового изображения.
  no-repeat -- изображение отображается один раз, не повторяется
  repeat-x -- повторяется по горизонтали
  repeat-y -- повторяется по вертикали
  repeat -- повторяется по обоим направлениям X и Y. 
  

  Оп ещё надо всегда задавать альтернативу -если у пользователя незагрузилась картинка !

Пример:
  background: fixed #F8D8D6 url('http://your_url.com/image.gif') left
top repeat-y; 
 

СSS меню в ваш блог blogger

На на многих сайтов навигационное меню делается с помощью обычных текстовых ссылок. Но возможно вы захотите сделать СSS меню.Это красиво ,функционально и ещё для вашего блога -это не займет много времени!Ведь можно вставить его в ваш шаблон как виджет -!Помните мы создавали -гаджет над Header -так вот там отличное место для горизонтального меню,а для вертикального -боковая панель гаджетов.
Есть 4 варианта :
1 Сделать меню самому.К этому я может ещё вернусь.

2 Сделать его при помощи софта -программки генератора.скачать можно отсюда-вещь неплохая:http://www.highdots.com/css-tab-designer

3 Скачиваем шаблон с одного из сайтов:

http://www.13styles.com/
http://www.dynamicdrive.com/style/
http://www.lwis.net/free-css-drop-down-menu/

4 Заходим на сайт -он-лайн генерации СSS меню:
http://www.izzymenu.com/
http://www.cssmenubuilder.com/build-horizontal-menu
http://cssmenumaker.com/builder/menu_info.php?menu=008

Создаём элемент для гаджет под Header

И так идём в макет -изменить HTML и перед следующим куском кода ]]></b:skin> вставляем :

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

Затем находим следующий кусок кода 

 <div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
  </div>

и всталяем после него следующий код :

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

сохраняем шаблон и всё!

* This source code was highlighted with Source Code Highlighter.

Создаём элемент для гаджет над Header

Идем в макет -изменить HTML

Находим следующий кусок кода:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

и заменяем его на :

<b:section class='header' id='header' preferred='yes'>

сохраняем шаблон и опля! у нас изменение в макете -с чем вас и поздравляю!

* This source code was highlighted with Source Code Highlighter.

трехколоночный подвал в Blogger

Ну так ребята отправляемся в «Макет», выбираем «Изменить HTML». Галочку «расширить шаблон виджета» ставить не нужно.
Находим следующую часть кода

div id='footer-wrapper'
b:section class='footer' id='footer'/
/div


которое следует заменить на следующий код:

<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div>

После того как сохранили шаблон,
возвращаемся во вкладку «Макет», выбираем «Изменить HTML»,
находим тэг: 
]]></b:skin>

и вставляем перед ним скопировав - код:

/* bottom
==================== */

#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#center-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#right-bottom {
width: 205px;
float: left;
padding: 0 5px 0 10px;
}


сохраняем шаблон любуемся своим творением

* This source code was highlighted with Source Code Highlighter.