Реклама на блоге
Контакты
на HTML
На CSS
в PhotoShop
для WordPress
Видеоуроки
Акции и конкурсы
Кроссворды
Доброго здоровьица! Сегодня у меня, несмотря на осень, настоящее летнее и праздничное настроение. Мой блог теперь имеет уникальный презентабельный шаблон. Ура-а! Наконец-то!
Идея сменить тему пришла ко мне около месяца назад, и я активно принялся за дело.
Вдвойне приятно то, что я, не имеющий никакого опыта верстки, смастерил его своими силами. Верстал правда не с нуля, а лишь переделал готовый шаблон (уже второй раз!).
Первоначально, когда я скачал шаблон, он выглядел аж вот так (кликабельно):
Потом переверстал его на скорую руку до такого состояния (тоже кликабельно):
И вот, наконец-то довел его до совершенства.
Что помогло мне совершить такой «подвиг»? Ведь можно было бы заказать верстку красивого шаблона с нуля!
- Во-первых, хочу поблагодарить сайты Htmlbook и Ruseller за предоставленные уроки по CSS.
- Во-вторых, благодарен самому себе любимому за желание получше изучить CSS.
- Ну и в-третьих, благодарен своей жадности.
Большинство примеров и рецептов я «тащил» именно с этих сайтов. 
Она мне помогла сэкономить средства на услуги вэб-дизайнеров.
Не обходилось в процессе верстки без трудностей — без них ни в одном деле не обойтись. Я долго мучался с оформлением комментариев, и еще дольше с выводом трехуровневого меню — целая эпопея, честное пионерское! Ладно, не буду о грустном, ведь главное, что всё-таки я это ДОБИЛ!
Теперь перейдем к обзору новой темы. Сразу скажу, что изменил абсолютно всё, что только можно было изменить, кроме фона шапки блога — облаков, и картинок — синей птицы Твиттера и яйца ФидБёрнера (хорошо сказал :-))
Начинаем с «крыши» — как дядя Стёпа
Итак, в шапке блога я изменил только стили для названия и описания блога, и добавил место под рекламный баннер 320х60.
Кстати, если Вы хотите установить красивый шрифт на сайт, используйте Google fonts. Красивых шрифтов там просто валом!
Чуть ниже мы можем увидеть обновленное меню. Раньше оно было маленьким, черненьким и двухуровневым, теперь оно ширенькое, сине-голубенькое и трехуровневое и с иконками в субменю! Сколько я с ним мучался! Не помог даже CSSmenumaker. Но ничего! Скоро напишу про него отдельный пост, чтобы любой желающий мог без лишнего геммороя установить его на свой блог. Под меню теперь располагается рекламная строчка Nolix, которая была в самом верху блога.
Идем далее. Изменил оформление анонсов записей, а именно: добавил границы к постам, изменил оформление даты, числа комментариев, и кнопки «Читать далее». Особое место занимают миниатюры. Миниатюры записей выглядели, мягко говоря, не очень. И я просто решил их сделать круглыми с эффектом неоновой подсветки. Получилось весьма красиво. При наведении курсора на миниатюру можно узнать число просмотров записи:
Открыв полный текст записи, можно заметить, что шрифт стал хоть и поменьше, но красивее и аккуратнее, но основные изменения произведены в самом низу — это обновленный блок похожих записей с социальными кнопками, комментарии и форма отправки комментариев.
Фоном блока похожих записей является желто-светло-желтый градиент. Также изменил рамку вокруг данного блока — красный пунктир. Комментарии теперь имеют желтовато-оранжевый цвет фона, а комментарии админа, то есть мои — бирюзовый с синей пунктирной рамкой вокруг. Изменил оформление кнопки «Ответить»:
Форма комментариев претерпела большие изменения — теперь она светло-зеленого цвета. Уменьшен размер полей, изменена кнопка «Отправить комментарий», и добавлены смайлы с помощью плагина Custom Smiles. О том, как сделать такую кнопку, можете почитать в этой статье.
Переходим к правой части шаблона — сайдбару. Сайдбар имеет объемный эффект за счет теней и выглядит, как заплатка. Сейчас так модно ;-). Заголовки виджетов сайдбара теперь не просто текст, а полноценные блоки с тенями. Здесь опять же использовался Google font. Изменен стиль списков сайдбара (для контента, кстати тоже), стили ссылок. К рубрикам добавлены иконки. О добавлении иконок к рубрикам я напишу в одном из ближайших постов. Изменен стиль поиска по сайту Google. Теперь и не подумаешь, что он от Google. Слегка изменил стили формы подписки FeedBurner — заголовк, поле ввода E-mail, и кнопку «Подписаться».
Ну и наконец, самое последнее — это подвал. Сильных изменений не сделал — оставил ножницы, но все же изменил фон — теперь там трава «растет». А весь текст выравнял по центру, и взял другой, более подходящий по цветам, счетчик статистики LiveInternet.
Один немаловажный момент заключается в том, что я не использовал никаких графических редакторов. Все сделано с помощью CSS. CSS — великая вещь! Иконки и изображениия скачивал со специальных сервисов.
Что касается изменений в php-файлах, то они тоже были, но небольшие. Например, в functions.php я добавил хлебные крошки — отображения названия текущей и предыдущих до главной страниц. Основные изменения производились в файле style.css. Вот пожалуй и все, что касается новой темы. Мне она очень нравится.
А теперь внимание, конкурс!
Как Вы могли уже заметить, в шапке блога появилось рекламное место размером 320х60. Пока мой блог не приняли в систему баннерной рекламы RotaBan, я объявляю конкурс на самый красивый баннер блога, или сайта.
Требования к блогам/сайтам участников.
Ваш ресурс ни в коем случае не должен:
- противоречить Законодательству Российской Федерации;
- содержать неприличные материалы или рекламу;
- содержать призывы к насилию или расовой/религиозной розни.
- созданию блога;
- созданию сайта;
- языкам веб-программирования — html, php, JavaScrript и т.д.;
- раскрутке, оптимизации, продвижению, SEO;
- а также ресурсы, близкие по тематике с моим блогом.
Принимаются баннеры сайтов/блогов, посвященным:
Для участия в конкурсе Вам нужно:
- Подать заявку на участие в конкурсе на странице Контакты, указав в теме письма «Конкурс баннеров»;
- Получить одобрение Вашего ресурса;
- Нарисовать баннер 320х60 пикселей в формате *.gif, *.jpg, или *.png;
- Прислать ссылку на баннер.
Прием заявок на участие будет до 30 ноября 2013 года.
Три самых красивых баннера будут показываться в шапке блога в течение месяца, а может и больше! Для Вас это будет бесплатная реклама. Баннеры будут иметь открытую индексируемую ссылку на Ваш ресурс! Баннеры всех остальных участников будут размещены на отдельной странице по итогам конкурса.
Желаю всем удачи!
Отличный дизайн получился, вопрос, а как сделал другое оформление комментариям автора, а то я ни как не могу, если поможешь буду благодарен.
В конкурсе приму участие, и вышлю Баннер когда нарисую.
И вопрос ещё насчет древовидных комментариев, их ты как делал? плагином или без?
Для подсветки комментариев админа на своём блоге пропиши в style.css в строке №928 это:
.chalt{ background: #ccc !important; }а древовидные комментарии уже были встроены в мою тему без плагина.
Красивый блог получился, глаз радует
Как думаешь, Никита, сколько обойдется такой заказать? А то мой приелся, смотреть страшно 
Спасибо, Натала! Цены на изготовление шаблона с нуля колеблятся от 10 до 15 тыс. рублей. Недешево.
Мне тоже всё нравится, супер! Особенно подвальчик понравился.
Никита, я хотел бы участвовать и уже начал даже делать баннер своего блога (спасибо за идею)… посмотри мой блог подходит под формат твоего конкурса?
У Вас интересный блог, так что принимаю!
Cпасибо! Участвую!
Красивый дизайн получился, я тоже в ближайшее время постараюсь сменить оформление. Сейчас как раз и занимаюсь изменением своего шаблона.
Рад видеть на блоге! У Вас нормальный дизайн, не то что мой предыдущий!
Сам шаблон мне тоже нравится, только тёмные цвета уже приелись. Вот я и решил сделать его более светлым.
Просто поменяйте цвета фона на светлые, а остальное и так красиво.
Читаю ваш блог и очень благодарна вам за полезную информацию! В технических вопросах ваши статьи — первый помощник:)
Я бы тоже хотела поучаствовать в конкурсе, посмотрите, пожалуйста, соответствует ли мой сайт требованиям?
Ваш сайт о веб-дизайне. Очень даже подходит. Принимаю!
Спасибо, тогда я участвую:)
Очень и очень красивый получился дизайн. А если сравнивать с исходником — то вообще Превосходно!
В CSS я пока не ас, так что эта страничка однозначно идет в закладки и ждет своего часа переделки моего шаблона.
Вариант переделывания как раз и подходит таким любителям как мы. Сейчас думаю сделать мобильную версию.
А мобильную версию, с помощью плагина, али как?
Возможно, что с плагином, но сейчас другая проблема — нужно доделать шаблон для нормального отображения в опере!
Никита, привет! Ты борешься с дублями? Я заметил (когда копировал ссылку посмотреть в Опере), что твоя статья доступна по ссылке http://makoveckij.ru/novyiy-unikalnyiy-shablon-moego-bloga-minikonkurs/#.Uos679JFCvk и по точно такой же, только без всего, что после решетки. Если же удалить адрес по последний слеш, то перебрасывает на этот непонятный, который я уже ввел. Может сумбурно объяснил, но думаю ты поймешь. Это вроде бы явные дубли.. Или я ошибаюсь? И вообще откуда эти надписи после решетки?
Это рекламная строчка Nolix добавляет такую фигню на конец адреса. Считай, это то же самое, что и #соmments на конце.
Буду знать… Век живи — век учись ))
У Бобрина такую фигню замечал. Сейчас правда все в порядке — нет на конце этой ерунды, но это все равно нестрашно, так как решетка после адреса указывает на какую-то конкретную часть страницы. Например у меня при переходе по адресу http://makoveckij.ru/novyiy-unikalnyiy-shablon-moego-bloga-minikonkurs/#konkurs1 ведет сразу на конкурс баннеров, а просто решетка — это значит вернуться наверх (думаю знаете). Так что поисковики и не смотрят на это. Главное — это правильный robots.txt, в котором и нужно исключить ненужные страницы
Ну, да. Я посмотрел другие страницы, везде одинаковое окончание. Просто раньше не обращал внимание на других сайтах с ноликс.
Я тут недавно в дубли стал вникать, потому и спросил — не проявление ли этого вредного явления
Александр, составьте правильный robots.txt и о дублях можно будет не волноваться!
Какой красивый и яркий блог!
Я тоже ХОЧУ яркий шаблон для своего блога о SEO в стихах….
А то какой-то не фууууууу.. у меня, мрачный.
Может кто поможет? Ссылка на блог в имени.
Нормальный у Вас шаблон!
Ага, сайдбар кривущий только
Сильно править не стоит.
Классный дизайн: яркий и не набитый лишним. Молодец, постарался на славу! Глянь пожалуйста у меня на блоге: как можно выделить мои комментарии цветом. Там просто код комментариев я позапутал так, что даже сам не могу разобраться
Спасибо! Рад видеть на блоге! Помогу обязательно! Решение проблемы вышлю на почту, договорились? Ты достоин большего! Молодец!
Ответ на почту получил, большое спасибо!
Хорошо потрудились — хороший результат.
И вдвойне приятно, когда знаешь, что с задачей справился сам.
Дальнейших успехов Вашему блогу!
Спасибо, Ирина! Буду стараться!
Никита советую шрифт на блоге увеличить, а то текст сильно мелкий получается на блоге.
У некоторых топовых блоггеров такой же шрифт. Я на них ориентировался.
«Первоначально, когда я скачал шаблон».
Если не секрет, как назывался шаблон?
Тема называлась Mike
В Ruseller есть уроки, а в Htmlbook не видел (или не обращал внимания) уроков по CSS, только статьи. Какой урок тебе больше всего пригодился, если не трудно, напиши.
Честно, не помню! Я там брал уроки по теням.
«Сколько я с ним мучался! Не помог даже CSSmenumaker» — почему? В статье писал, что там даётся код выбранного пользователем меню, который можно вставить себе на блог. В чём именно проблема была?
После того как ты выложил код трёхуровневого меню и CSSmenumaker уже не нужен))
То и значит, что не помог! Пришлось искать другой вариант. Очень не хотелось переделывать коды в functions.php и header.php. Мне нужно было только css изменить и я его сделал!
И сделал это просто блестяще!