Всем, большущий привет. В этой статье я расскажу вам о том, как создать ленточку в углу блога без помощи плагина с абсолютного нуля. Помню, я уже как-то писал статью на эту тему (вот она) и учил своих читателей создавать такую ленточку. С тех пор прошло много времени, я набрался опыта в этом доле, научился делать ленточку без плагина, и уже сам создал такую ленточку, так что, мне есть о чем вам рассказать.
Многие думают так: зачем мне эта ленточка, от нее нет толку. На самом деле это очень большая ошибка начинающих блоггеров. Дело в том, что большинство посетителей вашего сайта, заходят на него один раз, чтобы прочитать им нужную информацию, а затем закрывают навсегда. Не скажу что это очень плохо, но хорошего тут явно ничего нет. А вот эта ленточка помогает нам блоггером, привлечь внимание маленькой части таких, одноразовых посетителей, и заставить их стать читателями наши блогов. Подробно о том, как это делается, я писал тут.
Как сделать угловой баннер?
Как обычно, первым делом, перед созданием картинки, а начнем мы именно с создания картинки, нужно открыть фотошоп. Как я уже говорил раньше, я пользуюсь второй версией этой программы, и все действия буду показывать на ее примере. Если у вас другая версия, не бойтесь, весь фотошоп очень похож.
И так, создаем файл 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. Уже сдал два экзамена, но на какие оценки пока секрет. О них вы узнаете когда я сдам все экзамены. Даже целый пост по этому поводу напишу, так что, подписывайтесь на новости блога, чтобы не пропустить его!
На этом у меня всем. Спасибо что прочитали эту статью до конца, надеюсь, она вам пригодилась, если не трудно, нажмите на соц. кнопочки, которые расположены ниже, пожалуйста. А пока вы ждете мою следующую статью, я рекомендую вам прочитать статью о том, как делается проверка релевантности или про видеокурс реактивный блог. Все, теперь точно пока :)
С уважением, Степан!
Все статьи
Статья хорошая, что теперь можно блог не перегружать плагином! Но не обижайся, ну вот видео урок в плохом звуком, эту проблему можно только решиться с помощью хорошего микрофона и получай трафик ещё и с youtube. Так что тебе надо сделать инвестиции в микрофон!
Я микрофон как раз новый и опробовал. Вот только записывал поздно и говорил тихо, и как видно еще и дышал в него.
Как вовркмя. я какрас хотел тебе на почту вопрос писать. Спасибо.
Нормально, Андрей… Угловой баннер, это прикольно. Это лучше, чем всплывающее окно.
А если не ленточку делать, а такую яркую желто-красную «кляксу» (не знаю как её назвать) с надписью, технология её изготовления ведь не изменится из-за вида картинки?
Нет. Просто рисунок нужно сделать другой.
Со смартфона не получается… заглянуть за «Загляни. Это интересно.» Дома буду только завтра…
Андрей я посмотрел у тебя.вроде вииндовс семь.стоит и у меня возник такой вопрос как сделать мыщ такой же как у тебя тоесть чтобы она вокруг желтой была. У себя пробовал.менять там все стандартное (виды). Не подскажеш.
Если интересно, я могу рассказать как сделать собственную мышь. А в видео она такая из-за программы.
Да нет спасибо не надо, я думал это всегда такая мышь, а оказывается только в программе. А программа как я понял это камтазия?
Насчет этой кнопки которая у себя в углу я у себя похожую сделал но её нет , такой вопрос картинку надо загружать на хостинг или можно через админ ку, я через админ ку загружал, и не появилась. Помоги.
Я кнопку делал без картинки а при помощи кода который бала мне система. А программа эта FastStone Capture
Угарная программа, скачал начился видео записывать, класс.
Но у меня был маленьо другой вопрос, я про ленту спрашивал, я не могу себе вставить, никак нет её а все делаю как написано.
Все сделал. Но советую исправить в коде для стилей это — background: url (images/banner.png); на этот backg round: url(«Адрес картинки») no-repeat scroll left top transparent;, а то у меня картинка с твоим кодом просто напросто недоброжелатель, проверил на двух темах.
А вот у меня, с моим кодом, получилось. Ток что оставлю как есть.
Спасибо за информацию.Завтра попробую себе установить на сайт. Раньше делала, но эта ленточка, как я ее не регулировала, то есть запись на ней не была видна полностью.
Хороший пост, а главное что полезный особенно для новичков.
Спасибо за статью! Сделал себе такую же ленту .. кому интересно смотрите.
Отличная статья, да ещё и без плагина можно сделать, завтра у себя на блоге такое замучу, спасибо, Андрей.
Иногда вижу на блогах такие ленты, но не знал, как они делаются. Спасибо, разъяснил. Здорово, не заметить нельзя.
Это же здорово — привлекать внимание вот такой ленточкой, особенно если ещё и надпись привлекательная!
Ещё одна фишка для привлечения посетителей.
Спасибо, Андрей!
Статья хорошая, что теперь можно блог не перегружать плагином!
Изначально искала плагин ленточки, а потом подумала, наверника можно и без него обойтись. Эта статья мне в помощь =)
Завтра буду эксперементировать, спасибо!
Не получается ровно сделать края в фотошопе с помощью лоса. Как прямую линию провести с помощью инструмента лоссо?