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

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

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

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

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

И так, создаем файл 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. Уже сдал два экзамена, но на какие оценки пока секрет. О них вы узнаете когда я сдам все экзамены. Даже целый пост по этому поводу напишу, так что, подписывайтесь на новости блога, чтобы не пропустить его!

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

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

Добавить в закладки

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

  1. Александр:

    Статья хорошая, что теперь можно блог не перегружать плагином! Но не обижайся, ну вот видео урок в плохом звуком, эту проблему можно только решиться с помощью хорошего микрофона и получай трафик ещё и с youtube. Так что тебе надо сделать инвестиции в микрофон!

  2. Руслан:

    Как вовркмя. я какрас хотел тебе на почту вопрос писать. Спасибо.

  3. Нормально, Андрей… Угловой баннер, это прикольно. Это лучше, чем всплывающее окно.

  4. Со смартфона не получается… заглянуть за «Загляни. Это интересно.» Дома буду только завтра…

  5. Руслан:

    Андрей я посмотрел у тебя.вроде вииндовс семь.стоит и у меня возник такой вопрос как сделать мыщ такой же как у тебя тоесть чтобы она вокруг желтой была. У себя пробовал.менять там все стандартное (виды). Не подскажеш.

    • Если интересно, я могу рассказать как сделать собственную мышь. А в видео она такая из-за программы.

      • Руслан:

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

        • Я кнопку делал без картинки а при помощи кода который бала мне система. А программа эта FastStone Capture

          • Руслан:

            Угарная программа, скачал начился видео записывать, класс.
            Но у меня был маленьо другой вопрос, я про ленту спрашивал, я не могу себе вставить, никак нет её а все делаю как написано.

  6. Руслан:

    Все сделал. Но советую исправить в коде для стилей это — background: url (images/banner.png); на этот backg round: url(«Адрес картинки») no-repeat scroll left top transparent;, а то у меня картинка с твоим кодом просто напросто недоброжелатель, проверил на двух темах.

  7. Арина:

    Спасибо за информацию.Завтра попробую себе установить на сайт. Раньше делала, но эта ленточка, как я ее не регулировала, то есть запись на ней не была видна полностью.

  8. Хороший пост, а главное что полезный особенно для новичков.

  9. Антон:

    Спасибо за статью! Сделал себе такую же ленту .. кому интересно смотрите.

  10. Отличная статья, да ещё и без плагина можно сделать, завтра у себя на блоге такое замучу, спасибо, Андрей.

  11. Алекс:

    Иногда вижу на блогах такие ленты, но не знал, как они делаются. Спасибо, разъяснил. Здорово, не заметить нельзя.

  12. Это же здорово — привлекать внимание вот такой ленточкой, особенно если ещё и надпись привлекательная!
    Ещё одна фишка для привлечения посетителей.
    Спасибо, Андрей!

  13. Дима:

    Статья хорошая, что теперь можно блог не перегружать плагином!

  14. Изначально искала плагин ленточки, а потом подумала, наверника можно и без него обойтись. Эта статья мне в помощь =)
    Завтра буду эксперементировать, спасибо!

  15. Не получается ровно сделать края в фотошопе с помощью лоса. Как прямую линию провести с помощью инструмента лоссо?

Оставить комментарий

Комментаторы блога

Комментируй блог и получи 300 рублей! Подробности тут!

X

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