Как украсить заголовки постов + 1й Конкурс на Bloger-Man.Ru
Приветствую Всех на Bloger-Man.Ru! Заканчивается весна через пару часов и приходит лето. За окном валит дождь, а я решил черкануть пост о том как можно сделать заголовки статей немного красивее. На написание этой статьи меня натолкнула Анжелика, автор блога delaisaity.ru. Она описывала как с помощью html кода можно делать различные красивые эффекты вокруг текста.
Меня эти эффекты заинтересовали и я решил их использовать у себя на блоге. Уже давно хотелось как-то подкорректировать внешний вид моих заголовков, особенно на главной странице. Как-то невзрачно они выглядели. У Анжелики несколько различных эффектов было, но больше других меня впечатлили эти:
Bloger-Man.Ru
Bloger-Man.Ru
Как видите — смотрится неплохо. Мне особенно нравится второй вариант — с тенью. Ну собственно говоря его я и решил использовать для заголовков статей. Для начала посмотрите каким кодом эти прелести реализовуются.
Текст со свечением (1 вариант):
<p style="font-weight: bold; font-style: normal; font-variant: normal; font-size: 2em; font-family: 'Myriad Pro', myriad, arial, sans-serif; line-height: 50px; color: #ff0000; text-shadow: #ff0000 0px 0px 20px; display: block; text-align: center;">Bloger-Man.Ru</p>
Здесь:
font-size: 2em; — размер шрифта
font-family: ‘Myriad Pro’, myriad, arial, sans-serif; — какой именно шрифт
text-shadow: #ff0000 0px 0px 20px; — смещение тени по горизонтали, вертикали и ее размытие
Текст с тенью (2 вариант):
<span style="text-shadow: 3px 3px 1px #AAA; font-size: 2em; <br />filter: progid:DXImageTransform.Microsoft.DropShadow(color=#AAA, offx=3, offy=3); color: black;"> Bloger-Man.Ru</span>
Здесь основными операторами, которыми можно орудовать являются 3px 3px 1px. Первый отвечает за смещение по горизонтали, второй за смещение по вертикали, а третий за размытие отброшенной тени. Манипулируя этими цифрами можно добиться желаемого внешнего вида.
Само-собой текст внутри тегов, а в данном конкретном случае это Bloger-Man.Ru надо заменить на свой. Ну это поможет вам выделить текст, к примеру в статье. А вот как сделать заголовки статей с такими эффектами? Это достаточно просто.
Шаг 1. Заходим в админку блога, далее переходим в редактор (во Внешнем виде), находим в нашей текущей теме файл single.php.
Шаг 2. Теперь находим строчку заключенную в теги h1 (можно воспользоваться поиском Ctrl+F). В моем случае это:
<h1 class="post-title"><span property="v:itemreviewed"><?php the_title();? ></span></h1>
Шаг 3. А теперь просто напросто окружаем этот код, кодом понравившимся эффекта. Так как выбрал эффект тени то у меня получилось следующее:
<span style="color: green;"><h1 class="post-title"><span property="v:itemreviewed"><?php the_title();? ></span></h1></span>
После этих манипуляций заголовки в статьях обретут желаемый вид. Возможно кому-то это будет интересно и он применит это у себя. А выделяться среди других, как мы знаем, это совсем неплохо. Все-таки стиль должен быть не только у статей блога, а и у его внешнего вида. Надо быть узнаваемым — раскручиваем бренд имени себя :rock:.
В принципе есть еще много мест где можно применить такой эффект, но из-за отличия в структуре файлов шаблонов WordPress мой вариант может просто вам не подойти.
Новости
В виде эксперимента в июне месяце я запускаю конкурс комментаторов со следующими денежными призами:
1 место — 150 WMR
2 место — 50 WMR
3 место — 25 WMR
:prilichno: Разумеется комментарии должны быть осмысленные и относится к теме статьи.
Призы, можно сказать, символические. Мне интересно стоит ли такие конкурсы проводить на блоге и какой эффект от них я получу.
Также в мае месяце я выиграл конкурс комментаторов на блоге у Ольги Озеровой и в качестве приза за первое место удостоился бесплатного анализа блога (сэкономил 1000 рублей между прочим). Ольга в качестве платных услуг предлагает анализ молодых блогов по различным критериям. Подробнее об этом анализе можно узнать на ее блоге здесь. Надеюсь, что полученные данные по анализу моего бложика помогут мне двигаться дальше в правильном направлении.
А новостей на сегодня больше нет 🙂 Пишите в комментариях — что Вы думаете по всему этому безобразию. Без внимания комментарии не останутся. Ну а наиболее активные товарищи в конце месяца получат по заслугам.
Вовремя статья попалась =) Я тоже хотел себе подредактировать заголовки, постараюсь как нибудь выделить время и поэкпериментировать, благо не придется теперь рыть просторы интернета.))
Конкурс это всегда хорошо, конкурс комментариев уже не так хорошо :hihi: , поскольку приелся, но тоже неплохо. По поводу ярких заголовком, то я придерживаюсь строго стиля (просто чтобы шрифт нравился). Но зато мне очень нравится ваш шрифт в основном тексте и как реализована ветка комментариев.
Оригинально выглядит заголовок!)) Очень красиво смотрится!
То, что теперь есть конкурс — супер!)
Буду участвовать!!!)
Главное не переборщить с эффектами, а то будет выглядеть слишком аляписто, что для бизнес блогов не очень красиво. Бывает такие красочные блоги встречаешь.
P.S.Ура, конкурс!!! Попробуем 🙂
Комментаторов все равно нужно поощрять. Люди стараются, пишут. Поведенческий фактор улучшают, поэтому пусть и небольшой презент, но все равно всегда приятно :yes:
Да, стилями можно сделать что угодно, а если с CSS3, то там еще больше всяких эффектов, вплоть до анимации. Кстати, тень в заголовке слишком уж сдвинута, накладывается на буквы, 1-2 пиксела сдвига хватило бы. А так — можно найти применение такому эффекту, чего же отказываться, если есть такая возможность 🙂
С этим трудно поспорить :mail: А я вот всё мозгую какой-нибудь оригинальный конкурс, который бы повышал поведенческие факторы, но пока не озарило :play:
Александр, рад что статья Вам помогла.
Да,шрифт мне тоже понравился сразу. Поэтому и оставил.
А у Ольги как раз с озарением все в порядке и прошлый месяц это показал.
Азик, думаю 1 место занять для тебя будет не сложно. Я уже в этом убедился :play:
Ну, Юрий, смайлик просто моя копия!)))
Именно так я и пишу комментарии))
Ольга, постараюсь не переборщить. Хотя конечно у каждого свое чувство стиля.
Анализ получил. Большое спасибо. Буду работать над ошибками.
Да, за тобой трудно угнаться.
Там как раз один пиксель смещения и 6 размытия сделал (было 3).
С заголовками крутая тема! А с конкурсом еще лучше!
Я от тоже планирую планирую но все никак не запущу…
Попробуй. Польза для блога от проведения конкурса должна быть.
Да интересно. Надо будет попробовать, спасибо за подробное объяснение.
Андрей, спасибо, что зашли. Рад, что информация пригодилась.
Отличные эффекты. Но я пока не хочу трогать свои- до сих пор не выйду из январского коллапса.. Как только до конца решится проблема, буду думать.
Стесняюсь спросить, Наталья, а что произошло в январе?
Таки после троллинга начала убирать двойные заголовки в статьях (по 50 штук в день в течение недели) и пришел полный капец… Сайт стал недоступен. Теперь, даже при том, что перешла на тариф выше, до сих пор нагрузка превышает норму и сайт постоянно недоступен — иногда пару минут, иногда пару часов… Поддержка ничего сделать не может. И это при посещаемости всего 300 и 100 человек (естественно упала с 500 т.к. постоянно сбои)
А что такое двойные заголовки? И зачем Вы их убирали? Может они у меня тоже имеются?
Юрий, это когда название статьи H1 такое же, как и h2 уже в самой статье. Говорят, что так нельзя делать и что они должны различаться. Я тогда просто убирала h2
А, понятно. У меня в таком случае этой проблемы нет. В самой статье в подзаголовках я использую h4.
Дело не в «h», а в том, что бы они не дублировали друг друга.
Классно получается, надо взять себе на вооружение. И никаких плагинов и код простой!!!
Да, достаточно просто. Заголовки в таком виде мне больше нравятся чем в стандартном.
Да, так лучше. В стандартном заголовок плохо выделяется.
В записях себе такой стиль оформления сделал. Смотрится теперь куда отчетливее и приятнее.
Посмотрел — красивее и правда. Можно еще тегом center выровнять для разнообразия.
Спасибо, Юрий!
А вот тег center с недавних пор стал невалидным. Теперь его использовать не рекомендуется в самом валидаторе. Нужно заменять его на значение ай ди text-align: center, тогда такие css украшения пройдут тест на валидность.
Всем успехов и красивых сайтов!
Анжелика, а чем опасен невалидный код? Я просто не в курсе.
Спасибо!
Все языки программирования имеют свои правила написания, и несоблюдение их чревато некорректным отображением в различных браузерах, т.е. некросс-браузерностью и конфликтом скриптов. Это влияет на скорость загрузки страниц.
Проверить валидность сайта можно в validator.w3.org.
Спасибо. Буду знать.
Текст с тенью, классно смотрится, 🙂 спасибо
Класс.. все получилось…спасибо! :yahoo:
Мне тоже нравится. Пожалуйста, Татьяна.
Пожалуйста!Заходите еще.
Блин, толи лыжи не едут толи я…Юрий, будьте добры, объяснить юзеру,
Вот код, которым реализуется текст с тенью:
Bloger-Man.Ru
а вот что получилось у вас:
все что изменилось после внедрения, это добавился спан со стайлом зеленого цвета. А куда девать первый код?? вообще не пойму ничего
Не совсем понял вопрос. Если что то первый код дает красное свечение (ну или любое другое), а второй код для тени. Я в свое время использовал только второй код. На данный момент отказался от этой затеи.
На html игры пишут, а шрифты и подавно получатся ))
Да, за это я html и люблю.