![Стена сообщества/юзера от Vk.com [Все движки] Fdf10](https://i.servimg.com/u/f39/18/45/41/65/fdf10.png)
Навигатор по ПА
ФорумСтена сообщества/юзера от Vk.com [Все движки]
Страница 1 из 1
![Стена сообщества/юзера от Vk.com [Все движки] Empty](https://illiweb.com/empty.gif)
Стена сообщества/юзера от Vk.com [Все движки]
автор Сказочник Зазеркалья Чт 18 Апр - 17:18
Всем приветик. 
Написала новый туториал, который содержит в себе инструкцию по установке на отдельную страничку Htlm, новостей из группы/профиля вконтакте. В общем туториал маленький, но всё же содержит полезную информацию. Первый вариант это создание стены сообщества, на которой будут все новости и старые материалы группы вконтакте. Чем это полезно ? Ну например на стене можно будет разметить пачку аудио треков, и юзеры зайдя на отдельную страничку где находиться эта самая стена ,смогут послушать эти треки. Также с видео роликами, новостями, картинками и т.д. Второй вариант это размещение на такой же отдельной Htlm - странице, новостей определённого пользователя. К примеру вы Администратор форума, и несколько дней не можете зайти на свой форум, ну всякое бывает : "Глюки с интернетом", "трафик кушает сильно", и т.д. Но при этом продолжаете сидеть VK и чтобы юзеры лишний раз не "волновались", вы можете написать на своей стене объявление которое увидят все юзеры зайдя на страничку с новостями от вас. В общем целей использования данного улучшения много, нужно просто немного поработать и тогда всё получиться. Ниже приведена инструкция по установке на свой форум подобного виджета с новостями и прочими штуками:
![Стена сообщества/юзера от Vk.com [Все движки] 3390665m](http://savepic.org/3390665m.jpg)
![Стена сообщества/юзера от Vk.com [Все движки] 3253396](http://savepic.org/3253396.png)
Этап первый - Создание виджета.
Для создания виджеты новостей от Вконтакте, идём сюда:
http://vk.com/developers.php?oid=-1&p=Groups
Далее начинаем настройку виджета:
№1 - Вбиваете ссылку на вашу группу вконтакте или профиль в соответствующее поле.
№2 - Настраиваете вид: Новости - Расширенный режим.
№3 - Настраиваете Высоту и Ширину блока, желательно использовать 900 ширины и 1000 высоты.
![Стена сообщества/юзера от Vk.com [Все движки] 3402927m](http://savepic.org/3402927m.jpg)
После настройки получаем код для вставки на свой форум. На этом завершается первый этап, можно переходить ко второму этапу.
Этап второй - Создание Htlm страницы.
Теперь выполняем главную часть данного туториала. Это создание страницы и последовательная встройка кода в саму страницу, переходим к созданию новой Htlm странички, которую позже можно будет всячески украсить:
Панель Администратора - Модули - HTML & JAVASCRIPT - Управление страницами HTML.
Создаём новую страницу с такими параметрами:
Название * : К примеру Стена сообщества.
Вы хотите использовать верх и низ вашего форума? : Нет.
Использовать эту страницу в качестве Главной? : Нет.
В содержимое страницы, вставляем этот код:
Вместо слов в коде "Здесь должен быть ваш код виджета сообщества!", вы должны поставить свой код виджета сообщества. Но ставить в обычном виде будет неправильно, поэтому перейдём сначала к третьему шагу, а затем вернёмся ко второму.
Внимание: Фоновое изображение вы можете изменить на своё, просто заменив ссылку на своё изображение в нижней части кода.
Этап третий - Настройка кода для вставки.
В этом шаге, я подробно объясню как правильно нужно оформить код, чтобы можно было настроить его положение и внешний стиль. Берём такой "контейнер:
И встраиваем внутрь него, дополнительный "контейнер", который позволит вам позже настроить рамку и внутренний фон вокруг виджета:
Далее в готовый код вставляем код виджета сообщества. В моём готовом виде это будет выглядеть так:
Красным выделен код виджета сообщества, который вам нужно будет обязательно заменить на свой.
Теперь когда у вас есть готовый код, можно вернуться ко второму шагу и встроить код в середину страницы, тем самым вы добьётесь отображения виджета на странице. Но это ещё не всё, так как теперь предстоит красиво и во вкусом оформить виджет. Переходим в четвёртому этапу настройки данного туториала.
Этап четвёртый - Настройка через коды CCS.
Теперь вам нужно красиво украсить виджет, что собственно говоря дело простое. Благодаря второму контейнеру, мы может настроить рамку, фон, размер блока и т.д. чтобы красиво оформить виджет, топайте сюда:
Панель Администратора - Оформление - Картинки и цвета - Цвета - Каскадная таблице стилей CCS.
В CCS ставим ниже приведённые коды:
Которые можно дополнить и другими настройками. Но так как вам понадобиться гибкая настройка этих самых кодов, я прилагаю инструкцию по их изменению:
background-image: url(https://i.servimg.com/u/f70/17/66/77/30/66180312.gif)!important; - Внутренний фон рамки, т.е подложка под виджет. Мою ссылку изображения можете заменить на своё изображение.
-moz-border-radius: 10px;
-khtml-border-radius: 10px; - Эти три строки отвечают за закругления углов рамки.
-webkit-border-radius: 10px;
border-radius:7px;
border: 6px double #FFFF00; - Этот параметр отвечает за толщину и цвет рамки.
padding: 4px ;
margin: 4px 0px 4px 0px;
width: auto; !important; - Отвечает за ширину блока. Если хотите, можете указать в цифрах, к примеру так 900px вместо auto.
height:auto; !important; - Отвечает за высоту блока. Если хотите, можете указать в цифрах, к примеру так 1000px вместо auto.
Дополнения.
Ну и завершение по данному туториалу, хочу предложить форумчанам две фишки по улучшению данного виджета. Ниже приведена мини инструкция:
№1 - Отгибающийся уголок на странице:
Ставим данный код над виджетом "сообщества":
Изображения и ссылку замените на свои.
№2 - Проявление под курсором:
Для начала, оберните готовый и полный код для вставки с контейнерами, в такие дивы:
В готовим виде должно выглядеть так:
Красным выделены дивы, для нужной функции. Т.е как вы видите код для вставки, лежит внутри этого контейнера.
Теперь в Каскадную таблицу стилей ставим этот код:
Параметры в коде можно менять, т.е делать задержку проявления или наоборот увеличить проявление.
Советы.
№1 - Также хочу посоветовать использовать в качестве улучшения странички парочку улучшений: Иконки png, фоновый звук, дождь/снег/листья/ветер, и другие улучшения и скрипты, которые могут красиво украсить страницу.
№2 - Ссылку на подобную страницу лучше давать в видном месте, например в меню навигации или в боковой картинки на главной.
Желаю всем удачи в улучшении и продвижении ваших форумов. До встречи в новых туториалах.
С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.![Стена сообщества/юзера от Vk.com [Все движки] 3224725](http://savepic.org/3224725.png)
Написала новый туториал, который содержит в себе инструкцию по установке на отдельную страничку Htlm, новостей из группы/профиля вконтакте. В общем туториал маленький, но всё же содержит полезную информацию. Первый вариант это создание стены сообщества, на которой будут все новости и старые материалы группы вконтакте. Чем это полезно ? Ну например на стене можно будет разметить пачку аудио треков, и юзеры зайдя на отдельную страничку где находиться эта самая стена ,смогут послушать эти треки. Также с видео роликами, новостями, картинками и т.д. Второй вариант это размещение на такой же отдельной Htlm - странице, новостей определённого пользователя. К примеру вы Администратор форума, и несколько дней не можете зайти на свой форум, ну всякое бывает : "Глюки с интернетом", "трафик кушает сильно", и т.д. Но при этом продолжаете сидеть VK и чтобы юзеры лишний раз не "волновались", вы можете написать на своей стене объявление которое увидят все юзеры зайдя на страничку с новостями от вас. В общем целей использования данного улучшения много, нужно просто немного поработать и тогда всё получиться. Ниже приведена инструкция по установке на свой форум подобного виджета с новостями и прочими штуками:
Этап первый - Создание виджета.Для создания виджеты новостей от Вконтакте, идём сюда:
http://vk.com/developers.php?oid=-1&p=Groups
Далее начинаем настройку виджета:
№1 - Вбиваете ссылку на вашу группу вконтакте или профиль в соответствующее поле.
№2 - Настраиваете вид: Новости - Расширенный режим.
№3 - Настраиваете Высоту и Ширину блока, желательно использовать 900 ширины и 1000 высоты.
После настройки получаем код для вставки на свой форум. На этом завершается первый этап, можно переходить ко второму этапу.
Этап второй - Создание Htlm страницы.Теперь выполняем главную часть данного туториала. Это создание страницы и последовательная встройка кода в саму страницу, переходим к созданию новой Htlm странички, которую позже можно будет всячески украсить:
Панель Администратора - Модули - HTML & JAVASCRIPT - Управление страницами HTML.
Создаём новую страницу с такими параметрами:
Название * : К примеру Стена сообщества.
Вы хотите использовать верх и низ вашего форума? : Нет.
Использовать эту страницу в качестве Главной? : Нет.
В содержимое страницы, вставляем этот код:
- Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/38-ltr.css" type="text/css">
</head>
<body><div class="regulations">
<br/>
Здесь должен быть ваш код виджета сообщества!
<style>
body {
background: url(http://www.snapsnap.ru/i/ibackground.png); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}
</style>
</body>
</html>
Вместо слов в коде "Здесь должен быть ваш код виджета сообщества!", вы должны поставить свой код виджета сообщества. Но ставить в обычном виде будет неправильно, поэтому перейдём сначала к третьему шагу, а затем вернёмся ко второму.
Внимание: Фоновое изображение вы можете изменить на своё, просто заменив ссылку на своё изображение в нижней части кода.
Этап третий - Настройка кода для вставки.В этом шаге, я подробно объясню как правильно нужно оформить код, чтобы можно было настроить его положение и внешний стиль. Берём такой "контейнер:
- Код:
<div style="position:fixed; left:550px; bottom: 20%;">
</div>
И встраиваем внутрь него, дополнительный "контейнер", который позволит вам позже настроить рамку и внутренний фон вокруг виджета:
- Код:
<div class="phoenix"> </div>
Далее в готовый код вставляем код виджета сообщества. В моём готовом виде это будет выглядеть так:
<div style="position:fixed; left:550px; bottom: 20%;">
<div class="phoenix"><script type="text/javascript" src="//vk.com/js/api/openapi.js?88"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "800", height: "1000"}, -184108189);
</script></div>
</div>
Красным выделен код виджета сообщества, который вам нужно будет обязательно заменить на свой.
Теперь когда у вас есть готовый код, можно вернуться ко второму шагу и встроить код в середину страницы, тем самым вы добьётесь отображения виджета на странице. Но это ещё не всё, так как теперь предстоит красиво и во вкусом оформить виджет. Переходим в четвёртому этапу настройки данного туториала.
Этап четвёртый - Настройка через коды CCS.Теперь вам нужно красиво украсить виджет, что собственно говоря дело простое. Благодаря второму контейнеру, мы может настроить рамку, фон, размер блока и т.д. чтобы красиво оформить виджет, топайте сюда:
Панель Администратора - Оформление - Картинки и цвета - Цвета - Каскадная таблице стилей CCS.
В CCS ставим ниже приведённые коды:
- Код:
.phoenix {
background-image: url(http://i70.servimg.com/u/f70/17/66/77/30/66180312.gif)!important;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:7px;
border: 6px double #FFFF00;
padding: 4px ;
margin: 4px 0px 4px 0px;
width: auto; !important;
height:auto; !important;
}
Которые можно дополнить и другими настройками. Но так как вам понадобиться гибкая настройка этих самых кодов, я прилагаю инструкцию по их изменению:
background-image: url(https://i.servimg.com/u/f70/17/66/77/30/66180312.gif)!important; - Внутренний фон рамки, т.е подложка под виджет. Мою ссылку изображения можете заменить на своё изображение.
-moz-border-radius: 10px;
-khtml-border-radius: 10px; - Эти три строки отвечают за закругления углов рамки.
-webkit-border-radius: 10px;
border-radius:7px;
border: 6px double #FFFF00; - Этот параметр отвечает за толщину и цвет рамки.
padding: 4px ;
margin: 4px 0px 4px 0px;
width: auto; !important; - Отвечает за ширину блока. Если хотите, можете указать в цифрах, к примеру так 900px вместо auto.
height:auto; !important; - Отвечает за высоту блока. Если хотите, можете указать в цифрах, к примеру так 1000px вместо auto.
Дополнения.Ну и завершение по данному туториалу, хочу предложить форумчанам две фишки по улучшению данного виджета. Ниже приведена мини инструкция:
№1 - Отгибающийся уголок на странице:
Ставим данный код над виджетом "сообщества":
- Код:
<script type="text/javascript">
esel_small = 'http://i12.servimg.com/u/f12/17/66/77/30/snap_270.jpg';
esel_big = 'http://i12.servimg.com/u/f12/17/66/77/30/snap_270.jpg';
esel_url = 'Ссылка на нужную вам страницу';
esel_s = 'http://szenprogs.ru/flash/esel_s.swf';
esel_b = 'http://szenprogs.ru/flash/esel_b.swf';
</script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/esel.js"></script>
Изображения и ссылку замените на свои.
№2 - Проявление под курсором:
Для начала, оберните готовый и полный код для вставки с контейнерами, в такие дивы:
- Код:
<div class="kontra"> </div>
В готовим виде должно выглядеть так:
<div class="kontra"><div style="position:fixed; left:1300px; bottom: 20%;"><div class="phoenix"><script type="text/javascript" src="//vk.com/js/api/openapi.js?88"></script>
<!-- VK Widget --><div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "500", height: "1000"}, -184108189);
</script></div>
</div></div>
Красным выделены дивы, для нужной функции. Т.е как вы видите код для вставки, лежит внутри этого контейнера.
Теперь в Каскадную таблицу стилей ставим этот код:
- Код:
/*прозрачность на кнопках*/
.kontra {
opacity: 0.5;
transition: opacity 0.15s ease-out 0.3s;
-moz-transition: opacity 0.15s ease-out 0.3s;
-webkit-transition: opacity 0.15s ease-out 0.3s;
}
.kontra:hover{
opacity: 1.0;
filter:alpha(opacity=100);
}
Параметры в коде можно менять, т.е делать задержку проявления или наоборот увеличить проявление.
Советы.№1 - Также хочу посоветовать использовать в качестве улучшения странички парочку улучшений: Иконки png, фоновый звук, дождь/снег/листья/ветер, и другие улучшения и скрипты, которые могут красиво украсить страницу.
№2 - Ссылку на подобную страницу лучше давать в видном месте, например в меню навигации или в боковой картинки на главной.
Желаю всем удачи в улучшении и продвижении ваших форумов. До встречи в новых туториалах.
С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.
Сказочник Зазеркалья- Дизайнер
-
Сообщения : 3537
Возраст : 29
Место обитания : Земля Обетованная...
Настроение :![Стена сообщества/юзера от Vk.com [Все движки] 5503931m](http://savepic.net/5503931m.png)
Регистрация : 2012-11-16
Благодарности : 648
-
Похожие темыСтраница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения|
|
|