Как создать ленточку в углу без плагина и зачем она нужна?

Всем, большущий привет. В этой статье я расскажу вам о том, как создать ленточку в углу блога без помощи плагина с абсолютного нуля. Помню, я уже как-то писал статью на эту тему (вот она) и учил своих читателей создавать такую ленточку. С тех пор прошло много времени, я набрался опыта в этом доле, научился делать ленточку без плагина, и уже сам создал такую ленточку, так что, мне есть о чем вам рассказать.

Многие думают так: зачем мне эта ленточка, от нее нет толку. На самом деле это очень большая ошибка начинающих блоггеров. Дело в том, что большинство посетителей вашего сайта, заходят на него один раз, чтобы прочитать им нужную информацию, а затем закрывают навсегда. Не скажу что это очень плохо, но хорошего тут явно ничего нет. А вот эта ленточка помогает нам блоггером, привлечь внимание маленькой части таких, одноразовых посетителей, и заставить их стать читателями наши блогов. Подробно о том, как это делается, я писал тут.

Как сделать угловой баннер?

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

И так, создаем файл 190*190px и при помощи инструмента «Прямоугольное лассо» выделяем прямоугольную область с обрезанными концами. В помощи вам, картинки расположенные ниже. На первом — создание файла, на втором — выбор инструмента, на третьем — выделение области. Все это делается очень просто, думаю, вы разберетесь.

После того, как вы веселите область, её нужно закрасить, а задний фон убрать. Для этого, не снимая выделения, нажимаем на кнопочку создания нового слоя, расположенную в нижнем правом углу интерфейса. И при помощи кисти начинаем красить выделенную область. В моем случае я выбрал синий цвет.

После этого, выбираем инструмент «Текст» и пишем фразу, типа: «Это интересно» или «Все сюда». В общем, любую по вашему вкусу, которая привлечет внимание. А затем, при помощи комбинации клавиш CTRL+T, поворачиваем (наклоняем) надпись в нужном нам направлении и перемещаем на уже готовый фон ленточки.

После того, как все будет готово, этот файл нужно будет сохранить в формате PNG. Для этого, в верхнем меню, выбираем пункт «Feli» — «Save as…» и в открывшемся окошке выбираем нужный формат. В итоге должно получиться что-то похожее не это:

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

Когда картинка уже готова, нужно загрузить её в интернет, например, сюда: http://mysite.ru/imagis/… Я думаю, вы уже и без меня знаете, как это сделать. Если что, обращайтесь за помощью в комментариях. Так вот, загрузите картинки и запомните ссылку на нее. У меня получилась такая ссылка: http://raskrutkabloga.ru/wp-content/uploads/2013/05/interesno1.png.

(Запись звука в видео получилась не очень, но все равно, если его посмотреть станет все понятно)

После того, как картинка полностью готова и уже загружена в интернет, остается только вывести её именно в правом, верхнем углу экрана на вашем блоге. Для того, чтобы это воплотить, нам понадобятся 2 небольших кода.

Как установить баннер на блог?

Хочу вас предупредить, что данную статью я пишу по аналогии статьи Кирилла Тараненко, у которого недавно брал интервью, поэтому есть у вас что-то не получиться можете под глянуть у него. Чтобы создать такую ленточку мне пришлось немного поменять код, который он предлагал.

В общем смотрите, сначала открываем файл style.css, обычно он расположен по такому пути: wp-content/themes/папка с темой/style.css. В этот файл вставляем такой код:

#topright {
position: fixed;
right: 0px;
top: 0px;
height: 200px;
width: 190px;
background: url (images/banner.png);
z-index:1000;
}

Но вместо текста: images/banner.png нужно указать ссылку на ваше изображение, пример которой я показывал выше.

После того как вы справитесь со стилями нашего баннера, вам понадобится еще один код, который будет выводить саму кнопку (картинку). Этот код нужно вставить сразу после тега <bode> в файл header.php.

<a href="#" target="_blank"><div id="topright"></div></a>

Единственное, что в этом коде нужно поменять: символ # — его мы меняем на ссылку странички, на которую должны попадать при клике. О том, что должно быть расположено на этой страничке я уже писал в статье, ссылку на которую дал выше.

Хочу обратить ваше внимание на то, что я могу сам вам сделать такую кнопку (картинки), абсолютно бесплатно. Подробно об этом я писал в разделе «Услуги». Так что, если будут вопросы или проблемы, я полностью к вашим услугам. :)

P.S. Уже сдал два экзамена, но на какие оценки пока секрет. О них вы узнаете когда я сдам все экзамены. Даже целый пост по этому поводу напишу, так что, подписывайтесь на новости блога, чтобы не пропустить его!

На этом у меня всем. Спасибо что прочитали эту статью до конца, надеюсь, она вам пригодилась, если не трудно, нажмите на соц. кнопочки, которые расположены ниже, пожалуйста. А пока вы ждете мою следующую статью, я рекомендую вам прочитать статью о том, как делается проверка релевантности или про видеокурс реактивный блог. Все, теперь точно пока :)

С уважением, Степан!
Все статьи