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

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

Сегодня мы поговорим о возможности сделать самостоятельно баннер на сайте с необычной локализацией, то есть вы можете расположить баннер на странице блога в любой ее точке, естественно, чтобы данный баннер не мешал чтению и удобному пребыванию на блоге :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. Анатолий. пишет:

    спасибо, Юля! ты так здорово во всем теперь разбираешься, можно к тебе за любым советом идти!

  2. Ксения Юрьевна пишет:

    Это, Юлечка, уже высший пилотаж, мне пока такое недоступно, И даже нет времени на освоение такой методики, может быть когда-то в дальнейшем.
    Но это на самом деле замечательно. Вы молодец, твит+гугл с коммент.

    • Юлия пишет:

      На самом деле все очень просто, просто скопировать образец и внести свои данные: вот и готов эксклюзивный баннер для блога Happy

  3. Наташа пишет:

    Cпасибо ,за предоставленный материал !

  4. Irina пишет:

    Юльчик! Я давно мечтаю сама сделать баннер. Обязательно попробую под твоим руководящим началом что-то сотворить!

  5. mrs.interesno пишет:

    Юля, ну ты к Новому году готова по полной программе. :yes:
    И акценты у тебя, где надо!
    Кстати, очень хорошая идея вынести баннеры за пределы сайтбара.
    У тебя это сделано великолепно. :good:

  6. Анна пишет:

    Юлия, здравствуйте! Не перестаю Вами восхищаться! Princess Столько новых интересных идей Вы нам предлагаете. Не успеваем за Вами всё перерабатывать и применять. Огромное Вам спасибо за Ваш труд и за то, что так щедро делитесь с нами своими находками и удачами! Approve Дай бог Вам счастья и здоровья! All-I-See-is-Love

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

    Есть у меня задумка куда эту чуду применить. Юлечка! Ты волшебница по украшению блога

  8. Олег пишет:

    Вот тут спасибо за идейку:)

  9. Олег пишет:

    Пошел вставлять на свой сайт:)

  10. Tina пишет:

    Все сделала по описанию,хотела пристроить ссылочку на твиттер. картинка отобразилась, активная, но ссылка почему-то не работает, хотя адрес твиттера копировала из браузера. И еще подскажите, Юля, куда пристроить виджет текст в сайдбаре, у меня запрашивает какую колонку отображать 1 или 2 или оставить неактивной.Очень актуально узнать ответ :bye:

    • Юлия пишет:

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

  11. Людмила пишет:

    Спасибо большое! Хочется украсить мой скромный блог к Новому году, попробую разобраться, вдруг да получится

  12. Прикольно, интересно. Возможно, когда-то и я поиграюсь. Столько примочек разных на блоге, задерживают надолго. :good:

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

    Юлечка! Зацени мою первую робкую попытку сделать баннер

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

    Не знаю почему, но я баннер вижу, а муж со своего компа и из хрома не видит!

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

    А у меня что — то непонятное с твиттером с кнопкой «общайтесь со мной в твиттере». Открывается самое начало, когда я зарегистрировалась. Как обновить? Happy

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

    Юлия! Спасибо за тест. Видимо, я вхожу со своего сайта, поэтому вижу самое начало. Хотя… не знаю, почему. :unsure: У Вас такая прикольная девочка появляется. Мне сказали убрать вс

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

    Нажала не ту кнопочку, наверное. Так у меня бывает :-)

    • Юлия пишет:

      Тамара, Вы пробовали с другого браузера заходить, когда не авторизируетесь на блоге? Тогда Вам должно все правильно показать…

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

    Похоже, всё наладилось. Спасибо. :yes:

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

    Какой снежок прикольный от курсора идёт. вообще у Вас празднично как -то.

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

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

    • Юлия пишет:

      Тамара, скорее всего Вы пишите о спаме, но ведь у нормальных комментаторов и имя как правило есть и ссылка на сайт не битая. А ссылки в самом комментарии нужно удалять, это уже без обид ;-)

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

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

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