Блок рекламы с использованием CSS.

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

В каких случаях это можно применить? Вариантов достаточно много. В конкретном примере я просто указала статью, на которую хотела обратить внимание. Можно сделать логотип вашего блога или вывести таким образом страницу обо мне, контакты.

Располагайте его где угодно. На боковой панели или под шапкой блога. В последнем  случае он будет выглядеть вот так

блок рекламы с CSS

Это даст возможность установить не одну рекламу, а две или три. Всё зависит от желания и ширины шаблона. 

Давайте уже приступим к установке. Для начала вам необходимо скопировать следующий код CSS/

<style>.lihat {width: 230px;height: 200px; margin: 5px;float: left;border: 10px solid #eee;overflow: hidden;position: relative;text-align: center;box-shadow: 1px 1px 2px #999;cursor: default;} .lihat .masker,.lihat .content {width: 230px;height: 200px;position: absolute;overflow: hidden;top: 0;left: 0;} .lihat img { display: block;position: relative;} .lihat h2 {text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(255, 0, 0, 0.5);margin: 20px 0 0 0;font-family: Verdana;} .lihat p {font-family: verdana;font-size: 12px;position: relative;color: #fff;padding: 0 20px 0 20px;text-align: center;line-height: 20px;} .lihat a.informasi {display: inline-block;text-decoration: none;padding: 7px 14px;color: #fff;text-transform: uppercase;box-shadow: 0 0 1px #000;font-family: "Courier New", Courier, monospace;background-color: #2788C2;} .lihat a.info: hover {box-shadow: 0 0 5px #000;} .pasang-iklan img {transition: all 0.2s linear;} .pasang-iklan .masker {opacity: 0;background-color: rgba(0,0,0, 0.7);transition: all 0.4s ease-in-out;} .pasang-iklan h2 {transform: translateY(-100px);opacity: 0;transition: all 0.2s ease-in-out;} .pasang-iklan p {transform: translateY(100px);opacity: 0;transition: all 0.2s linear;} .pasang-iklan:hover img {transform: scale(1.1,1.1);} .pasang-iklan a.informasi {opacity: 0; transition: all 0.2s ease-in-out;} .pasang-iklan:hover .masker {opacity: 1;} .pasang-iklan:hover h2, .pasang-iklan:hover p, .pasang-iklan:hover a.informasi {opacity: 1;transform: translateY(0px);} .pasang-iklan:hover p {transition-delay: 0.1s;} .pasang-iklan:hover a.informasi { transition-delay: 0.2s;}</style>

Лучше всего разместите его пока у себя в блокноте или черновике. Необходимо будет сделать небольшие изменения. Возможно придётся поменять некоторые значения ширины
width: 230px;. Это будет зависеть от ширины боковой колонки. Посмотрите её в разделе шаблон - настроить. Ну и с цветом поиграться.

Это код HTML.

<div class="lihat pasang-iklan">
<img alt="space iklan blogspot dengan CSS3" src="http://s013.radikal.ru/i324/1405/c5/666f1613edfc.jpg" title="space iklan blogspot dengan CSS3"/>
<div class="masker">
<h2>гаджет над шапкой блога</h2>
<p>Нам просто надо будет добавить новый гаджет выше шапки.
...</p>
<a href="http://hpargallka.blogspot.ru/2014/05/gadzhet-nad-shapkoj-bloga.html" class="informasi" target="_blank" rel="nofollow" title="гаджет над шапкой">дальше</a>
</div>
</div>

Так же сделайте всё сначала в черновике. Разберём, что тут нужно изменить.
Красным адрес картинки до наведения курсора. Обращаю внимание, что её размер должен совпадать с тем , который мы задали в первом коде.Вот эти параметры width: 230px;height: 200px;
Синим-название баннера.
Зелёным-адрес страницы куда идёт переход.
Тitle гаджет над шапкой и дальше замените на своё.

Оба готовых кода устанавливайте в гаджет HTML/JavaScript.

Вот и всё. Если есть желание установить несколько блоков рекламы под шапкой блога , то в гаджете вставьте второй такой же код, естественно с другими значениями. И не говорите мне, что у вас это не получится сделать. Поверьте, что тут больше расписала для вашего удобства. А справитесь вы с этим гораздо быстрее. Если что-то не получается, спрашивайте. Разберёмся.



оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

3 комментария:

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

    ОтветитьУдалить
  2. Иван, у меня активные ссылки иногда сливаются. Нажми на -этой ссылке- и попадёшь на демо.

    ОтветитьУдалить
  3. Все нашел. Очень классно выглядит.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo