Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Стена сообщества/юзера от Vk.com [Все движки]

Предыдущая тема Следующая тема Перейти вниз

Стена сообщества/юзера от Vk.com [Все движки]

Сообщение автор Сказочник Зазеркалья в Чт 18 Апр - 17:18

Всем приветик. girl_yes

Написала новый туториал, который содержит в себе инструкцию по установке на отдельную страничку Htlm, новостей из группы/профиля вконтакте. В общем туториал маленький, но всё же содержит полезную информацию. Первый вариант это создание стены сообщества, на которой будут все новости и старые материалы группы вконтакте. Чем это полезно ? Ну например на стене можно будет разметить пачку аудио треков, и юзеры зайдя на отдельную страничку где находиться эта самая стена ,смогут послушать эти треки. Также с видео роликами, новостями, картинками и т.д. Второй вариант это размещение на такой же отдельной Htlm - странице, новостей определённого пользователя. К примеру вы Администратор форума, и несколько дней не можете зайти на свой форум, ну всякое бывает : "Глюки с интернетом", "трафик кушает сильно", и т.д. Но при этом продолжаете сидеть VK и чтобы юзеры лишний раз не "волновались", вы можете написать на своей стене объявление которое увидят все юзеры зайдя на страничку с новостями от вас. В общем целей использования данного улучшения много, нужно просто немного поработать и тогда всё получиться. Ниже приведена инструкция по установке на свой форум подобного виджета с новостями и прочими штуками:











Этап первый - Создание виджета.

Для создания виджеты новостей от Вконтакте, идём сюда:

http://vk.com/developers.php?oid=-1&p=Groups


Далее начинаем настройку виджета:

№1 - Вбиваете ссылку на вашу группу вконтакте или профиль в соответствующее поле.

№2 - Настраиваете вид: Новости - Расширенный режим.

№3 - Настраиваете Высоту и Ширину блока, желательно использовать 900 ширины и 1000 высоты.




После настройки получаем код для вставки на свой форум. На этом завершается первый этап, можно переходить ко второму этапу. Exclamation









Этап второй - Создание 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>


Вместо слов в коде "Здесь должен быть ваш код виджета сообщества!", вы должны поставить свой код виджета сообщества. Но ставить в обычном виде будет неправильно, поэтому перейдём сначала к третьему шагу, а затем вернёмся ко второму.

Внимание: Фоновое изображение вы можете изменить на своё, просто заменив ссылку на своё изображение в нижней части кода. Arrow










Этап третий - Настройка кода для вставки.

В этом шаге, я подробно объясню как правильно нужно оформить код, чтобы можно было настроить его положение и внешний стиль. Берём такой "контейнер:

Код:
<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>


Красным выделен код виджета сообщества, который вам нужно будет обязательно заменить на свой. biggrin

Теперь когда у вас есть готовый код, можно вернуться ко второму шагу и встроить код в середину страницы, тем самым вы добьётесь отображения виджета на странице. Но это ещё не всё, так как теперь предстоит красиво и во вкусом оформить виджет. Переходим в четвёртому этапу настройки данного туториала. 12










Этап четвёртый - Настройка через коды 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(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; - Отвечает за ширину блока. Если хотите, можете указать в цифрах, к примеру так 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>

Изображения и ссылку замените на свои. Arrow





№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>

Красным выделены дивы, для нужной функции. Т.е как вы видите код для вставки, лежит внутри этого контейнера. Idea

Теперь в Каскадную таблицу стилей ставим этот код:

Код:
/*прозрачность на кнопках*/
.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);
}

Параметры в коде можно менять, т.е делать задержку проявления или наоборот увеличить проявление. Exclamation







Советы.

№1 - Также хочу посоветовать использовать в качестве улучшения странички парочку улучшений: Иконки png, фоновый звук, дождь/снег/листья/ветер, и другие улучшения и скрипты, которые могут красиво украсить страницу.

№2 - Ссылку на подобную страницу лучше давать в видном месте, например в меню навигации или в боковой картинки на главной.




Желаю всем удачи в улучшении и продвижении ваших форумов. До встречи в новых туториалах. drinks



С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.

Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3549
Возраст : 25
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения