<
  • Главная
Статьи

Як зробити соціальні кнопки в шапці блогу?

Добрий день дорогі читачі! Я не писав пару тижнів, тому що, ми з дружиною подорожуємо по Балі, і тут зовсім туго було з інтернетом. Про нашу подорож навколо Балі ви можете почитати тут . Тепер ми зняли будинок з хорошим інтернетом, і я сподіваюся, буду регулярно писати в свій блог про створення блогу! 🙂

Отже, в одній з новин свого блогу howmakeit.ru, які я пишу в свій щоденник , Я обіцяв розповісти - як я зробив соціальні кнопки в шапці свого блогу. Треба виконувати свої обіцянки! 🙂

Ось так зараз виглядають соціальні кнопки в правому верхньому куті мого блогу.

Про всяк випадок поясню, для чого мені взагалі ці соціальні кнопки. Як і багато блогери, я бажаю, щоб мій блог читали якомога більше людей. І тому, не буде зайвим, запросити моїх читачів в друзі в моїх улюблених соціальних мережах. І за одне, запросити читати RSS-стрічку мого блогу. У шапці сайту дуже зручно розташувати невеликі соціальні кнопки, будь-який відвідувач буде їх бачити, і кожен бажаючий, зможе мене зафрендити додати в друзі.

Як розвивати блог за допомогою соціальних мереж? Про це я ще ні разу збираюся поговорити з Вами. А на даному етапі, розвиваючи свої акаунти в соціальних мережах, набираючи в друзі людей, яким цікава тематика по якій я веду свої блоги, я вже допомагаю своїм сайтам розвиватися!

Я цілком можу припустити, що існує плагін, який здатний зробити щось подібне, ну по-перше, я такого плагіна не шукав, а по-друге, треба взяти за правило, чим більше ми робимо на блозі своїми руками, тим краще! Далі розповім саму технологію створення цих кнопок.

Я, як завжди, не став винаходити велосипед, і основу як створити соціальні кнопки в шапці сайту, взяв з симпатичною теми азіатської дівчата, яку ми використовуємо для одного зі своїх блогів . Соціальні кнопки там зовсім маленькі і їх всього три.

Мені треба було зрозуміти - як ці кнопки потрапили в шапку сайту, не важко було здогадатися подивившись вихідний код,

<Div id = "rss"> <a href="http://greenplaneta.org/feed/" rel="nofollow" title="Rss-лента"> Rss-стрічка </a> </ div>

що місце розташування соціальних кнопок задано у файлі style.css, я скопіював весь вихідний код, що відноситься до розташування соціальних кнопок, для його доопрацювання.

/ * #Rss * / #rss {position: absolute; top: 5px; right: 212px;} #rss a {background: url ( "images / rss.png") no-repeat; display: block; width: 32px; height: 32px; text-indent: -9999em;} #twitter {position: absolute; top: 5px; right: 180px;} #twitter a {background: url ( "images / twitter.png") no-repeat; display: block; width: 32px; height: 32px; text-indent: -9999em;} #facebook {position: absolute; top: 5px; right: 244px;} #facebook a {background: url ( "images / facebook.png") no-repeat; display: block; width: 32px; height: 32px; text-indent: -9999em;}

Далі, мені потрібно було знайти сам код кнопок, і тут теж все було гранично ясно, раз шапка сайту, то і шукати слід в файлі header.php. Там я побачив вихідний код з операторами і командами wordpress, в цій темі передбачені настроюються опції для внутрішньої адміністраторській панелі, де можна зберегти настройки твіттера, або Фейсбук. Я поки не дуже розбираюся, як з'єднувати зовнішню і внутрішню частини wordpress, тому просто вирішив подивитися вихідний код сторінки, від куди і скопіював код соціальних кнопок для шапки свого блогу.

<Div id = "rss"> <a href="http://greenplaneta.org/feed/" rel="nofollow" title="Rss-лента"> Rss-стрічка </a> </ div> <div id = "twitter"> <a href="http://twitter.com/Green_Planeta" rel="nofollow" title="Следуй за нами в twitter."> Йди за нами в twitter. </a> </ div > <div id = "facebook"> <a href="http://www.facebook.com/GreenPlanetaOrg" rel="nofollow" title="Facebook"> Facebook </a> </ div>

Далі слід було перевірити працездатність мого нововведення на своєму блозі. Я відкрив файл style.css і в самий кінець додав новий код, який відповідає за розташування соціальних кнопок, далі я відкрив header.php і вставив, правда, підбираючи місце в шапці сайту, скопійований раніше код. Оновив сторінку і побачив три соціальні кнопочки з дизайну іншої теми, на своєму блозі.

Тепер, настала пора творчості, ясна річ, що залишати маленькі кнопочки, намальовані японською дівчиною дизайнером, я не хотів. Треба створити свої! 🙂

Для цього йду в Яндекс, і пишу в пошуку кнопки соціальних мереж. Мені видало тисячі картинок кнопок соціальних мереж. Я вибрав прості, круглі кнопки. Єдине, там не було кнопки Вконтакте, довелося намалювати самому, відкрив фотошоп, завантажив і нарізав вихідні:

Зазвичай для отримання красивого виду чогось мініатюрного, не заважає мати великі і красиві вихідні. 4 кнопки я скачав в Яндексі, а п'яту Вконтакте намалював за образом і подобою. Тепер мені треба було придумати їм якийсь дизайн, хоча і такі великі кнопки можна було б повість ... 🙂

Я давно (більше 10-ти років) користуюся фотошопом, і дещо вмію, ну якщо у Вас недостатньо знань, як працювати в фотошопі, рекомендую набрати в пошуковику туторіали фотошоп, або уроки фотошопа. Трохи позайматися нікому ще не шкодило, хоча б навчитися працювати з шарами і вміти виділяти предмети будь-якої форми.

Я вирішив не мудрувати, і зробити ефект часткового дзеркального відображення і трохи додати об'єм кнопках, простим накладенням тіні.

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

Далі, з'ясувавши, що розмір однієї кнопочки повинен бути 38х54 пікселя, я став вносити зміни в код стилю своїх соціальних кнопок у файлі style.css. Вже готові картинки кнопок соціальних мереж потрібного розміру я скопіював на свій сайт в папку images. І у мене вийшов наступний код:

/ * #Rss * / #rss {position: absolute; top: 25px; right: 212px;} #rss a {background: url ( "images / rss.png") no-repeat; display: block; width: 38px; height: 54px; text-indent: -9999em;} #twitter {position: absolute; top: 25px; right: 172px;} #twitter a {background: url ( "images / twit.png") no-repeat; display: block; width: 38px; height: 54px; text-indent: -9999em;} #facebook {position: absolute; top: 25px; right: 132px;} #facebook a {background: url ( "images / fb.png") no-repeat; display: block; width: 38px; height: 54px; text-indent: -9999em;} #vkontakte {position: absolute; top: 25px; right: 92px;} #vkontakte a {background: url ( "images /vk.png ") no-repeat; display: block; width: 38px; height: 54px; text-indent: -9999em;} #gplus {position: absolute; top: 25px; right: 52px;} #gplus a { background: url ( "images / gplus.png") no-repeat; display: block; width: 38px; height: 54px; text-indent: -9999em;} #follow {position: absolute; top: 76px; right: 52px ;} #follow a {background: url ( "images / follow.png") no-repeat; display: block; width: 194px; height: 27px; text-indent: -9999em;}

І тепер залишилося внести частину коду в шапку свого блогу в файл header.php, який можна легко керувати в редакторі в панелі управління сайтом.

Ще раз хочу нагадати, що вносячи зміни в будь-який файл своєї теми, краще перед цим зробити резервну копію. На випадок, якщо Ви допустите помилку, завжди можна закачати старий файл.

Файл header.php в різних темах може дуже відрізнятися. Тому вставляючи щось в шапку свого сайту, іноді доводиться діяти методом тику, або проб і помилок, поки не буде знайдено відповідне для вашого коду місце.

<Div id = "rss"> <a href="http://howmakeit.ru/feed/" rel="nofollow" title="Подпішісь на Rss!"> Підпишись на Rss! </a> </ div> <div id = "twitter"> <a href="http://twitter.com/howmakeit_ru" rel="nofollow" title="Следуй за мною в twitter!"> Йди за мною в twitter! </a> < / div> <div id = "facebook"> <a href="http://www.facebook.com/lifewithoutdrugs.org" rel="nofollow" title="Давай дружити на FaceBook!"> Давай дружити на FaceBook! </a> </ div> <div id = "vkontakte"> <a href="http://vk.com/sasha_alekseenko" rel="nofollow" title="Давай дружити ВКонтакте!"> Давай дружити ВКонтакте! < / a> </ div> <div id = "gplus"> <a href = "https://plus.google.com/u/0/115083781764241182819/" rel = "nofollow" title = "Давай дружити в Google+" > Давай дружити в Google+ </a> </ div> <div id = "follow"> <a href="http://howmakeit.ru/" title="Следуй за мной!"> Йди за мною! </ a> </ div>

Взагалі, за логікою в моїй шапці картинки йдуть відразу після bloginfo, тобто назви і короткого опису мого блогу в шапці сайту, я туди і вставив мої соціальні кнопки. Що у мене вийшло Ви можете спостерігати справа вгорі в шапці мого блогу. А також можете перевірити в дії ці кнопки, додавши мене в друзі! 🙂 Як Ви переконалися, можна легко і без плагіна поставити собі на сайт кнопки соціальних мереж. Так, ніхто не говорить, що це у мене вийшло за 5 секунд, я попрацював над ними пару годин. Ну, по-моєму - воно коштує того! 🙂

Як розвивати блог за допомогою соціальних мереж?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

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

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью