Картинки для дизайна: делаем всплывающую надпись

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

Сегодня продолжим тему разговора о картинках на блоге и как сделать, чтобы каждая из них была не просто красивой, но и информативной :mail:

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

Рассмотрим HTML-код понравившейся картинки

<a target=»_blank» href=»http://smayliki.ru/smilie-457480647.html«><img src=»http://s4.rimg.info/76f7822532939a391e860945cedb95dc.gif» ></a>

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

Если мы удалим первую часть кода, а точнее участок выделенный розовым, то получим картинку без активной ссылки в сайтбаре или в тексте поста.

<a target=»_blank» href=»http://smayliki.ru/smilie-457480647.html»><img src=»http://s4.rimg.info/76f7822532939a391e860945cedb95dc.gif» ></a>

Чтобы картинка вставала ровно по центру не забывайте в начале и конце кода добавлять  <center>

Но бывает, что понравившаяся картинка не помещается по размеру в параметры сайтбара, как например вот такая выбранная картинка:

Вот так она смотрится в сайтбаре шаблона Graphene (фото ниже):не помещается в сайтбар, вылезая за края.

И так она смотрится в сайтбаре шаблона Weaver II версия 1.1.4. Данный шаблон оснащен функцией любую по размерам картинку оформлять в размеры сайтбара.

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

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

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

 

 

 

Теперь берем за основу имеющийся баннер. Внешне он выглядит так:

HTML-код :
<center><a href=»http://brychewa.ru/» target=_blank><img src=»http://test-shablon.ru/wp-content/uploads/2012/08/edf1a2195fc3.gif» border=»0″ title=»Заходи на мой  блог  Такая разная любовь» width=450 height=60></a></center>
Делаем баннер для своего блога в HTML-редакторе. Адрес своей картинки вставляем в место выделенное красным, выделенное синим удаляем (это активная ссылка),  размеры видны, делаете согласно размерам сайтбара, или какие нужны для статьи. Вместо моей надписи на русском пишите текст, который будет виден при наведении на картинку мышкой.
Скопировать HTML-код можно в окошечке ниже:

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

Вот такая  картинка с появляющейся надписью при наведении мышкой у меня получилась, я ее установила в футере сайта и теперь каждый наведя на нее мышкой,  может прочитать текст ;-)

ее  HTML-код следующий 
<center><img title=»Буду рада видеть Вас вновь в гостях До новых встреч» src=»http://test-shablon.ru/wp-content/uploads/2012/08/b1c123622493f01ba8fc3652cc332560.gif» alt=»» width=»378″ height=»62″ border=»0″ /></center>

Код листиков можно скопировать также из окошечка ниже:

<center><img title="Буду рада видеть Вас вновь в гостях До новых встреч" src="http://test-shablon.ru/wp-content/uploads/2012/08/b1c123622493f01ba8fc3652cc332560.gif" alt="" width="378" height="62" border="0" /></center>

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

Теперь такая картинка  находится у меня на самом видном месте в сайтбаре.
А мартышка с бабочкой в виджете с подпиской
 
А вот такая замечательная девушка встречает читателей на моем блоге «Почемучка».
Кстати HTML-код этой картинки очень короткий, но имеется возможность вставить нужный текст:
<center><img src=»http://test-shablon.ru/wp-content/uploads/2012/08/063.gif»
title=»Добро пожаловать на Почемучку»
border=»0″></a><br><center>
Синим выделен адрес картинки на блоге, красным между ковычками необходимый текст. Берите за основу и пробуйте  ;-) А для того чтобы все безупречно работало загляните на страничку «Важно».

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

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

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

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

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

24 комментария: Картинки для дизайна: делаем всплывающую надпись

  1. Стефания пишет:

    Боже мой, сколько полезной нужной информации!
    Мне всегда хотелось иметь вот такие анимашки у себя в блоге…
    Вы абсолютно правы — именно всякие приятные глазу мелочи придают особою атмосферу блогу, создают в нём уют уют!
    Спасибо за массу полезной информации! THANK-YOU

    • Юлия пишет:

      Надеюсь, что кто-то ею все же воспользуется Wink

      • Стефания пишет:

        Даже не сомневайтесь, обязательно воспользуются! Heart

        Лично я очень рада, что Вы завели такой полезный сайт!
        Теперь я точно знаю куда нужно идти за знаниями и консультацией, если вдруг займусь блоговедением и обустройством блога!

  2. Виктория пишет:

    Юля, спасибо Вам. Вы очень подробно и пончтно все описываете. Мне нравятся тоже анимашки, надо будет попробовать. :-)

  3. Евгения пишет:

    Юлия, зашла на ваш блог и была поражена обилием полезной информации.
    До этого не понимала, из чего состоит код картинки, теперь знаю, благодаря вашей статье. Поэкспериментирую с анимационными картинками. Спасибо!!!!
    + :yahoo:

  4. Эвелина пишет:

    Юля, Вы такие навороты тут навертели, что по Вашему новому сайту хочется ходить, как по музею — в войлочных тапочках, чтобы нечаянно ничего не задеть.
    Нажала на цифру 6 вверху у фото, наивно полагая, что это оригинальная форма +1 — попала сюда. но выбралась)) И точно знаю уже, когда и зачем к этой статье вернусь!

    • Юлия пишет:

      Эвелина, это к счастью не музей, можно все трогать и при желании перенимать на свой блог :heart:

  5. Teresa пишет:

    Ура! Поставила себе картинки в шаблон! Спасибо за советы :)

  6. mrs.interesno пишет:

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

    • Юлия пишет:

      В выражении «чайник» в принципе не вижу ничего плохого, особенно смотря с какой интонацией его сказать. А вот пренебрежение так называемых продвинутых блогеров иногда просто бесит: ведь не родились ведь они со всеми этими знаниями.И тем более подробно и точно редко кто описывает процессы редактирования и вставки, будто все все знают…Кто знает, читать естественно не будет, а кто ЕЩЁ просто не знает, тому надо действительно объяснить ;-)

  7. Nasati пишет:

    Юля, спасибо большое! Эта именно та информация, которую я искала. У меня в блоге много картинок, которые вставляю не задумываясь. Теперь буду делать со знанием))

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

    Юля, подскажи, пожалуйста: можно брать код из твоей статьи и вставлять туда свои данные — текст и адрес картинки? И где можно найти картинки с расширением gif. А — то я нахожу только ipg? Sad

  9. Виктория пишет:

    Юля, я брала у тебя тему Kippis, не было на ней отдельного окна для страниц — не знаю КАК?, но оно у меня появилось, после некоторых переворотов в структуре сайта, но теперь я там не могу поменять цвет…, что мне делать?
    Чтобы не давать ссылку — напишу название «Бесконечность творческих идей» — после прочтения можешь удалить…спасибо

    • Юлия пишет:

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

  10. Татьяна пишет:

    Юлечка, спасибо еще раз! :rose: Убрала ссылки, теперь с фотографий не перекидывает на Яндекс. Что бы я без тебя делала? :heart:

  11. Олеся пишет:

    Привет!Познавательный сайт,особенно для чайников вроде меня. :scratch: Хотелось бы узнать,как выставлять картинки на фон…как вот бабочка тут на фоне

    • Юлия пишет:

      Здравствуйте,Олеся. Вы наверное сами нашли ответы на свои вопросы, если нет, то как установить фон можно прочитать здесь http://test-shablon.ru/shablon-springfestival-versii-1-3/Правда это работает не для всех шаблонов, но вашем (на который идет ссылка с комментария), это распространяется. Кстати бабочка на фоне, это не виджет, а плагин http://test-shablon.ru/plagin-totop-link/.У меня есть статья про Ваш шаблон, но он достаточно сложный в настройках, а у Вас сайт просматривается как-то некорректно, с промежутками…

  12. Инна пишет:

    Зашла на сайт и ахнула, невероятно красивое оформление, особенно шикарно смотрится фон. Пошла читать про полезности и красивости…. тоже хочется красоты.

  13. Олеся пишет:

    Здравствуйте Юлия, может задам глупый вопрос, но всё же хотелось бы знать. Как создать окошечко для копирования html кодов? Может создадите по этой теме статью, буду вам очень признательна Angel
    Цитирую вам про какое окошечко я имею ввиду: Скопировать HTML-код можно в окошечке ниже:…..

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

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

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