Здравствуйте, уважаемые читатели блога сайт. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно , да и будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из , о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).
А также я посчитал уместным и по Емайлу.
Создаем спрайт из кнопок и вставляем Html код на сайт
После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про , подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в и .
Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и . Нам такое расточительство не подходит, тем более, что уже давно .
Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).
Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 , поэтому мой спрайт выглядит так ( , правда, туда еще затесался, но это не беда):
Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из . В моем случае он называется sidebar.php. Html код при этом получается крайне простой:
Ну, и самое интересное. С помощью мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.
Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Идея организовать интернет площадку для объединения людей с общими интересами, чтобы впоследствии получить хороший трафик и внедрить систему платной подписки, привлекает многих. Для реализации этой цели в короткие сроки подойдет социальная сеть, построенная на WordPress шаблоне, совместимом с плагинами BuddyPress и bbPress. Именно они обеспечивают полный функционал соцсети: создание профилей, обмен сообщениями, добавление в друзья, общение на форуме, совместная работа над файлами и другие опции.
10 шаблонов для сайта социальной сети на WordPress + BuddyPress
1. Sweet Date
Шаблон для соцсети, предлагающий 2 демо для сайта знакомств и 1 для сайта поиска попутчиков. Сайт на Sweet Date может использовать систему платной подписки и контроль доступа к контенту. Полностью отзывчивый дизайн темы гарантирует, что, открывая сайт на любом устройстве, посетитель получает одинаковый пользовательский опыт.
2. Thrive
Шаблон для интранет и интернет сообществ. Он является универсальной платформой, объединившей в себе функционал социальной сети, форума, систем обмена сообщениями, организации мероприятий, управления проектами и обмена файлами, e-commerce и e-learning (при покупке плагина Learndash).
3. Buddy
Тема, разработанная под Buddypress и bbPress, помогает создать соцсеть с современным дизайном. Buddy использует отзывчивую Retina Ready верстку и библиотеку иконочных шрифтов Font Awesome. Шаблон позволяет легко добавить на сайт такие виджеты, как: «Новые/популярные/активные пользователи», «Новые/популярные группы», «Календарь», «Последние темы на форуме», «Статистика», «Пользователи онлайн».
4. Socialize
Шаблон по максимуму использует возможности Buddypress, благодаря чему является хорошей основой под сообщество или соцсеть. Socialize полностью изменил дизайн bbPress, внешне приблизив его к классическому стилю форума. Чтобы веб-мастер мог добиться нужного вида отображения контента, в шаблон включено 4 варианта раскладки для главной страницы, 9 — для категорий, 6 — для постов.
5. Klein
Инновационная тема, предназначенная для работы с BuddyPress и bbPress, выполненная с особым вниманием к деталям. Подойдет тем, кому требуется интернет-сообщество или социальная сеть, работающие на WordPress. Идеальна для сайтов с большим количеством зарегистрированных пользователей. Подключив к участникам сообщества.
6. KLEO
KLEO заслужила звание самой продающейся BuddyPress темы текущего года, потому что она действительно оправдывает ожидания. Шаблон предлагает простой с выверенными второстепенными элементами. Тема использует встроенный поиск, который не включен ни в один другой шаблон, и позволяет избежать установки специальных плагинов, что благоприятно сказывается на скорости работы сайта.
7. Monstroid2
Универсальный темплейт, последователь легендарной темы Monstroid, полностью переписанный с нуля. Благодаря совместимости с плагином BuddyPress шаблон позволяет веб-мастерам без лишних усилий сделать сайт социальная сеть или тематическое онлайн сообщество. В шаблоне предусмотрено 7 настраиваемых стилей для хедера, имеется поддержка мега меню. Покупатель может использовать картинки из демо на своем сайте.
Первая по популярности WordPress тема для интранет/экстранет сообществ. Woffice может быть под корпоративные и правительственные интранет/экстранет сети, обычные интернет сообщества и социальные сети, школьную или другую частную соцсеть.
За последние несколько лет популярность социальных сетей взлетела до невиданных масштабов. Признанным лидером в этой области является, конечно же, Facebook. Для него разработано огромное количество разнообразных приложений, широко использующих технологию .
Но если в Ваши планы не входит обогнать по популярности Facebook или Вконтакте, а Вы хотите просто создать свою социальную сеть или сообщество , схожее с Facebook, Вконтакте, Twitter или Google Plus - то этот обзор для Вас.
Мы рассмотрим 15 скриптов для создания социальной сети на со стандартными для подобных продуктов функциями, чатами, микроблогами а-ля Twitter и другими популярными функциями, которые, несомненно, Вам понравятся. В подборку вошли как платные, так и бесплатные решения.
phpDolphin
Эта платформа для создания социальной сети предоставляет практически те же возможности, что и Facebook - живой чат, отправка личных сообщений, комментариев, обмен фотографиями и многое другое.Стоимость: $43
LiveStreet CMS
Блогосоциальная платформа отечественного производства. В рунете довольно часто встречаются порталы, которые были построены с ее помощью. Если попытаться в двух словах описать данную CMS - это некий аналог всем известного Хабрахабр . Смысл системы таков: каждый пользователь может стать автором.Стоимость: Бесплатно
Boonex Dolphin
Boonex Dolphin - это мощная CMS для создания социальной сети . В арсенале имеется огромное количество расширений, таких как: группы, объявления, каталог аудио и видео , афиша, блоги, чат , каталог файлов и пр. Также Вы можете расширить стандартный набор модулей платными, которые можно купить в на официальном сайте. Есть возможность настраивать стилевое оформление своих страниц. Помимо этого, разработчики предоставляют мобильные приложения, которые интегрируются с вашим порталом. CMS платная, но есть триальная версия для тестирования.По своему опыту работы с данным движком могу сказать, что система мощная, сравнительно стабильная, но под нее нужен хороший сервер, так как «жрет» много ресурсов.
Стоимость: от 29$/мес или от 599$ разовая покупка (есть триальная версия).
Social Business
Social Business - это скрипт социальной сети для бизнесменов . Главная цель этого скрипта - дать возможность деловым людям найти себе партнеров. Некое подобие LinkedIn .Стоимость: 32$
SocEuro Social Network
SocEuro - это довольно функциональный скрипт социальной сети с типичным набором модулей для подобного рода продукта. Есть аудиозаписи как Вконтакте , чаты, ленты, игры…Стоимость: 43$
Oxwall
Абсолютно бесплатный скрипт социальной сети с открытым исходным кодом. Имеет огромное количество таких же бесплатных и уникальных дополнений, которые не найти даже в платных аналогах: фотогалерея , видеокаталог, блоги, форумы, вики , группы, события, друзья, совместная работа, общий доступ к файлам, видео -конференции и т.д.Стоимость: Бесплатно
Socialkit
Практически все функции, ставшие стандартом для соцсетей, воплощены в платформе ScialKit: живой чат, личные страницы, обмен сообщениями и ссылками, возможность оставлять комментарии и лайки, уведомления, хэштэги и упоминания.Стоимость: $39
Pligg
Pligg - это бесплатное , простое и в то же время мощное решение для создания блогосоциальной сети или сообщества . Особенность в том, что можно создать саморегулируемое сообщество. Пользователи сами решают что плохо, что хорошо. Таким образом отпадает необходимость в модерировании. С похожей философией работает Хабрахабр и система LiveStreet CMS, которая также присутствует в данной подборке.Стоимость: Бесплатно
SocioQuiz
SocioQuiz - скрипт, способный превратить Ваш сайт в портал самых разнообразных тестов , опросов и викторин . Обеспечивает полную поддержку фото- и видеоконтента, а также полную свободу в использовании собственного . Обладает значительно более широкими возможностями, по сравнению с такими аналогичными сайтами, как Playbuzz, Buzzfeed и прочие.Стоимость: $44
Friendly Social Network
Friendly social network - это самая настоящая социальная сеть для друзей . Имеет полный набор положенных в таком случае функций: персональные страницы, группы, живой чат, комментарии, лайки, хэштэги, упоминания, уведомления. Имеется возможность создавать отдельные профайлы для друзей и публичные. Можно управлять отображением постов - видимые всем (публичные), или только друзьям. И это только некоторые возможности, которые делают «Friendly» практически идеальной платформой для создания своего сообщества.Стоимость: $36
Итак, уважаемые начинающие веб-мастера, мы познакомились с основами HTML.
Теперь давайте, применив эти знания, быстренько сделаем себе небольшой сайт и выложим его в интернет.
Правда полноценный ресурс, с применением одного лишь html, сделать затруднительно, но вот сайт-визитку из нескольких страничек, вполне возможно.
Если у кого-то именно он и является целью, и нет желания изучать другие языки программирования, то эта статья для них.
Короче, в самописном исполнении, без использования CMS, проще уже ничего не существует.
А для тех кому требуется что-то по круче, в конце статьи есть ссылки на статьи с кодом блочного шаблона, с использованием CSS, и кодом динамического сайта с использованием PHP.
Сайт на чистом html сделаем прямо на этой странице, так сказать — сайт в сайте, вполне рабочий и готовый к заполнению контентом.
Разделим весь процесс на три части.
1. Создание директории сайта на своём компьютере.
2. Создание сайта.
3. Перевод сайта с нашего компа на хостинг, то есть в интернет.
Создание директории сайта на своём компьютере
Первый пункт самый простой. О том как создать директорию очень наглядно показано в статье (все ссылки с этой страницы открываются в отдельном окне, чтоб не потеряться).
А что, и в какую папку положить, я подробно покажу после кода главной страницы, чтоб уже было с чем идти в директорию.
Затем приступим ко второму пункту, самому творческому.
Создание шаблона сайта
Для создания шаблона потребуется редактор, в который нужно будет вставить приведённый ниже код.
Это может быть как простой виндовский Блокнот, так и любой другой текстовый редактор.
За основу шаблона возьмём многослойную таблицу HTML. Раньше, до появления CSS все сайты писались таблицами, теперь же более популярной стала блочная вёрстка.
Но и до сих пор, табличная структура не устарела и с успехом применяется.
Например инвестиционная CMS H-script со сложнейшим функционалом, целиком свёрстана на основе таблиц.
Итак, вот такой сайт, с минимальным оформлением.
Как в дальнейшем оформлять таблицы, очень подробно показано в статье .
|
<!--Создаём таблицу контейнер, которой задаём следующее
оформление:
border="1" - рамка вокруг контейнера. Увеличив число, можно увеличить толщину рамки.
align="center" - размещаем контейнер по центру экрана.
rules="rows" - убираем двойную рамку.
style="width:60%;" - добавляем стилевое свойства, делающее
контейнер и весь сайт "резиновым".
Сделать полноценный адаптивный дизайн, этим способом невозможно.-- >
|
Читайте также |
