пʼятницю, 6 березня 2009 р.

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

4 коментарів:
 Як зробити меню та кнопки посилань для 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 всі малюнки, на які посилаються у стилях, і скрипти, на які є посилання,  наново переписавши лінки.
 Взагалі сервіс мені дуже сподобався. Безліч вже готових рішень на будь-який випадок. А якщо трохи попрацювати "з надфилем"...

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

4 коментаря

Марк Тур :

Ви не могли б пояснити простіше? От треба мені вставити кнопку у готовому віджеті для переходу на іншу веб-сторінку.
Будь ласка, напишіть код, щоб на кнопці був фоновий малюнок і напис, а я цей код скопіюю, вставлю у віджет і внесу потрібні зміни.
Будь ласка, якщо не важко.

diy :

Мені здається вам потрібна не кнопка а банер.

Відправляю листом на адресу у вашому профілі, бо blogger відфільтровує код у коментарях. Листа також потрібно переглядати як простий текст інакше замість коду побачите результат

Тарас :

Вважав що мало хто до такого додумувся бавитись з тим b:> в шаблонах. Варто булоб ясиь блог комусь зі знаючих завети де конкретну цю тему обговрювати - зміна дизайну блогу, редагуванням html шаблону. Та кому охота?

diy :

Одна з найбільших проблем українського блогерства — практична неможливість забезпечити хоч якийсь дохід з блогу. Враховуючи наші доволі складні економічні реалії, коли заробляння на життя забирає і так значну частину часу, та іноді потребує зосередити всі зусилля. Через це для переважної більшості блогерство лише улюблене хобі, на яке часто - густо не вистачає часу. Планів багато, у чернетках лежить «крок за кроком» — блог про мої перші кроки у інеті та дизайні, думав перенести все, що стосується шаблонів веб-сервісів, налаштувань туди. Навіть статтю написав про друге народження цього блогу, здається наврочив, обставини різко змінилися, кілька місяців лише час від часу перевіряв коментарі, про нинішні плани мовчатиму :) , забобонним став ;) , але гадаю що подібна ситуація у багатьох.

Та кому охота?
Не судіть нас занадто суворо: До тих, хто плекає лозу УкрВебу: http://blogosphere.com.ua/2010/01/11/about-ukrweb/

Дописати коментар

Можна використовувати теги:
<i>курсив</i> <b>жирний</b>
<a href="http:// «адреса посилання» "> «текст» </a>

ще? :