Баннер для дизайна

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

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

Первая функция -это баннер переход на другой ваш ресурс. На картинке видно как в сайтбаре установлены два баннера перехода на два других сайта. Существуют сервисы для генерации подобных баннеров, но лишняя внешняя ссылка, да еще и не на собственный ресурс нам, я думаю не к чему. Wink

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

Плагин Most Commented Posts выводит самые комментируемые статьи за определенный период времени с картинками, но почему-то с моим шаблоном данный плагин не работал, скорее всего его для настройки нужен шаблон устанавливающий миниатюры записей.(Кстати это я проверю. Who-s-the-man)

Плагин Most Popular Posts выводит в виджете самые комментируемые статьи из  всех или из одной какой-либо рубрики по выбору, но картинок при этом в виджете нет.

Плагин IGIT Posts Slider Widget. Данный плагин выводит в сайтбаре виджет-ползунок, очень интересная и оригинальная идея для блога.

Плагин  WordPress Content Slide. Данный плагин настраивает простейший слайдер на сайте. Но,чтобы установить слайдер на блог, нужно зайти в Редактор шаблона для вставки определенного кода.

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

Несколько схожая ситуация, если вам делают баннер на заказ. Меня всегда смущала ситуация, что адрес картинки моего баннера находится на другом сайте и в любое время может просто «закрыться» в маленький нерабочий квадратик…

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

У меня в сайтбар выведено четыре популярные статьи.При подведении мышкой к любой из картинок появляется название поста.

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

А ниже можно посмотреть HTML код данного баннера. Я взяла его за образец и, можно  сказать, за шаблон.

<center><a href=»http://pochemuchka2011.ru/» target=_blank><img src=»http://s018.radikal.ru/i506/1201/13/edf1a2195fc3.gif» border=»0″ title=»Почемучка» width=410 height=60></a></center>

Теперь для удобства я выделю определенные участки кода разным цветом:

<center><a href=»http://pochemuchka2011.ru/» target=_blank><img src=»http://s018.radikal.ru/i506/1201/13/edf1a2195fc3.gif» border=»0″ title=»Почемучка» width=410 height=60></a></center>

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

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

URS ссылки и есть адрес картинки.

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

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

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

<center><a href=»http://test-shablon.ru/» target=_blank><img src=»http://test-shablon.ru/wp-content/uploads/2012/08/Kollash1.jpg» border=»0″ title=»Тестируем шаблон» width=240 height=240></a></center>

А выглядит он так:

Еще для примера один код, уже перехода не на другой сайт, а на конкретную статью на том же самом сайте «Такая разная любовь»
<center><a href=»http://brychewa.ru/slyozy-lyubvi/» target=_blank><img src=»http://brychewa.ru/wp-content/uploads/2012/03/269186.jpeg» border=»0″ title=»Слезы любви.Из рубрики Мои стихи» width=240 height=190></a></center>
А внешне он выглядит так(правда уже без активной ссылки)

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

<center><a href="http://brychewa.ru/" target="_blank"><img title="Заходи на мой  блог  Такая разная любовь" alt="" src="http://test-shablon.ru/wp-content/uploads/2012/08/edf1a2195fc3.gif" width="480" height="60" border="0" /></a></center>

Если что-то не получится загляните на страничку «Важно».

P.S. Когда я устанавливала баннеры на статьи, я делала один под другим, только картинки делала достаточно крупные..Если хотите, чтобы картинки встали рядом, попробуйте ВОКРУГ кодов баннеров вместо <center></center> (если они есть) вставлять <left></left> и <right></right> чередуя. Указывая <left> впереди и сзади кода-баннер встанет слева, <right>-встанет справа.Только именно около кода надо поставить впереди и сзади эти теги.

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

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

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

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

22 комментария: Баннер для дизайна

  1. Любовь пишет:

    Юля, прочитала, очень интересно. Завтра с утра уезжаю на месяц, там компьютера не будет. Когда приеду, у тебя будет еще много интересного. Буду изучать Bye

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

    Я и баннер хочу сделать ! С этим тоже буду работать. Хочу и на отдельные статьи баннера. Эх! Где найти время!!!

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

    Такс… все на банера… я себе сделала кнопку для второго сайта. Но вот на страничку, пожалуй нужно. Была такая задумка уже, но руки не доходят. Пока по описанию не все понятно. Думаю, что разберусь, когда начну делать. Осталось за малым- нарисовать картинку в ФШ.

  4. Ольга пишет:

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

    • Юлия пишет:

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

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

    Юлия! У Вас замечательный сайт. Взяла в закладки. У меня вопро-как в банере рядом расположить два блога картинок, например. У меня получается одна за другой, остается место свободное а в длину много места занимает. Очень жду ответа. Спасибо

    • Юлия пишет:

      Людмила, я устанавливала баннеры на статьи, я делала один под другим, только картинки были покрупнее.Если хотите, чтобы картинки встали рядом, попробуйте ВОКРУГ кодов баннеров установить теги. Смотрите Постскриптум в статье. (В комментарии теги не просматриваются).

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

    Юля, огромное спасибо. Все получилось, оказывается я невнимательная. Буду постоянно к Вам заходить. Теперь решаю такой вопро: как продублировать меню, которое вверху на сайте, чтобы отображалась внизу еще? Ищу везде, пока не нашла. Может у Вас есть подсказка?

    • Юлия пишет:

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

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

        Юлия, дубляж нужен для поисковиков. Мне делали анализ блога и я купила курс Борисова везде они рекомендуют, что внизу должно меню как и в верху. А как сделать так и не нашла? Так что эту проблему хочу решить.
        Еще не подскажите-у меня выводится статья, и автор статьи идет активной ссылкой под заголовком, как это можно убрать? А у Вас очень здорово, буду пользоваться Вашими советами и рецептами. Хочу многое у Вас почерпнуть.

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

    Чегой-то я намудрила с размерами, но все равно что-то получилось.
    Учительница! Оцени! Congratulations

    • Юлия пишет:

      Леночка, с размером ты и правда намудрила…Это в предыдущем шаблоне картинка уменьшалась сама до размера сайдбара, а здесь приходится устанавливать картинку в баннер точно по размеру сайдбара…

    • Юлия пишет:

      Но все равно молодец! Москва не сразу строилась-))

  8. Irina пишет:

    Я уже благодаря твоей статье научилась баннер делать. Правда сделала не для себя!
    Очень хорошо все объясняешь!

  9. Представляешь, Юлечка! А у меня несколько дней назад вдруг из виджетов исчезли все-все баннеры. Amazed Исчезли и больше не появились. Weary У тебя такое бывало? Who-s-the-man
    Теперь опять беру эту статью в закладки и буду баннеры ваять. iPad

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

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

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