104 дні назад Створюючи хороший СДЛ сайт ми багато часу проводимо над роботою з його дизайном. Хочеться щоб він виглядав просто ідеально, тому увагу приділяємо навіть дрібницям. Зазвичай все потрібно підправляти в Photoshop, але зараз я розкажу як створити дуже красиву кнопку за допомогою всього лиш CSS3.
Для початку задамо основу для нашої кнопки:
border: 1px solid #5d9046; color: #fff; text-transform: uppercase; font-family: Arial, Helvetica, Sans-Serif; text-decoration: none; width: 156px; font-size: 14px; font-weight: bold; padding: 8px 0; text-align: center; display: block;
Результат після першого кроку
Зріжемо гострі кути заокругливши їх:
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Результат після другого кроку
Для краси додамо нашій кнопці тінь:
text-shadow: 1px 1px 1px #666; -moz-box-shadow: 0 1px 3px #111; -webkit-box-shadow: 0 1px 3px #111; box-shadow: 0 1px 3px #111;
Результат після третього кроку
Ну і наостанок зробимо колір кнопки градієнтним.
background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */
Фінальна версія кнопки
Ось і готова наша кнопочка в ситі web 2.0. Якщо погратися ще із :hover, то можна придати їй ще більшої краси. далі…
Оптимізація блога на WordPress
Багато хто вважає, що готові двигуни сайтів тяжще просувати під висококонкурентні запити. Але це зовсім правдиво. Навіть звичайний блог на Wordpress можна запросто просунути в ТОП по ВЧ запитам. Але для цього потрібно добре оптимізувати двигун. Трохи розкажу, про оптимізацію Wordpress.
1. Технічна оптимізація WordPress.
- Посилання з ЧПУ.
Щоб налаштувати ЧПУ, заходимо в меню НАЛАШТУВАННЯ – > ПОСТІЙНІ ПОСИЛАННЯ, і змінюємо значення по замовчуванню на URL, який складається з місяця публікації і назви статті.
- Оптимізація метатегів title и description.
Стандартні тайтли і діскріпшн легко оптимізовувати через плагін All in SEO, як тільки Ви активуєте у ньому Plugin Status: Enabled, Ваші заголовки і діскріпшн зразу оптимізуються.
- Оптимізація посилань “далі..” .
Хто знає HTML на рівні початківця, легко зможуть відредагувати так, щоб стандартне посилання “далі..” містило в собі назву новини. Це покращить внутрішню оптимізацію блога.
- Оптимізація зображень.
Про Оптимізацію зображень та картинок я розповідав уже в одній із попередніх статтей.
2. Оптимізація шаблона.
- Хлібні крихти.
Про хлібні крихти я також розповідав у своїх статтях: частина 1, частина 2. Для WordPress є плагін Yoast Breadcrumbs.
- Теги заголовків.
Тут все просто. На головній сторінці в тезі <h1> вписуємо назву блога. На сторінці новини в тезі <h1> повинно бути вписано назву новини. Якщо у Вашому шаблоні не так, то виправити це потрібно у файлах post.php і page.php.
- Оптимізуйте код.
У фалах шаблона не повинно бути кодів javascript та CSS, це потрібно підключати з допомогою зовнішніх файлів. Це дозволить браузерам кешувати велику частину сторінки. А пошуковим ботам легше Вас проіндексувати.
- Збільшити швидкодію.
З допомогою плагіну WP-Super-Cache Ви зможете значно пришвидшити роботу Вашого блогу.
Оптимізовуємо блог на WordPress. Частина 2
Провіряйте свій HTML/CSS код на валідність! Дехто говорить, що валідність не впливає на позицію у видачі, але більшість говорить зовсім інше – впливає, і з врахуванням того що код не тяжко привести у валідний стан – для чого залишати шанс пошуковим системам недооцінювати наш сайт.
Отримати код, який відповідає усім стандартам по таких пунктах:
Кроссбраузерність – сторінка з валідним кодом буде виглядати одинаково у всіх браурезар.
SEO – вплив на позицію у видачі.
Чистий код – швидкість загрузки сторінки.
Веб-інструменти-валідатори:
W3C Markup Validation Service – стандартний валідатор HTML;
W3C CSS Validation Service – стандартний валідатор CSS;
Cynthia Says – перевір, чи відповідає Ваш сайт стандартам Section 508 і WCAG;
WDG HTML Validator – перевірка декількох сторінок і всього сайту.
