Як зробити соціальні кнопки горизонтально та в рамці
Для цього відкриваємо "Блокнот", в який ми в попередній статті заносили коди і записуємо сюди невелику програму для нашого блоку:
bloktext – параметри заголовка, який розташовуватиметься вгорі блоку (колір, шрифт, розташування та розмір);
bloktwit – ім'я та параметри кнопки Twitter (float – розташування, width – ширина у пікселях, height – висота у пікселях);
blokfaceb – ім'я та параметри кнопки Facebook;
blokvk – ім'я та параметри кнопки ВКонтакте;
blokmmiod – ім'я та параметри кнопок Мій Світ та Однокласники;
blokya – ім'я та параметри кнопки Я.ру;
social-button – ім'я та параметри блоку: height – висота блоку, padding – внутрішні поля (відступ картинок від країв рамки), margin – зовнішні поля (відступ рамки від краю ліворуч і праворуч), border – рамка – товщина, стиль, колір.
Цю програму потрібно вставити у файл стилів style.css.
Для цього копіюємо її в нашому “Блокноті” заходимо до адмінпанелі сайту, відзначаємо Дизайн=>Редактор, знаходимо список стилів та відкриваємо файл style.css.
В кінці файлу вставляємо цю програму і не забуваємо натискати "Оновити файл":
Коригуйте файли в адмінпанелі дуже обережно. Бажано перед внесенням змін скопіювати файл собі на диск або скопіювати їх текст у якийсь “Блокнот”. У випадку, якщо сайт поламається можна зайти на хостинг і вставити стару інформацію файлу.
Повертаємося до нашого “Блокнота”, щоб встановити зв'язок між кодами наших кнопок та новою програмою у файлі стилів. Для цього підготуємо наступний шаблон, в який вставлятимемо отримані ранні коди наших кнопок:
Цей шаблон містить унікальне ім'я нашого блоку (social-button), ім'я заголовка (bloktext), текст заголовка, теги із укладеними в них унікальними іменами кнопок (bloktwit, blokfaceb, blokvk, blokmmiod, blokya, blokgoog), які ми описали у файлі стилів.
Текст заголовка: "Буду вдячна, якщо Ви поділіться статтею з друзями!" можна змінити та задати свій.
Копіюємо код кнопки Twitter і вставляємо між div тегами.
Аналогічно копіюємо та вставляємо коди кнопок Facebook, ВКонтакте, Мій Світ та Однокласники, Я.ру, g+1 у підготовлені для цих кнопок індивідуальні теги div з унікальними іменами кнопок (bloktwit, blokfaceb, blokvk, blokmmiod, blokya, blokgoog).
Копіюємо наш блок з кодами дуже уважно, щоб все скопіювалось і вставляємо в наш плагін Header and Footer. Для цього відкриваємо в адмінпанелі Налаштування=>Header and Footer і в пункті меню Post Content вводимо в нижнє віконце в полі “Code to be inserted after each post”, замінивши раніше вставлений попередній статті код на останній скопійований.
Можна для краси оформлення вставленого блоку додати порожні рядки перед і після рамки, вставивши до і після коду такі рядки:
Обов'язково натискаємо Save для збереження змін.
Якщо якась кнопка наїхала на сусідню, потрібно відкрити файл стилів style.css і, знайшовши опис цієї кнопки, збільшити поле width приблизно на 20-50 або більше пікселів. При цьому збільшиться ширина місця, відведеного для даної кнопки і за рахунок цього зрушиться кнопка, що стоїть праворуч.
Якщо Ви вибирали всі кнопки з лічильниками, а бачите на деяких із них його відсутність – не переживайте, це нормально. Коли відвідувачі поділяться статтею у соцмережі, лічильник з'явиться на кнопці.
Якщо Ви новачок і все описане в цій та попередній статті здалося складним або,якщо Ви просто хочете урізноманітнити свій сайт корисними штучками, то у мене для Вас сюрприз, описаний у наступній статті.