Blogger - невеличкий веб лікнеп 3. Кнопки та менюшки

 Як зробити меню та кнопки посилань для Blogger. Веб сервіс dynamicdrive.com для створення стилів.

 Загальне уявлення про коліщатка, що рухають блог на блогспоті, вималювалося. Тим не менш, є ще багато білих плям. Наприклад, побачивши нещодавно свій блог через ІЕ  я засмутився.

Мал. 1 У ІЕ сторінка місцями обрізана..

 Але не намагатимусь охопити одразу все.
  Наразі про кнопочки. Якщо правильніше, то про те, як зробити меню для блога на блогспоті.
 Зробити кнопку виявилось на диво легко.

 Спочатку обираємо де і які кнопки ми додамо у шаблон.
 Журнальне (magazine) оформлення блогів особисто мені вже набило оскомину, як і намагання зімітувати популярні вордпресівські теми. Хотілося зберегти цілісний простір сторінки. Я розумію, є певні закони жанру, правила побудови дизайну, все, що обов'язково має знати і чого зобов'язаний дотримуватись професійний веб дизайнер.
  На щастя я і у вебі, і у дизайні початківець-аматор. Багато читати мені швидко набридає, діставати запитаннями більш досвідчених товаришів заважає природна скромність :)))) (одразу згадаю, як мене дістають кадри, які замість з'єднати два проводки і подивитись, що станеться, по двадцять раз перепитують "що?" та "як?". Лиш досвід наш - учитель вправний - моя версія Пушкінських рядків :) Тому керувався виключно інтуїцією. Подобається - не подобається. Створив тестовий блог і вправлявся до несхочу.
  Зробив таке:

Мал. 2 Варіант дизайну

 Подивився через тиждень і повикидав більшу частину "наворотів". І навіть не питайте чому.
 Визначився з дизайном, приступив до кнопок.
 Способів зробити менюшку - безліч.
 Що правда, про них я довідався вже після того, як зробив все по-своєму.

 Кнопка - це прямокутне поле, розміри якого та розташування прописані у стилях. Поле може містити напис, зображення або фоновий колір.
 Виділяємо блок для кнопок - #buttons. Мої кнопки будуть у хідері, тому у шаблоні одразу після:

<b:widget id='Header1' locked='true' title='Ламайстер (Заголовок)' type='Header'/>
</b:section>

Прописуємо:

<div id='buttons'>
   
        <a href='http://куди перейти при натисканні' id='button1'>Текст на кнопці1</a>
        <a href='http://куди перейти при натисканні' id='button2'>Текст на кнопці2</a>
        <a href='http://куди перейти при натисканні' id='button3'>Текст на кнопці3</a>
        <a href='http://куди перейти при натисканні' id='button4'>Текст на кнопці4</a>
        <a href='http://куди перейти при натисканні' id='button5'>Текст на кнопці5</a>


</div>

 А у стилях пишемо, як наше меню відображати:

 #buttons a { -------  блок <div id='buttons'>
    display: block;----всередині блоку
    float: left;----------обтікають малюнки по лівому краю
    width: 150px;----ширина поля "кнопки" 150 пікселів
    height: 20px;-----висота поля кнопки 20 пікселів
    text-align: left;----вирівнювання тексту по лівому краю
    text-indent:20px;----відступ, щоб текст не накладувався на малюнок
    text-decoration: none; -не підкреслювати посилання
    letter-spacing: 1px; ----міжсимвольний інтервал
    font-size: 1.6em;----- розмір шрифта
    font-weight: normal;--
    color: #CCCCFF; ------колір тексту
}
#buttons a:hover {------при наведенні курсора
    color: #9900CC;------міняти колір тексту
}

  Всі мої кнопки розмістилися у лівому верхньому кутку, тому, не мудрствуючи, я всі їх пришпилив властивістю position: absolute описавши у стилях  для кожної кнопки абсолютні позиції у пікселях:

#button1 {  position:absolute; top: 30px; left: 110px; }
#button2 {  position:absolute; top:.....      left:.....      ; }
#button3 {  position:absolute; top:.....      left:.....      ; }
....

 Зірочки також виділяють кнопку. Намалювавши зірочки у The GIMP, зберіг їх, завантаживши на свою googlepages . Туди ж завантажив і gif з  зірочкою, що обертається.
 Непоганий, доречі, спосіб зберігати графіку для шаблонів. Кожен малюнок отримує адресу на зразок:

 http://ваш_нік.googlepages.com/назва_малюнка.gif

Набагато зручніше пікасівської абракадабри. До ваших послуг 100 мб.

 Тепер прописую зірочки у стилях:

#button1 {  position:absolute; top: 30px; left: 110px;
 background: url(http://мій_нік:).googlepages.com/strs.gif) no-repeat; }
#button2 {  position:absolute; top: ...; left: ...;
 background: url(http://мій_нік:).googlepages.com/strs1.gif) no-repeat; }
#button3 {  position:absolute; top: ...; left: ...;
 background: url(http://мій_нік:).googlepages.com/strs2.gif) no-repeat; }
....

Малюнки, як бачимо, для кожної кнопочки різні, щоб було не занадто прилизано, подалі від гламуру :) .
 Для активованих кнопок (наведено курсор, або кнопка натиснута) у бакгроунді пишу посилання на анімований gif. Скрізь на один і той самий:

#button1:hover, #buttons .active #button1 { background-image: url(http://мій_нік:).googlepages.com/strshan1.gif); }
#button2:hover, #buttons .active #button2 { background-image: url(http://мій_нік:).googlepages.com/strshan1.gif); }
#button3:hover, #buttons .active #button3 { background-image: url(http://мій_нік:).googlepages.com/strshan1.gif); }
...

 І вся музика.
Ще про те як зробити «меню» можна прочитати тут: Меню в блог Blogger (додано 11 16 09)
 А тепер про те, як все це можна зробити набагато простіше.
Я вже писав, що ми можемо включити  додавання віджетів навіть тоді, коли шаблон нам явно не надає такої можливості.
 На вкладці " редагувати HTML" ставимо у:

<b:section class='header' id='header' maxwidgets='3'>

Переходимо до "Елементи сторінки", створюємо віджет HTML/JavaScrypt, куди і помістим увесь вище наведений код, попередньо позначивши  <style type="text/css"> - на початку та </style> - у кінці блоку стилів.
 Чому цей спосіб простіший?
 Тому, що замість вигадувати самим, ми можемо скористатися сервісом http://www.dynamicdrive.com/style/ , вибравши собі дизайн, скопіювати стилі, скрипти та HTML код у вікно віджету, та насолоджуватись результатом. Важливо не забути перенести на свій googlepages всі малюнки, на які посилаються у стилях, і скрипти, на які є посилання,  наново переписавши лінки.
 Взагалі сервіс мені дуже сподобався. Безліч вже готових рішень на будь-який випадок. А якщо трохи попрацювати "з надфилем"...

 На цьому свій невеличкий веб лікнеп припиняю.  Тимчасово.  Блогів про ведення блогів і так вже забагато :).