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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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