Архив тега: Уроки

Комментарии ВКонтакте на сайт

Привет всем читателям. Особенный привет блоггерам и тем, у кого имеются свои сайты. Всем нам хочется иметь как можно больше посетителей на свои сайты. Не будем вдаваться в подробности для чего это нам нужно. Я думаю и так все все понимают. Расскажу вам о том, как установить комментарии к себе на сайт из популярной социальной сети Вконтакте и тем самым увеличить трафик. Возможно даже в разы. В зависимости от тематики вашего сайта. Кнопки социальных сетей яндекс тоже помогают увеличить трафик.

Итак, если вы уже зарегистрированы ВКонтакте, то переходим на одну из страниц для разработчиков — виджет для комментариев. Можете прочитать несколько пунктов о преимуществе виджета для комментариев ВКонтакте. Затем переходим к основному полю настройки самого виджета. Выбираем пункт Подключить новый сайт. Заполняем название и адрес сайта. Выбираем количество комментариев, которое хотим видеть на странице. Включаем (по желанию) расширенные комментарии. Устанавливаем необходимую ширину.виджет комментариев вконтакте для сайта В итоге получился код, разбитый на 2 части. Первую часть нужно вставит в ваш исходный код перед закрывающим тегом head.

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
  VK.init({apiId: 2226638, onlyWidgets: true});
</script>

В WordPress это файл header.php.

Вторую часть вставляем (если WordPress) в comments.php в начало файла во вторую строчку.

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "460", attach: "*"});
</script>

Если у вас статичный сайт на html, то эту часть кода вставляете в то место, где хотите видеть комментарии.

Вот и все. Теперь авторизованные пользователи социальной сети смогут оставлять комментарии на вашем сайте не заполняя никаких полей. Также, при условии, что материал, который вы разместили понравится кому-нибудь, он сможет разместить его на своей странице Вконтакте. Это позволит привлечь новых посеителей.

Популярность: 5% [?]

Страница, динамично меняющая цвет фона. Видео

Всем привет. Сегодня поговорим об интересном эффекте для интернет страницы при помощи JavaScript. Страница плавно переливается всеми цветами радуги. Можно использовать в качестве поздравительной страницы и добавить в нее картинок. Или же применить это эффект на своем сайте, например в честь какого-нибудь праздника. Или же просто поэкспериментировать, чтобы понять, что и как работает. Понять принцип, так сказать. Для того, чтобы добиться такого эффекта нужно подключить к странице всего один системный JavaScript файл, в котором  совсем немного кода. Посмотрите демо странички, которую я сделал. Чтобы совсем не было пусто, я добавил в нее пару картинок.

Посмотреть демо

В видео я показываю как встроить данный эффект в  существующий сайт или блог.


Популярность: 14% [?]

Красивая форма подписки для Smartresponder

Всем привет. Сегодня речь пойдет о формах подписки для Smartresponder и о том, как их делать. К сожалению на сайте сервиса Smartresponder формы подписки, которые предлагаются, имеют не очень красивый вид и порой портят весь дизайн на сайте. Но, как всегда, есть выход, который многим может прийтись по вкусу и цвету. Вот один из примеров форм:

Форма подписки

Если Вы владеете каким-нибудь графическим редактором, например фотошопом, то экспериментировать над дизайном формы можно сколько угодно. Если же нет таких навыков, то используйте готовые формы, скачав их в конце этой записи. В архиве представлено 4 варианта форм. Теперь давайте посмотрим, что нужно сделать, чтобы форма нормально функционировала. Во-первых нужно закачать картинки на сервер. Кнопка и блок с Формой отдельно в какую-нибудь папку. В коде формы, который прилагается, нужно прописать пути для картинок. Затем найти вот эти строчки:

<input name="tid" value="0000" type="hidden"/>
<input name="uid" value="00000" type="hidden"/>
<input name="did[]" value="00000" type="hidden"/>

И вписать вместо нолей — данные своей рассылки. Их можно посмотреть в коде стандартной формы на сайте Smartresponder.ru.  Форму можно вставлять как в сайдбар (боковую колонку), так и  в сами статьи.

Внимание!

На некоторых сайтах форма может отображаться некорректно. Это связано с тем, что сайты в основном имеют собственные таблицы стилей, поэтому могут в некоторых случаях конфликтовать с кодом формы. В таких случаях рекомендую использовать отдельную страницу подписки, как это сделано у меня. Кстати, сегодня для подписчиков выходит новая книга, спешите получить свой экземпляр здесь.

Пишите в комментариях у кого, что получилось.

Популярность: 40% [?]

Рисуем липкие стикеры в фотошопе

Привет всем, кто читает SerBlog.ru. Сегодня немного пофотошопим и узнаем, как нарисовать красивые стикеры в фотошопе. Стикеры могут понадобится для оформления своих сайтов.

Итак, в качестве примера создадим в фотошопе документ, можно стандартный web (640×480), разрешение 72рх на дюйм. Зальем фон цветом #3e3d3d. Далее создадим новый слой, выбираем инструмент Кисть белого цвета в форме круга. Размер кисти 50рх, жесткость 0. Посередине документа на новом слое нажимаем кистью один раз. Делаем прозрачность круга 60%. Применяет размытие по Гауссу 70рх. К фону добавляем шум. Вкладка: Фильтр — Шум — Добавить шум и выставляем значение 2% по Гауссу, монохромный. Можно еще применить наложение цвета, какой Вам больше нравится и сделать его прозрачность примерно 10%.Фон для стикеров

Итак, фон у нас готов. Теперь берем инструмент Прямоугольник и рисуем прямоугольную фигуру белого цвета. Копируем (Ctrl+J) фигуру и перемещаем копию ниже оригинала (перетащить мышкой слой копии). к копии слоя применяем наложение черного цвета. Затем выбираем инструмент Трансформирование или же просто нажимаем Ctrl+T. Зажимаем Ctrl и тянем правый нижний угол копии фигуры вниз на несколько пикселей и немного влево по диагонали. Выставляем прозрачность слоя 70% и применяем размытие по Гауссу 3рх. В принципе один стикер мы уже изготовили. Должно получиться примерно вот так:Липкие стикерыТеперь попробуем добавить немного эффектов для самого стикера. Для этого можно применить наложение узора и внутреннюю тень и выставить прозрачность на глаз. Вот, что должно примерно получится.Стикеры для сайта

Популярность: 46% [?]

Создание блога с нуля. Урок 5. Учимся пользоваться FTP-клиентом

Всем привет. Продолжаем рубрику по созданию блога с нуля и сегодня мы узнаем. что такое FTP-клиент и как им пользоваться. Начнем с того, что разберемся что такое FTP. Вы наверняка уже знаете, что мы просматриваем интернет страницы с помощью протокола HTTP. Это протокол передачи гипертекста. А FTP (File Transfer protocol) — протокол передачи файлов. Для работы с файловой системой на сервере необходима специальная программа или как еще называют — FTP-клиент или FTP-менеджер.

Существует множество FTP-клиентов как платных, так и бесплатных. Одним из лучших бесплатных FTP-клиентов является Filezilla. Именно им и будем пользоваться. Чтобы работать с файловой системой на сервере нужно сконнектиться с ним. Данные для доступа к FTP высылаются на E-Mail сразу после оплаты хостинга.

Открываем программу и во вкладке Файл — Менеджер сайтов заполняем данные из письма и жмем подключение.FTP-клиентПосле этого в правой половине программы будут отображаться все файлы на сервере, а слева — файловая система компьютера. Чтобы передать файл на сервер нужно выбрать папку, в которую надо залить файл, затем найти файл на компьютере и нажать на нем правой кнопкой мыши и в контекстном меню выбрать: Закачать на сервер.Окно FilezillaВот, собственно и все премудрости работы с FTP-клиентом. Скачать бесплатный FTP-клиент можно на сайте программы.

Конечно если нет никакого желания создавать сайты самостоятельно, всегда можно заказать разработку сайтов под ключ. Этим можно сэкономить время и нервы.

Популярность: 36% [?]