Меню Рубрики

Установка кнопок сайта ucoz

База знаний uCoz

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

В этой инструкции показано, как создать свою кнопку.

Обычная кнопка

В качестве обычной кнопки используются HTML теги input или button . Однако, для этих тегов нет атрибута href, который мог бы направить пользователя на другую страницу. Поэтому им часто добавляют атрибут onclick с указанием ссылки, по которой нужно перейти:

Выглядит это следующим образом:

Кнопка с фоновым изображением

Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:

Выглядит это следующим образом:

Чтобы получить такой результат, нужно сделать две вещи:

  1. Создать изображение кнопки. Самостоятельно или с помощью онлайн-сервисов (например, cooltext.com).
  2. Загрузить на сайт изображение и получить ссылку на него. Для этого можно воспользоваться файловым менеджером.

Кнопка на CSS

Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.

Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:

Тогда HTML-код самой кнопки будет следующим:

А на сайте кнопка отобразится так:

Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).

Ваша кнопка на других сайтах

В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:

Кнопка с фоновым изображением

Установка кнопки на сайт

Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:

Добавьте код кнопки в блок:

Добавьте поле с кодом, а также CSS, если требуется. Сохраните изменения внесенные в конструкторе.

источник

Установка кнопок сайта ucoz

Социальные кнопки позволяют связать ваш сайт с социальными сетями, такими, как Facebook, Вконтакте, Одноклассники, Twitter, Google+, Мой мир, LiveJournal.

Подобные кнопки могут быть двух видов:

Кнопки “Поделиться” . После нажатия на такую кнопку пользователь сможет отправить материал с вашего сайта в свой профиль. В запись будет помещена ссылка на ваш сайт, по которой смогут перейти друзья и подписчики пользователя

Кнопки “Like” . Такие кнопки служат социальным доказательством популярности вашего сайта. Когда пользователь видит количество “лайков” под вашими статьями, это повышает доверие к автору статьи

Создание набора кнопок

Когда вы решите, какие кнопки вам нужно, выберите их на странице https://usocial.pro нажав кнопку “Создать набор”:

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

Выберите социальные сети, кнопки которых собираетесь разместить на своем сайте. Просто перетащите их из области настроек в область предпросмотра:

Отметьте необходимые расположение, ориентацию, размер и способ размещения счетчика:

Статичное расположение позволит разместить кнопки в том месте сайта, в котором будет размещен их код. Все остальные способы размещения привяжут кнопку к определенному месту на экране, которое не будет меняться даже при прокрутке страницы.

Дополнительные настройки позволяют отредактировать вид кнопок с мобильных устройств:

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

Когда все будет готово, нажмите кнопку “Сохранить код” и вы увидите код, который нужно разместить на страницах своего сайта:

Установка кнопок на все страницы сайта

Можно быстро установить кнопки на все страницы сайта. Для этого перейдите в панель управления сайтом и выберите в меню Дизайн — Управление дизайном (шаблоны) — Нижняя часть сайта :

Для случаев с не статичным положением (указывается в настройках кнопок) достаточно разместить полученный код в любом месте шаблона, например так:

В случае, когда выбрано статическое расположение кнопок, необходимо подобрать для них оптимальное положение. При этом может быть использован шаблон верхней части сайта или боковой колонки. Можно использовать “Конструктор”:

Установка кнопок на страницу новости/статьи

Перейдите в панель управления сайтом и выберите в меню Дизайн — Управление дизайном (шаблоны) — Страница материалов и комментариев к нему :

Для случаев с не статичным положением (указывается в настройках кнопок) достаточно разместить полученный код в любом месте шаблона, например так:

В случае, когда выбрано статическое расположение кнопок, необходимо подобрать для них оптимальное положение. При этом ориентируйтесь на переменную $MESSAGE$ (или $DESCRIPTION$ для интернет магазина), которая выводит текст статьи. Обычно кнопки размещает недалеко от нее:

После этого не забудьте нажать кнопку “Сохранить” и обязательно проверить результат:

Подобные действия необходимо повторить для всех модулей, в которых предполагается вывод кнопок: “Новости”, “Каталог статей”, “Каталог файлов”, “Блог” и другие.

Читайте также:  Установка modx revolution пустая страница

источник

Установка кнопок сайта ucoz

В базе знаний есть новая инструкция по этой теме

Как сделать кнопку для сайта?
Желательно чтобы кнопка подходила под дизайн Вашего сайта, поэтому лучше её нарисовать в графическом редакторе (например, Фотошоп). Рассмотрим простой вариант: создаём изображение размером 88 на 31 пикселей. Делаем в два слоя (скриншот), на первом слое выполняем заливку цвета подходящего цветовой гамме Вашего сайта, а на втором слое делаем надпись (результат). Сохраняем (CTRL+S). Но что делать, если нам лень рисовать, или мы это не умеем делать вовсе?

Тогда воспользуемся готовыми кнопками (их можно найти и скачать в интернете) либо воспользуемся Интернет ресурсами по созданию кнопок для сайта. Рассмотрим зарубежный сервис «CoolText«, переходим на вкладку Logos и выбираем понравившийся логотип.

Экспериментируем с фоном и цветами текста. Выбираем понравившейся шрифт, выставляем нужный размер текста.
*Примечание: чем меньше размер текста, тем меньше размер нашей кнопки.

Если кнопка устраивает, нажимаем Render Logo (Отрисовка логотипа). На открывшейся странице жмём Download Image (Загрузить изображение) и скачиваем кнопку себе на ПК.

Теперь как загрузить кнопку на сайт? Для этого заходим к себе на сайт как администратор, переходим в файловой менеджер (Админ-бар » Управление » Файловой менеджер) и закачиваем кнопку в корневую папку сайта.

Как поставить кнопку к себе на сайт?
Нам понадобится следующий код:

Ну что-ж, ищем место для размещения нашей кнопки. Обычно размещают её в блоке «Друзья сайта» либо в отдельном блоке.

Рассмотрим вариант создания блока.
Включаем Конструктор, создаем блок (Админ-бар » Конструктор » Добавить блок + — скриншот). Называем блок, допустим: «Кнопка сайта», далее нажимаем Настроить (скриншот), переходим на вкладку HTML, вставляем код нашей кнопки и нажимаем Сохранить (Админ-бар » Конструктор » Сохранить изменения — скриншот)

Рассмотрим вариант вставки кнопки в блок «друзья сайта«.
Включаем Конструктор, нажимаем Настроить (скриншот), переходим на вкладку HTML и вставляем код нашей кнопки и нажимаем Сохранить (Админ-бар » Конструктор » Сохранить изменения — скриншот)

источник

Установка кнопок сайта ucoz

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

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

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

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

После можно спокойно выдохнуть и сказать что главная страница нашего сайта настроена.

К работе:

Давайте время не терять приступим кнопку добавлять )) Для этого нужно зайти в панель управления и нажать на главной странице модуль онлайн игры и управление категориями. Просто нам нужно скопировать ссылку на категорию стрелялки.

Откроется страница на которой собираются списки категорий, в нашем случае она пока одна. Нажмите на неё.

Откроется страница с данной категорией, в ней будет собран список с играми. На против каждой игры показано к какой категории данная игра относится. Так вот, нажмите на эту категорий правой кнопкой мышки и скопируйте адрес.

Всё теперь можно идти на главную страницу в панели, и нажимать управление дизайном.

Далее откроется страница на которой выберите верхняя часть сайта.

Откроется код в который установите перед тегом следующий код.

Сохраните документ. На главной странице должно получится вот так.

Css стили:

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

Откроется страница на которой в самом низу вставьте следующий css код

Разберём стили: Первая строчка в этом списке это backgorund. Это правило добавляет задний фон для нашей кнопке, в данном случае это картинка. Следующие правило border. Оно задаёт рамку для кнопке. Правило margin-left делает отступ слева в 117 пикселей. Color задаёт цвет для текста у кнопке, в моём случае это белый. display делает кнопку блоком. Следующие правило задаёт высоту нашей кнопке. line-height задаёт высоту строки для текста. И свойство padding делает внутренний отступ у конке, для того что бы вокруг текста было пространство.

Читайте также:  Установка переключателя света на волге

Не забудьте сохранить документ.

Вот и всё кнопку добавили. Конечно схема не усовершенствована, следующею кнопку уже просто не добавишь, придётся менять стили. Для этого кнопку придётся отодвигать при помощи правила margin-left. Будут вопросы задавайте в комментариях. Пока!

источник

Установка кнопок сайта ucoz

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

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

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

В общем сегодня я покажу как установить социальные кнопки на сайт ucoz, а так-же поменяем названия у просмотров и у вывода даты, ну и у того кто добавил игру. Снесём код который выводит количество комментариев от стандартной формы, а на его место вставим социальные кнопки.

Для начало давайте пройдём в раздел материал и комментарий к нему , найдём код который отвечает за вывод просмотров, автора игры и даты, и поменяем эти странные слова на наши русские.

Сейчас у нас за место просмотров слово View, за место имени кто добавил игру слово Added by, а за место слова дата, английское слово Data. Вот мы их и изменим.

Зайдите в следующий раздел в панели, Дизайн и управление дизайном .

На следующей странице в разделе онлайн игры выберите строчку:

Как обычно откроется страница с кодом. В коде нужно отыскать 34 строчку на которой как раз и будет то что мы ищем. У вас это может быть другая строчка, ориентируйтесь по коду.

Все слова которые я отметил стрелочками я поменяю на Просмотры, На Добавил, и на Дата. После сохраню документ.

Давайте посмотрим что получилось на сайте.

Всё работает так как я и задумал. Следующим шагом снесём слово Comments 0, которое вы можете наблюдать в правом углу на той-же строчке.

Делается это тоже достаточно просто, на строчке 35 это на одну строчку, ниже найдите следующий код —

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

Ищем социальные кнопки в интернете

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

Мне нравится сервис яндекса, которым я пользуюсь.

Перейдите на этот сайт и выберите социальные сети которые будут отображаться у вас на сайте, выберите внешний вид блока, всего четыре вида, только иконки, счётчики, иконки и меню и иконки маленького размера.

Последний этап, скопируйте получившийся код.

Далее идём в панель управления, находим то место откуда мы удалили код с количеством комментариев, и вставляем за место того удалённого кода, наш код с социальными кнопками.

Вот что должно получится:

Сохраните документ и вернитесь на сайт что-бы посмотреть что получилось в результате.

У меня вот что:

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

источник

Кнопки Поделиться на сайт настройка

Установка и настройка кнопок Поделиться для сайта

Различных наборов и конструкторов кнопок «Поделиться в соцсетях» существует великое множество. В данном уроке пойдёт речь о том как создать, настроить и разместить на страничках Вашего сайта набор социальных кнопок от конструктора Usocial

Чем же хорош набор именно этих Социальных кнопок? Начнём с того, что данный конструктор предоставляет несколько вариантов социальных сервисов.

Кнопки «Поделиться» лишь один из них! После Регистрации в Usocial Вам станут, также, доступны такие возможности как: Кнопка «uLike»; Социальный замок; Привлечение посетителей.

Сервис Usocial предоставляет возможность установки на Ваш сайт как безплатной версии своих продуктов, так и Pro — вариантов, то есть за денюжку.

Я расскажу именно о безплатном вариант Кнопок Поделиться соц бара Usocial.

В принципе, Вы можете и не заморачиваться с регистрацией. Разработчики платформы, предоставляют Вам возможность разместить их соцкнопки в «анонимном» варианте, но тогда Вам будут недоступны некоторые полезные функции системы.

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

Читайте также:  Установка apk без файлового менеджера

В общем выбирайте какой вариант для Вас предпочтительней и вперёд!

Я начну знакомить Вас с сервисом кнопок Поделиться от Usocial именно с процесса регистрации

Вы можете создать новый аккаунт в системе или авторизоваться при помощи учётной записи в одной из соцсетей, в которой она у Вас, уже, есть:

Итак Вы, успешно, вошли в систему.

Создадим и настроим свой первый набор соц кнопок Поделиться для сайта:

После нажатия на ссылку «Создать набор» Вы попадёте на страницу на которой сможете выбрать необходимые Вам кнопки социальных сетей или один из сервисов:

Как видите выбор инструментов, для раскрутки Вашего сайта в соцсетях, довольно велик. При желании Вы можете задействовать на своём сайте весь арсенал средств от Usocial

Так как основная цель этой статьи рассказать и показать Вам как создать набор кнопок Поделиться для Вашего сайта, то этим я и займусь, более, плотно.

А о остальных сервисах от Usocial я, возможно, расскажу в своих следующих статьях .

Поэтому кликаем на ссылку «Создать набор» под сервисом «Поделиться» или на саму картинку:

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

Выбирайте хоть все, но учтите, что, в этом случае, блок кнопок Поделиться займёт довольно много места на Вашем сайте!

Так что не забывайте про здравый смысл и не поддавайтесь искушению обвесить Ваш сайт по максимуму различными кнопочками и прочими «фишками». Берите, только то, что Вам реально необходимо:

После того как Вы определились с кнопками соцсетей, которые будут представлены в Вашем наборе блока Поделиться, пора приступить к настройке внешнего вида и функциональности данного набора.

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

Ознакомьтесь с возможностями конструктора кнопок Поделиться для сайта

Я представлю Вам беглый обзор всех доступных настроек, как в платном, так и в безплатном вариантах:

1. Эффекты при наведении курсора на кнопку. В безплатном варианте соцкнопок анимация отсутствует. Зато доступны для выбора форма и стиль кнопок, а, также несколько вариантов цветового и стилистического оформления созданного Вами набора:

2. Далее Вам предоставляется возможность выбора местоположения кнопок для сайта «Поделиться в соцсетях» и их размера. Помните, что Вы, всегда, сможете изменить эти настройки в будущем. Поэтому, смело, экспериментируйте для достижения нужного Вам результата:

3. На следующем этапе настройки Вы можете выбрать варианты отображения счётчиков «расшаривания» Ваших материалов и их местоположение относительно кнопок.

Также, если на Вашем сайте, до сих пор, не установлена такая полезная штука как Кнопка «Наверх «, Вы можете, прямо сейчас, «прицепить» её к Вашему блоку Поделиться.

Ваши посетители, несомненно, будут благодарны Вам за подобный сервис, особенно, если страницы Вашего сайта довольно длинные. Как на моём сайте, к примеру.

4. Ещё, дополнительные, настройки кнопок:

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

Далее нажимаете на кнопку «Сохранить код» внизу страницы настройки.

Ваш набор социальных кнопок Поделиться настроен и готов к установке на сайт

О том как и куда вставить код кнопок я расскажу в статье Как добавить кнопки Поделиться в соц — сетях на свой сайт

Если Вам понравилась эта статья — не забывайте ставить «лайки», делать репосты и делиться моими уроками в соц-сетях, на своих страничках и на страничках своих друзей. Это поможет продвижению моего сайта.

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

Также, Вы можете следить за моими новыми уроками в соцсетях:

Мой блог на платформе blogspot.ru: Делаем сайт с нуля

Страничка в соцсети Твиттер: Сайт своими руками

Если Вам помогли мои уроки, по созданию и продвижению сайта, Вы можете сделать, добровольный, благотворительный взнос для поддержки моего проекта делаем-сайт.com

Для этого переведите, произвольную, на Ваше усмотрение, денежную сумму, ( рубль, как известно, доллар бережёт : ) ), на мой Яндекс Кошелёк. Донейшен, такой донейшен : )

Вы можете сделать пожертвование как со своего счёта в Яндекс Деньги, так и при помощи банковской карты. Выберите приемлемый вариант напротив поля с суммой Вашего перевода.

Также возможны пожертвования на мои электронные кошельки в международной системе расчетов WebMoney.

Номера кошельков WebMoney

Рублёвый: R589320584698

Валютный ( доллары США ): Z615062175442

Если Вы заметили какую либо ошибку на сайте или в статье — просьба сообщить об этом в комментариях!

Удачи в создании и продвижении собственного сайта или интернет — магазина!

источник