Как украсить заголовки постов + 1й Конкурс на Bloger-Man.Ru

как_читать_заголовки_английских_газет-2

Приветствую Всех на 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; &lt;br /&gt;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 рублей между прочим). Ольга в качестве платных услуг предлагает анализ молодых блогов по различным критериям. Подробнее об этом анализе можно узнать на ее блоге здесь. Надеюсь, что полученные данные по анализу моего бложика помогут мне двигаться дальше в правильном направлении.

А новостей на сегодня  больше нет :-)  Пишите в комментариях — что Вы думаете по всему этому безобразию. Без внимания комментарии не останутся. Ну а наиболее активные товарищи в конце месяца получат по заслугам.

© Юрий Дуболазов

Luxury 2 Bed Blvd Crescent 1 Type 03 Downtown Dubai - mlsae.com

1 Bedroom in Burj Vista 2 Type 02 In Downtown - mlsae.com

2 Bedroom in Burj Vista 2 Type 04 In Downtown - mlsae.com

Оцените, пожалуйста, статью
Ужасная статьяПлохая статьяПойдетХорошая статьяОтличная статья (6 голосов, оценка: 5,00 из 5)
Загрузка...

Юрий Дуболазов

Приветствую Вас! Я обычный человек из обычного города, обычной страны. На страницах своего блога я буду делится с вами тем что в первую очередь интересно мне - заработоке с помощью блога и социальных сетей, информацией о жизни блогосферы, о нашем сообществе "Блогеры круглого стола" и конечно же о всяких полезностях и моем родном городе Харькове.

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

43 комментария

по хронологии
по рейтингу сначала новые по хронологии
Александр

Вовремя статья попалась =) Я тоже хотел себе подредактировать заголовки, постараюсь как нибудь выделить время и поэкпериментировать, благо не придется теперь рыть просторы интернета.))

Автор
Юрий Дуболазов http://bloger-man.ru

Александр, рад что статья Вам помогла.

Даниил Привольнов http://tripandme.ru

Конкурс это всегда хорошо, конкурс комментариев уже не так хорошо :hihi: , поскольку приелся, но тоже неплохо. По поводу ярких заголовком, то я придерживаюсь строго стиля (просто чтобы шрифт нравился). Но зато мне очень нравится ваш шрифт в основном тексте и как реализована ветка комментариев.

Комментаторов все равно нужно поощрять. Люди стараются, пишут. Поведенческий фактор улучшают, поэтому пусть и небольшой презент, но все равно всегда приятно :yes:

Даниил Привольнов http://tripandme.ru

С этим трудно поспорить :mail: А я вот всё мозгую какой-нибудь оригинальный конкурс, который бы повышал поведенческие факторы, но пока не озарило :play:

Автор
Юрий Дуболазов http://bloger-man.ru

Да,шрифт мне тоже понравился сразу. Поэтому и оставил.

А у Ольги как раз с озарением все в порядке и прошлый месяц это показал.

Азик http://azikonya.com

Оригинально выглядит заголовок!)) Очень красиво смотрится!

То, что теперь есть конкурс - супер!)

Буду участвовать!!!)

Автор
Юрий Дуболазов http://bloger-man.ru

Азик, думаю 1 место занять для тебя будет не сложно. Я уже в этом убедился :play:

Азик http://Azikonya.com

Ну, Юрий, смайлик просто моя копия!)))

Именно так я и пишу комментарии))

Автор
Юрий Дуболазов http://bloger-man.ru

Да, за тобой трудно угнаться.

Главное не переборщить с эффектами, а то будет выглядеть слишком аляписто, что для бизнес блогов не очень красиво. Бывает такие красочные блоги встречаешь.

P.S.Ура, конкурс!!! Попробуем :-)

Автор
Юрий Дуболазов http://bloger-man.ru

Ольга, постараюсь не переборщить. Хотя конечно у каждого свое чувство стиля.

Анализ получил. Большое спасибо. Буду работать над ошибками.

Юрий http://www.yura-blog.ru/

Да, стилями можно сделать что угодно, а если с CSS3, то там еще больше всяких эффектов, вплоть до анимации. Кстати, тень в заголовке слишком уж сдвинута, накладывается на буквы, 1-2 пиксела сдвига хватило бы. А так - можно найти применение такому эффекту, чего же отказываться, если есть такая возможность :-)

Автор
Юрий Дуболазов http://bloger-man.ru

Там как раз один пиксель смещения и 6 размытия сделал (было 3).

Валентин http://itis-life.ru/

С заголовками крутая тема! А с конкурсом еще лучше!

Валентин http://itis-life.ru/

Я от тоже планирую планирую но все никак не запущу...

Автор
Юрий Дуболазов http://bloger-man.ru

Попробуй. Польза для блога от проведения конкурса должна быть.

Андрей

Да интересно. Надо будет попробовать, спасибо за подробное объяснение.

Автор
Юрий Дуболазов http://bloger-man.ru

Андрей, спасибо, что зашли. Рад, что информация пригодилась.

Наталья http://photoshop-i-ya.ru/

Отличные эффекты. Но я пока не хочу трогать свои- до сих пор не выйду из январского коллапса.. Как только до конца решится проблема, буду думать.

Автор
Юрий Дуболазов http://bloger-man.ru

Стесняюсь спросить, Наталья, а что произошло в январе?

Наталья http://photoshop-i-ya.ru/

Таки после троллинга начала убирать двойные заголовки в статьях (по 50 штук в день в течение недели) и пришел полный капец... Сайт стал недоступен. Теперь, даже при том, что перешла на тариф выше, до сих пор нагрузка превышает норму и сайт постоянно недоступен - иногда пару минут, иногда пару часов... Поддержка ничего сделать не может. И это при посещаемости всего 300 и 100 человек (естественно упала с 500 т.к. постоянно сбои)

Автор
Юрий Дуболазов http://bloger-man.ru

А что такое двойные заголовки? И зачем Вы их убирали? Может они у меня тоже имеются?

Наталья http://photoshop-i-ya.ru/

Юрий, это когда название статьи H1 такое же, как и h2 уже в самой статье. Говорят, что так нельзя делать и что они должны различаться. Я тогда просто убирала h2

Автор
Юрий Дуболазов http://bloger-man.ru

А, понятно. У меня в таком случае этой проблемы нет. В самой статье в подзаголовках я использую h4.

Наталья http://photoshop-i-ya.ru/

Дело не в "h", а в том, что бы они не дублировали друг друга.

Александр Рус http://myworkpro.ru

Классно получается, надо взять себе на вооружение. И никаких плагинов и код простой!!!

Автор
Юрий Дуболазов http://bloger-man.ru

Да, достаточно просто. Заголовки в таком виде мне больше нравятся чем в стандартном.

Александр Рус http://myworkpro.ru

В записях себе такой стиль оформления сделал. Смотрится теперь куда отчетливее и приятнее.

Автор
Юрий Дуболазов http://bloger-man.ru

Посмотрел - красивее и правда. Можно еще тегом center выровнять для разнообразия.

Анжелика http://delaisaity.ru

Спасибо, Юрий!

А вот тег center с недавних пор стал невалидным. Теперь его использовать не рекомендуется в самом валидаторе. Нужно заменять его на значение ай ди text-align: center, тогда такие css украшения пройдут тест на валидность.

Всем успехов и красивых сайтов!

Автор
Юрий Дуболазов http://bloger-man.ru

Анжелика, а чем опасен невалидный код? Я просто не в курсе.

Спасибо!

Анжелика http://delaisaity.ru

Все языки программирования имеют свои правила написания, и несоблюдение их чревато некорректным отображением в различных браузерах, т.е. некросс-браузерностью и конфликтом скриптов. Это влияет на скорость загрузки страниц.

Проверить валидность сайта можно в validator.w3.org.

Автор
Юрий Дуболазов http://bloger-man.ru

Спасибо. Буду знать.

Александр Рус http://myworkpro.ru

Да, так лучше. В стандартном заголовок плохо выделяется.

Татьяна http://kirhesner.ru/

Текст с тенью, классно смотрится, :-) спасибо

Автор
Юрий Дуболазов http://bloger-man.ru

Мне тоже нравится. Пожалуйста, Татьяна.

Андрей http://nachnivsesnachalo.ru/psixologiya-zdorovya/kak-izbavitsya-ot-chuvstva-razdrazheniya

Класс.. все получилось...спасибо! :yahoo:

Автор
Юрий Дуболазов http://bloger-man.ru

Пожалуйста!Заходите еще.

Виталий Охрименко

Блин, толи лыжи не едут толи я...Юрий, будьте добры, объяснить юзеру,

Вот код, которым реализуется текст с тенью:

Bloger-Man.Ru

а вот что получилось у вас:

все что изменилось после внедрения, это добавился спан со стайлом зеленого цвета. А куда девать первый код?? вообще не пойму ничего

Автор
Юрий Дуболазов http://bloger-man.ru

Не совсем понял вопрос. Если что то первый код дает красное свечение (ну или любое другое), а второй код для тени. Я в свое время использовал только второй код. На данный момент отказался от этой затеи.

NI4KA http://ni4ka.ru/

На html игры пишут, а шрифты и подавно получатся ))

Автор
Юрий Дуболазов http://bloger-man.ru

Да, за это я html и люблю.