Фиксирования кнопка “Акции” для блога
Заметки по CSS

Фиксирования кнопка “Акции” для блога

На блоге я публиковал Отгибающийся уголок на сайте – без плагина, но мне постоянно приходят письма с просьбой рассказать как я реализовал на нашем блоге кнопку “Акция” в правом верхнем углу.

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

1. Вставляем кнопку в шапку блога

Вставляем данный код в ваш шаблон, например в header.php

<div id="akcia">
<a href="ссылка" title="Участвуй в наших Акциях" target="_blank"><img src="ссылка на картинку" alt="Участвуй в наших Акциях" title="Участвуй в наших Акциях"></a>
</div>

В коде надо вставить ссылку на страницу и указать ссылку на картинку с кнопкой.

2. Добавление стилей CSS для кнопки

Теперь добавляем в стили css свойства для нашей кнопки:

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

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

Вот и все, как ведите ничего сложного.

Новые посты

Генератор CSS 3.0 Maker – создание css стилей

Гордеев Игорь

Красивые градиентные кнопки на CSS3 для всех браузеров

Гордеев Игорь

Что такое CSS

Гордеев Игорь

5 комментариев

Андрей Челноков 13.04.2013 / 21:38

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

Ответить
Геннадий Васильев 14.04.2013 / 07:35

Придумано очень правильно. Техническая возможность позволяет а значит и кнопочку надо установить.

Ответить
TOPMAN 14.04.2013 / 11:43

Приветствую! Спасибо за подсказку, при необходимости воспользуюсь))

Ответить
Mihanikus 16.04.2013 / 14:29

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

Ответить
Вячеслав 13.05.2013 / 17:08

Спасибо за урок! Надо будет только не кнопку акции, а кнопку “для новых читателей”!

Ответить

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