Баннер с необычной локализацией для сайта

Здравствуйте, дорогие читатели и гости сайта «Тестируем шаблон». Рада нашей новой встрече на блоге.

Сегодня мы поговорим о возможности сделать самостоятельно баннер на сайте с необычной локализацией, то есть вы можете расположить баннер на странице блога в любой ее точке, естественно, чтобы данный баннер не мешал чтению и удобному пребыванию на блоге :good:

Давайте вспомним, для чего же мы используем баннер на блоге?

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

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

или же практически сливаться с фоном:

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

А на фото ниже елочка представляет собой баннер на страницу блога, к которой в связи с новогодними праздниками, я сделала небольшой акцент ;-)

Теперь поговорим непосредственно про HTML код этого баннера. Начнем с HTML кода баннера с самой верхней локализацией.

<div style=»position:fixed; top:50px; right:50px; z-index:999;»>
<noindex><a href=»http://brychewa.ru/novogodnyaya-skazka-vozvrashhenie-chuda/ » target=»_blank»rel=”nofollow”>
<img title=»Конкурс новогодней сказки» alt=»Конкурс новогодней сказки» src=»http://brychewa.ru/wp-content/uploads/2011/09/0_6d4eb_587e88d4_S.png» border=»0″/>
</a></noindex>
</div>

В коде предусмотрительно установлены теги <noindex>, </noindex>, ”nofollow» чтобы ссылка не индексировалась. Очень удобно для кнопки твиттера, когда ссылка идет на чужой ресурс.

Синим выделено место расположение баннера на странице :чем меньше параметры top и right, тем баннер располагается более выше и правее.

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

Розовым выделен текст, который будет виден при наведении на баннер мышкой,

а коричневым выделен адрес картинки, которую вы используете в баннере. Хранить ее лучше на своем сайте, закрепив за какой-нибудь страницей, что облегчает ее поиск  :yes: Как найти адрес изображения показано на фото ниже (адрес выделен синим, кстати не забывайте, что все фото кликабельны для лучшего просмотра)

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

<div style=»position:fixed; top:480px; right:1110px; z-index:999;»>
<noindex><a href=»http://test-shablon.ru/podgotovka-k-novomu-godu-podvodim-itogi/ » target=»_blank»rel=”nofollow”>
<img title=»А ты подготовил сайт к Новому году?» alt=»Follow us on Twitter» src=»http://test-shablon.ru/wp-content/uploads/2012/08/newy203.gif» border=»0″/>
</a></noindex>
</div>

В адресе меняются только показатели top и right, z-index:999 остается без изменений.

Таким образом, вы можете сами выбрать место расположения баннера, использовать картинку сразу определенного небольшого размера (иначе она займет полстраницы..), выбрать что вы будете данным баннером акцентировать (страницу подписки, интересную статью или другой свой сайт). И таких баннеров, как вы поняли, на вашем сайте может быть несколько…Код данного баннера нужно вставлять в сайтбар, но в сайтбаре он, естественно, просматриваться не будет.

Скопировать  образец HTML кода можно из окошечка ниже.

<div style="position:fixed; top:200px; right:10px; z-index:999;">
<noindex><a href="https://twitter.com/brychewa " target="_blank"rel=”nofollow”>
<img title="Follow Us On Twitter" alt="Follow us on Twitter" src="http://4.bp.blogspot.com/-elNCwQpZwR8/Toau7YcGzII/AAAAAAAAGBQ/E8hPQ5uVXWA/s1600/followme_right.png" border="0"/>
</a></noindex>
</div>

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

О других интересный находках мы поговорим в следующих статьях рубрики «Дизайн сайта». До новых встреч, с вами была Юлия.

:heart: Расскажи другу, пусть тоже дизайном займется :good:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • LinkedIn
  • Digg
  • Blogger
  • Блог Li.ру
  • Сто закладок
  • RSS
  • Одноклассники

Об авторе Юлия

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

50 комментариев: Баннер с необычной локализацией для сайта

  1. Тамара пишет:

    Я на то и наделась, что Вы удалите. Просто хотелось получить совет опытного человека. Иной раз и комментарий не одобряешь, когда видно, что он написан только для автора. У меня есть такие. Кто — то по -дружески что — то советует или рассказывает . Если ему было удобно сделать это в комментарии, ну пусть.
    Если напрягла, извините.
    Как книга, открылась?

    • Юлия пишет:

      Я вообщем-то даже не про Вашу ссылку в комменте. ;-) Просто иногда столько информации вижу в чужих комментариях на разных блогах: как-то видела всех перечисленных призеров передачи кубка в комментарии со ссылками на их блоги-и ничего админ не убирает…Видимо это личное дело каждого, а вот плагин Broken Link Checker если у Вас не установлен =установите обязательно. Вам будет намного проще находить и удалять битые ссылки на Вашем блоге… http://test-shablon.ru/plagin-broken-link-checker-dlya-naxozhdeniya-bityx-ssylok/

      • Юлия пишет:

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

  2. Елена пишет:

    Сколько интересных плагинов и «все» хочется установить! Approve Как сильно они нагружают сайт?

    • Юлия пишет:

      Каждый по разному, очень сильно грузят сайт галереи, или те плагины, которые находятся в постоянном мониторинге..Плагины каждый выбирает для себя сам, но вроде до 20 плагинов можно наактивировать ;-)
      Только вот в этой статье я писала как раз не о плагине, а возможности его заменить…

  3. Тамара пишет:

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

    • Юлия пишет:

      Именно это я писала в статье про плагин Broken Link Checker. Я его включаю раз в неделю примерно, проверяю битые ссылки, а потом отключаю.

  4. Андрей пишет:

    Класс! Хотел узнать, как же можно картинку со ссылкой наложить на другую картинку и вот как раз нашел. У Вас прямо склад СУПЕР-КЛАДОВ. Если хочешь что-то сделать интересное, не надо лезть в сеть, надо хорошенько покопаться здесь. (Кстати я искал картинку для банера для Вас…) Roses-are-red

  5. Андрей пишет:

    Опять в СПАМе Sad

  6. Ирина пишет:

    Юля, добрый день. Спасибо Вам за сайт. Очень много полезной информации получаю. :good: Юля, подскажите, пожалуйста, как Вы делаете окошко :unsure: , где вставляете код HTML? Спасибо.

  7. Ирина пишет:

    Спасибо, буду пробовать. THANK-YOU

  8. Наталья пишет:

    С кодом теоретически понятно. Юль, а куда его вписывать то? В какой файл- страницы или еще куда?

  9. Для меня это интересная и полезная статья. Все понятно и доступно. Спасибо.

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

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

[+] Жми на плюс- Открой тайник- Чтоб прикольный СМАЙЛ возник!
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)