<
  • Главная
Статьи

Як зробити графічне меню вконтакте?

  1. З чого почати?
  2. Як створити вертикальне, графічне меню вконтакте?
  3. Як зробити горизонтальне, графічне меню вконтакте?

Вітаю, друзі, на блозі - SdelaemBlog.ru . В одній зі статей, я вам розповідав, як зробити просте текстове меню вконтакте . І сьогодні, я вирішив продовжити цю тему і поговорити про те, як створити графічне меню вконтакте. Адже, не кожну вебмастера, який хоче красиво оформити свою групу, влаштує текстове меню. Зараз, мабуть, більш актуально графічне меню, так як різні зображення сприймаються куди краще відвідувачами ніж, текстові посилання. Та й за допомогою графіки можна зліпити дійсно щось красиве і барвисте.

графічне меню вконтакте

З чого почати?

Ну почати природно варто з підбору підходящої графіки або ж намалювати меню з нуля. Звичайно намалювати меню з нуля зможе не кожен. Але проблема вирішувана, та як у всесвітній павутині повно різної графіки, як безкоштовною, так і платній, за допомогою якої можна здійснити задумане. На даному етапі, я не буду вдаватися в подробиці, тому що знайти картинки в мережі не складно, а малювати я не вмію. Відразу почну з того, що у нас вже є відповідна графіка, але що робити далі не зрозуміло?

Після того, як ви завантажили або намалювали меню, його потрібно нарізати. Для чого це потрібно? Це необхідно, для створення окремих посилань, для того чи іншого зображення. Так як, якщо наше меню поставити повністю в групу, то більше одного посилання зробити не вийде, або я чогось не знаю. Крім того, наше меню необхідно підігнати за розмірами, тобто відразу варто врахувати, що максимальна видима ширина становить 388 пікселів (одне зображення), а решта буде або обрізатися, або підганяти за розмірами, які ви вкажете при створенні меню в групі, при цьому зображення може розтягнутися або навпаки стиснутися, що може зіпсувати первинну задумку. Ще варто врахувати, що наприклад, для горизонтального меню нам доведеться орієнтуватися на ширину рівну 370 пікселям, інакше меню не вишикується горизонтально.

Отже, я буду показувати, для прикладу звичайнісінькі кнопочки. Всі маніпуляції з графікою я буду робити за допомогою фотошопу, тому і вам рекомендую використовувати його. Після того, як з розмірами ми розібралися, залишається нарізати меню. Для цього, можна скористатися зручним інструментом «розкроювання».

Просто виділіть цим інструментів необхідні області, наприклад:

І збережіть, для web-пристроїв.

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

Після цього, наше зображення зберегтися в нарізаному вигляді в папці, яку ми могли привласнити ім'я. Тепер, можна приступити безпосередньо до створення графічного меню вконтакте.

Як створити вертикальне, графічне меню вконтакте?

Переходимо на сторінку нашої групи. І робимо деякі підготовчі дії: В управлінні спільнотою, підключаємо «матеріали», зберігаємо. Якщо щось незрозуміло на даному етапі, то прочитайте статтю, про текстове меню вконтакте , Там все докладно, про це сказано.

Після цього, нам необхідно завантажити наші картинки, які ми отримали, при розкроюванні меню. Тобто, тиснемо «Додати фотографії».

Тобто, тиснемо «Додати фотографії»

Далі можна або перетягнути все картинки з збереженої папки, або вибрати, за допомогою кнопки «виберіть файл», шлях до нашої папці, виділити все картинки і натиснути «відкрити».

Далі можна або перетягнути все картинки з збереженої папки, або вибрати, за допомогою кнопки «виберіть файл», шлях до нашої папці, виділити все картинки і натиснути «відкрити»

Після того, як картинки завантажені, ми можемо приступити до створення меню. Для цього, натискаємо на «редагувати», поруч зі свіжими новинами.

Для цього, натискаємо на «редагувати», поруч зі свіжими новинами

І тепер, можна додати код нашого меню. У моєму випадку, це буде виглядати так:

<Center> [[photo-48249652_297601976 | 130x46px; nopadding; | http: // посилання]] [[photo-48249652_297601975 | 129x46px; nopadding; | http: // посилання]] [[photo-48249652_297601974 | 129x46px; nopadding; | http: // посилання]] </ center>

Отже, давайте трохи докладніше розберемо, що тут до чого:

<Center> ... </ center> - дані теги вирівнюють наше меню по середині. Якщо їх прибрати, то меню притулиться до лівого краю.

[[...]] - власне, посилання пунктів меню.

photo-48249652_297601976 - шлях до нашої картинки. Шлях формується так: номер альбома_номер самої фотографії. Як дізнатися шлях до нашого зображення? Все дуже просто. Заходимо в фотоальбом, в якому знаходяться наші картинки і тиснемо на потрібне зображення. Потім, в адресному рядку ми побачимо повний шлях до нашого зображення.

130x46px; nopadding; - опції зображення: 130x46px; - ширина і висота нашої картинки (може відрізнятися від розміру самої картинки) - для вертикального меню вкоктакте необов'язково вказувати; nopadding; - ніяких прогалин - при використанні даної опції забираються всі прогалини (відступи) і зображення зливаються в одне.

http: // посилання - адреса сторінки, на яку посилається та чи інша картинка.

Ось що у мене вийшло:

Як зробити горизонтальне, графічне меню вконтакте?

Горизонтальне меню вконтакте, робиться тому ж принципу. Різниця тільки в тому, що при написанні коду, нові пункти меню не потрібно переносити на новий рядок. А також, не забуваємо, що при такому розташуванні картинок, ми можемо використовувати тільки 370 пікселів ширини. Я трохи поправив код показаний вище і ось, що в мене вийшло:

[[Photo-48249652_297601976 | 124x46px; nopadding; | http: // посилання]] [[photo-48249652_297601975 | 123x46px; nopadding; | http: // посилання]] [[photo-48249652_297601974 | 123x46px; nopadding; | http: / /посилання]]

А ось так це виглядає:

І ще хотілося б додати: Бувають ситуації коли, нам необхідно вставити картинку в меню, але вона не повинна бути посиланням. Вона повинна виконувати роль прикраси. Для цього, досить використовувати опцію «nolink». Ось наочний приклад: Те ж горизонтальне меню, тільки перша кнопка не є активним посиланням, а є простою картинкою.

[[Photo-48249652_297601976 | 124x46px; nopadding; nolink; | ]] [[Photo-48249652_297601975 | 123x46px; nopadding; | http: // посилання]] [[photo-48249652_297601974 | 123x46px; nopadding; | http: // посилання]]

Ну ось в принципі і все. Як ви можете помітити, зробити графічне меню вконтакте не складно, найголовніше його намалювати. Ну ось в принципі і все А потім, використовуючи всі отримані знання в цій статті, ви зможете зробити краще меню, для своєї групи вконтакте. І хочу зауважити, що горизонтальне і вертикальне меню можна комбінувати, тим самим домогтися абсолютної унікальності.

Тепер будь-які маніпуляції в групах Вконтакте (меню, навігація, пагінація, новини і т.д.), буде виконати набагато простіше, для цього достатньо вивчити мій відеокурси з технічних секретів груп Вконтакте. Ви просили відео уроки, а я записав цілий відеокурс - забирайте !!!

Вдалих експериментів!

З чого почати?
Як створити вертикальне, графічне меню вконтакте?
Як зробити горизонтальне, графічне меню вконтакте?
З чого почати?
Відразу почну з того, що у нас вже є відповідна графіка, але що робити далі не зрозуміло?
Для чого це потрібно?
Як створити вертикальне, графічне меню вконтакте?
Як дізнатися шлях до нашого зображення?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью