Часто на пошту приходять листи, де читачі запитують, як поставити кнопку на сайт? Ні, мова не йде про кнопці від В контакті або фейсбук (до речі про кнопку "Мені подобається" від facebook буде урок дуже скоро). Сьогодні я розповім про кнопках RSS, Twitter та інші, які зазвичай в сайдбарі, ось вони на моєму блозі:

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

1. Перше те, що нам потрібно, це дізнатися ширину сайдбара в пікселях (щоб знати, яких розмірів робити кнопки і в якій кількості). Для цього користуємося чудовим доповненням для FireFox Firebug 'Ом, наводимо мишкою на сайдбар:
   І в правому нижньому кутку можемо побачити ширину в пікселях:
   1 стрілка, як раз показує на ширину. Нагадаю, width - це ширина.
   2 стрілка показує на розташування даного елемента (в даному випадку сайдбара), тобто, якщо Ви хочете змінити ширину сайдбара, то потрібно відкрити файл style.css, знайти там 90-у рядок (див. Стрілка №2 на рис. Вище) і поміняти значення width на інше. Наприклад, якщо Ви, замість 200 поставите 500, то ширина Вашого сайдбара буде дорівнювати 500 px (пікселів).
2. Далі нам потрібно вставити кнопку в потрібне місце. Покажу на прикладі кнопки підписки RSS. Для початку Ви повинні зробити RSS на підписку на Вашому блозі ( Як зробити RSS на блозі? ).
3. Потім відкриваємо файл sidebar.php.
4. І в потрібному місці, наприклад, якщо у Вас є пошук на сайті, то перед ним або після нього, додаємо наступний код: <a href = "http://feeds.feedburner.com/wpnewru" target = "_ blank" rel = "nofollow"> <img alt = "RSS-підписка блогу WPnew.ru" title = "RSS-підписка блогу WPnew.ru" src = "https://wpnew.ru/images/feed_48.png" border = "0" width = "48" height = "48" /> </a>
5. І редагуємо поставлений код (див. Вище) для свого блогу. Для цього, нам потрібно, природно, посилання на RSS канал, тобто http://feeds.feedburner.com/wpnewru змінити на свій (як його дізнатися, розповідав тут ).
   target = "_ blank" - залишаємо, цей шматок коду дозволяє відкрити посилання-зображення в новому вікні.
   rel = "nofollow" - теж залишаємо, так як нам необхідно закривати від індексації непотрібні посилання.
   У img alt (альтернативна назва зображення) міняємо фразу RSS-підписка блогу WPnew.ru на своє. Можна використовувати ключові слова блогу.
   В title (назва картинки) також змінюємо RSS-підписка блогу WPnew.ru на своє.
   src - виводить зображення, для цього міняємо адресу зображення https://wpnew.ru/images/feed_48.png на свій. Тобто, заздалегідь закидаєте потрібне зображення через ФТП і вказуєте повний шлях до картинки RSS-підписки, включаючи розширення (png, jpg, jpeg, gif та ін.). До речі в інтернеті повно красивих RSS кнопок, тому підберіть, що-небудь оригінальне, можна по тематиці свого блогу. Наприклад, дуже велика кількість RSS кнопок Ви можете подивитися тут .
   border - товщина рамки в пікселях, якщо вона Вам не потрібна, залиште значення рівне нулю.
   width, height - ширина і висота картинки відповідно (в пікселях). Не забувайте дотримуватися пропорції, для зручності краще відразу картинку підігнати з однаковою шириною і висотою з допомогою якого-небудь графічного редактора або вже знайти, наприклад, в Яндекс Картинках , Зображення з однаковими пропорціями, щоб потім вже регулювати на блозі.
6. Якщо Ви замість <a href="http://feeds.feedburner.com/wpnewru" target="_blank" rel="nofollow"> <img alt = "RSS-підписка блогу WPnew.ru" title = "RSS-підписка блогу WPnew.ru "src =" https://wpnew.ru/images/feed_48.png "border =" 0 "width =" 48 "height =" 48 "/> </a>

   [Yandex]

   вставите просто

   <Img alt = "RSS-підписка блогу WPnew.ru" title = "RSS-підписка блогу WPnew.ru" src = "https://wpnew.ru/images/feed_48.png" border = "0" width = "48 "height =" 48 "/>

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

7. Може хтось поставить питання: "А як поставити кнопку на сайт від Twitter? Або від Facebook? Аналогічно! Просто в наступному рядку додаєте точно такий же код, просто знову потрібно буде поміняти адресу картинки, текст і головне посилання, куди веде картинка. Тобто, замість RSS, для Twitter, наприклад, у мене код виглядає наступним чином: <a href="http://twitter.com/wpnew" target="_blank" rel="nofollow"> <img alt = " Я на Twitter | Підписатися на мене "title =" Я на Twitter | Підписатися на мене "src =" https://wpnew.ru/images/twitter_48.png "border =" 0 "width =" 48 "height =" 48 "/> </a>

До речі, пам'ятаєте, багато досвідчених інтернет-користувачі вважають за краще підписуватися через Google Reader (хоча я до таких не належу, я читаю стрічку через улюблену Opera), тому обов'язково додайте можливість підписки на Ваш блог, через Google. Ось приклад даної кнопки на моєму блозі:

Після href не забудьте замінити закінчення посилання з wpnewru на свій! Таким же способом я додав кнопку підписки на мене на facebook.

Ось що вийшло у мене на FanBar.ru:

Ось, про всяк випадок, шматок коду, як я вставляв все це в WordPress, в сайдбар:

[Yandex]

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

а після останньої кнопки

Це буде виглядати ось так:

Сподіваюся, Ви зрозуміли урок про те, як поставити кнопку на сайт. Ставте кнопки по свою бажанням і смаком. Удачі вам!

Підпишіться на безкоштовні уроки

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