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

Оформлення вконтакте. Як створити і встановити графічне меню.

  1. Крок 1. Як створити меню в контакті і зробити вкладені сторінки:
  2. Крок 2. Як створити гарне графічне меню в контакті і поставити його:

Рада, що ви читаєте мою фрілочку ! Рада, що ви читаєте мою   фрілочку Сьогодні я продовжу свій пост-серіал «Занурення в групи ВК». У третій частині «серіалу», я розповідала і показувала, як створити меню групи в контакті . Сьогодні ж, поговоримо про оформлення меню групи вконтакте!

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

Питання 1: Перший і найпоширеніший: «де код в меню?» Або «якщо немає закладки при редагуванні« Вихідний код »як додати внутрішню сторінку?» Або «Я все одно не розумію, що зробити, якщо не з'являється код!»

Відповідь 1: ВК змінив редактор, тепер для перемикання між візуальним редактором і кодом всього один клік (правий верхній кут редактора):

Що б перевірити в якому ви редакторі: підведіть мишкою на цю кнопку, напишіть який-небудь текст і виділіть його жирним - якщо з'являються не звичайні символи, значить - це код

Питання 2: Другий, реально проблематичний: «а як прибрати пробіли між картинками ?? »

Відповідь 2: Визнаю, сама злякалася, коли вперше у клієнта «поїхала» менюшка. Зараз я це швидко правлю, а тоді було не весело. дивіться:

дивіться:

Додай тег nopadding; і все стане на свої місця!

Між картинками вкрадається простір і меню виглядає битим. Для необізнаних, може це і не нормально, а для SMM фахівця , Це як мінімум непрофесійно. Так в чому ж тут справа? А, все дуже просто! У ВК постійно відбуваються якісь оновлення, вводяться нові алгоритми ... та ще й редактор кривуватий ... буває ні з того, ні з сього з коду випадають важливі теги і тоді ми бачимо таку картину. Що б виправити це, потрібно заглянути в код і внести необхідні корективи. Формат коду, повинен бути ось таким:

Шаблон: [[photoціфри_ціфри | шірінаxвисотаpx; nopadding; | посилання на внутрішню сторінку]] Приклад: [[photo7632142_296911703 | 370x45px; nopadding; | page-32734125_44298120]]

Зазвичай картинки меню розсуваються тому, що з коду випадає nopadding; - вставляємо його на місце і все вирівнюється. Перед тим як зберігати результат, тисніть на кнопку «Предпросмотр», що б переконатися в тому, що все рівно стало.

Питання 3: Новина. У жовтні 2012р., В примусовому порядку, Вконтакте обрізав автара груп та паблік. Тепер їх розмір має загальний стандарт 200х500 пікселів. Так, що якщо у вас в групі аватар був більше, то зробіть апдейт (поновіть аватар).

До речі, вшити з обрізанням, ВК ввів ще одне нововведення щодо фотографій груп: тепер клікнувши на аватар, ми так само як в акаунті, зможемо побачити всі альбоми спільноти. Це зручно! І з цього малюється новий функціонал в комунікаціях групи.

Та-а-ак, з питаннями закінчили ... тепер переходимо до самого створення меню!

Крок 1. Як створити меню в контакті і зробити вкладені сторінки:

Насамперед переконаємося в тому, що ви знаєте, як створити меню групи в контакті і пробіжить по невеликій інструкції:

Ось така шпаргалка у мене вийшла! Ось така шпаргалка у мене вийшла Для більшої ясності, розпишу кожну цифру:

  1. Управління співтовариством. Переходимо в налаштування групи.
  2. Включаємо матеріали. Зберігаємо зміни (якщо ще не включили).
  3. Тепер на головній сторінки групи, з'явилася додаткова вкладка «Новини групи». Наведемо мишкою в правий кут, натиснемо на стрілку «Редагувати».
  4. Змінимо назву вкладки. Тут буде у нас меню, тому напишемо, щось відповідне і привертає.
  5. Ця кнопочки перемикання між візуальним редактором і кодом. Ми будемо робити все роботи з кодом wiki розмітки, тому перейдіть саме в цей режим.
  6. Створимо внутрішні, вкладені сторінки. Для цього визначимося зі списком меню, кожне слово меню, візьмемо в подвійні квадратні лапки - [[слово]].
  7. Натиснемо кнопку «Предпросмотр».
  8. Слова стануть посиланнями!
  9. Збережемо результат. Не перемикайтеся в інший режим, поки не зберегли результат. До речі, рекомендую періодично зберігати код меню до себе на комп'ютер.
  10. Відступ. Доступ до сторінки. Для відкритих груп, ця функція більше не працює.
  11. Тепер заповнимо вкладені сторінки контентом. Відкриємо посилання меню в новому вікні. Переконаємося, що ми потрапили саме на ту сторінку. Додавши потрібну нам слово в квадратні лапки, ми вже дали вкладеної сторінці назву.
  12. Наповнимо змістом цю сторінку. Тут можна додати як звичайний текст, так і нові вкладені сторінки, що веде відвідувача вглиб міні сайту. У будь-якому випадку, вибір за вами!
  13. Додавши потрібний контент на сторінку, збережемо результат.
  14. Тепер нам потрібно, прописати адресу цієї сторінки. Інакше, якщо цього не зробити, в адресі сторінки будуть кракозябрікі і в якийсь момент, ви можете втратити всі свої вкладені сторінки. Для цього копіюємо підкреслені цифри - від слеша до знаку ...
  15. ... і несемо цю адресу сторінки в наше меню! Пам'ятайте, воно відкрито у вас в сусідній вкладці ?! Вставляємо адресу в потрібне місце.

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

Є! Меню створили, внутрішні сторінки зробили, заповнили їх, тепер перейдемо до створення красивого графічного меню. Є

Крок 2. Як створити гарне графічне меню в контакті і поставити його:

Всю теорію про те, як влаштована wiki розмітка в контакті, я вам давати не буду, у нас зараз інші цілі. Для створення візуального меню в групі ВК, всієї вікі-розмітки знати не потрібно. Перейдемо до створення візуального меню!

Для початку покажу вам код і результат свого меню:

Для початку покажу вам код і результат свого меню:

Зізнаюся, я його зробила спеціально, що б написати цю статтю. Всі «руки не доходили», знаєте, як «швець без чобіт». Але тепер і я з візуальним меню в групі ВК! Зізнаюся, я його зробила спеціально, що б написати цю статтю

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

Я покажу вам середній за складністю варіант установки меню. Різниця в кількості елементів. Меню, яке розрізається просто на смужки, є найпростішим його виконанням. Чим більше клікабельних кнопок в рядку, тим складніше його виконання. Хоча, знаючи особливість, все просто! Справа лише в часі. Отже, ширина картинки повинна бути:

- 370 px - якщо в рядку у вас буде два і більше об'єктів, як у мене кнопочки соціальних мереж

- і max 388 px - якщо розрізаємо картинку по-простому, тільки на рядки, не розділяючи на дрібні об'єкти. Ось це та особливість, яку потрібно знати, при нарізанні меню на кнопки. У мене розмір картинки за все меню вийшов 370х456 px.

Після того як картинка розрізана на потрібну кількість об'єктів і збережена в окремий альбом, завантажуємо цей альбом в ВК. Завантажуємо в профіль аккаунта, а не в групу! Так як в альбомах групи більше немає можливості приховувати альбоми. Технічних альбом в корпоративної (наприклад) групі, зовсім не потрібен, тому ховаємо елементи меню в альбом аккаунта:

Технічних альбом в корпоративної (наприклад) групі, зовсім не потрібен, тому ховаємо елементи меню в альбом аккаунта:

Технічний альбом ВК

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

[[Photo7632142_296911699 | 370x101px; nopadding; | http: //frilka.com]]

де, photo7632142_296911699 - це адреса картинки! Його ми дивимося в адресному рядку картинки:

З першої картинки, почнемо вставляти меню в групу вконтакте

Вам потрібен короткий адресу картинки, для цього перейдіть в сам альбом:

Перейдіть в сам альбом, що б отримати потрібну адресу картинки!

... і починаючи з першої картинки, переносите їх в меню групи.

Далі, йде розділова риса «|» і розмір картинки 370x101px; - що б його дізнатися, треба відкрити альбом на комп'ютері, виділити потрібну картинку і подивитися якого вона розміру:

Далі, йде розділова риса «|» і розмір картинки 370x101px;  - що б його дізнатися, треба відкрити альбом на комп'ютері, виділити потрібну картинку і подивитися якого вона розміру:

Додаємо розмір картинки в код меню!

Отже, адреса картинки додали, розмір вказали, тепер ставимо, тег nopadding; - він потрібен для того, що б наші картинки щільно прилягали один до одного. І останнім етапом ставимо ссилочку на сторінку, куди потраплятиме відвідувач, після того як клацне на картинку.

Тут невелике уточнення! Зовнішні посилання, посилання на альбоми ВК і обговорення пишемо повністю, а посилання на внутрішні сторінки в форматі page-32734125_44298120. На початку і наприкінці рядка, не забуваємо ставити по дві квадратні лапки і без пробілів.

Уточнення 2: коли ми посилаємося на внутрішні сторінки без картинок, то для обговорень, альбомів і зовнішніх посилань ставимо одинарні квадратні лапки.

Рядки, в яких у вас два і більше елементів, в код вставляємо без пробілів. Вставляйте кожен рядок картинки один за одним. Тому, що якщо ви натиснете Enter після рядка з картинкою, то картинка перестрибне на новий рядок і меню зрушиться. Нам потрібно, що б меню відображалося цільним, тому ніяких зайвих прогалин і «іртеров» нам не треба! Рядки, в яких у вас два і більше елементів, в код вставляємо без пробілів

Після того як ви перенесли всі картинки в меню і оформили їх (розмір, посилання), зберігаємо результат і милуємося своєю роботою! Усе! Готово!

Буду рада, якщо я змогла вам донести інформацію. Розкажіть, як у вас вийшло з установкою меню! Чи відповіла я на ваші запитання чи ні? Може хто, що хоче додати? Буду рада спілкуванню в коментарях. Буду рада, якщо я змогла вам донести інформацію

---

Читайте Пост-Серіал «Занурення в групи ВК»:

З повагою і Любов'ю, Марина Лазарєва ! З повагою і Любов'ю,   Марина Лазарєва

Схожі записи:

Так в чому ж тут справа?
Пам'ятайте, воно відкрито у вас в сусідній вкладці ?
Чи відповіла я на ваші запитання чи ні?
Може хто, що хоче додати?


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

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

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

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

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

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

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

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

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

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