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

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

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

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

Вот для этого — то и нужна такая ленточка. Поэтому давайте приступим к её установке.

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

И для начала комбинацией клавиш ctrl + N создаем новый файл размером около 120 на 120 px. Можно больше, можно меньше, смотря что вы хотите получить.

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

И её нужно закрасить, для этого создаем новый слой, комбинацией клавиш ctrl + shift + n, берем кисть, выбираем нужный цвет и закрашиваем. После того как закрасили убираем выделение, нажав ctrl + D.

Теперь осталось написать надпись, для этого берем инструмент текст, пишем что — нибудь, типа (это интересно, вам сюда нужно) и тому подобное, и комбинацией клавиш ctrl + T поворачиваем текст, по ленточке.

Можно придать стили этому тексту, нажав два раза на слой, например обводку и тень. Так же нужно удалить белый фон, для этого просто выберите его и нажмите Delete.

Ленточка в фотошопе готова

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

Теперь остается вывести это изображение на блоге в углу.

Для начала открываем файл style.css и в него в самый конец вставляем код, который предоставлен ниже.

#akcia { position: fixed; right: 10px; top: 40px;

}

Затем открываем файл headeer.php и туда вставляем вот такой код:

<a title=»Участвуй в наших Акциях» href=»http://mich-live.ru/konkursy» target=»_blank»><img title=»Участвуй в наших Акциях» alt=»Участвуй в наших Акциях» src=»http://mich-live.ru/wp-content/uploads/2013/07/akcia.png» /></a>

Ссылку на изображение и ссылку на страницу, которая будет открываться после нажатия на ленточку ставим свои.

И теперь все готово можете смотреть.

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

А на этом. Все всем пока.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Оставьте мне собщение