5.9.08

Favicon для Блоггера!

56 comments

Самая маленькая картинка в вашем блоге!

Доброго времени суток!

Сегодня я бы хотела начать с вопроса на внимательность - что изменилось в этом блоге? Ну, трудно, наверно сказать - вот новая статья, которую я только что написала (вру, наверно, я-то эту статью только пишу... правда, когда вы её увидите эти слова пожалуй станут правдой - Вот как оказывается все сложно в нашей жизни!) Ну, мы, пожалуй продолжим: Как мы только что выяснили спрашивать вас, что изменилось на блоге - довольно жестоко. Тогда я вам просто подскажу: посмотрите, пожалуйста, на верх странички... и даже еще выше - взгляните на адресную строчку, где вы видите URL этого блога: http://blogger4you.blogspot.com и слева от этого адреса вы обнаружите того же самого пляшущего мишку, которого вы видите в этой статье. Такая картинка в адресной строчке и в закладках вашего браузера называется Favicon (от английского FAVorites ICON — «значок для избранного»). Прочитать больше о Favicon мы можем в Википедии.

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

1) Рисуем или находим в интернете, картинку, которую мы хотим сделать символом нашего сайта (своего мишку мы честно где-то нашли - уже не помню где), картинка может быть с любым расширением: png, gif, jpg и т.д.

2) Сохраняем нашу картинку на Photobucket или еще где-нибудь (о Photobucket я подробно писала здесь).

3) Теперь мы делаем новый шаг в освоении Blogger'а. На "Панеле инструментов"(Dashboard) мы выбираем "Дизайн"(Layout) и в Дизайне кликаем на Изменить HTML, я на картинке обвела карандашом, где эти заветные слова искать:
И видим мы там опять какой-то зловещий текст:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>



Зловещий текст нас к счастью совсем не интересует, во всем этом зловещем тексте нам надо только найти строчку со словом </head> [Что значит конец описания заголовка нашей страницы], для чего мы используем сочетание клавиш CtrlF и сразу перед этой строчкой на надо вставить следующую строку:

<link href='адрес вашей картинки' rel='icon' type='image/тип вашей картинки'/>


Вместо слов адрес вашей картинки вставьте настоящий адрес вашей картинки, скопируйте его из "direct link", если вы положили фотографию на Photobucket он будет что-нибудь типа http://i201.photobucket.com/albums/aa/myfavicon.jpg

А вместо слов тип вашей картинки вставьте три последние буквы имен вашей картинки, которые находятся в имени после точки и называются расширением. Это может быть png gif jpg и может быть что-то еще...

В нашем случае эта строчка выглядела таким образом:

<link href='http://i201.photobucket.com/albums/aa306/kylekeeton/baer-0008.gif' rel='icon' type='image/gif'/>

После всех этих манипуляций нажимаем кнопочку ПРОСМОТР и если нам все нравится нажимаем кнопочку СОХРАНИТЬ ШАБЛОН, а если нравится, но не очень можно что-нибудь поменять (картинку, например) или закончить работу совсем радикальным образом нажав кнопку УБРАТЬ ИЗМЕНЕНИЯ.

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

Всем счастливо!
Света
PS К сожалению, Челита оказалась права: в отличии от всех других браузеров Internet Explorer не увидел нашу Favicon - читайте продолжение этой статьи Favicon для Internet Explorer! (Если на вашем Blogger блоге была Favicon, но куда-то пропала читайте статью: Blogger: Если вы "потеряли" Favicon! )

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

3.9.08

Blogger: Меняем размер картинки!

42 comments

Картинка в вашей статье!

Доборго времени суток!

Сегодня мы поговорим о картинках в ваших статьях, постаха или сообщениях (кому как нравится их называть) . В общем-то, я не сомневаюсь, что все вы умеете вставлять картинки в ваше сообщение на Bloggere, но как выяснилось далеко не все умеют уменьшать или увеличивать картинку. Люди из Группы "Blogger Discuss" не знали ответа на этот вопрос, а я вам расскажу сразу два способа как это можно сделать:

1. Способ НАГЛАЗОК: Во врямя написания статьи в режиме "Создать/Compose" мы кликаем на картинку у которой мы хотим изменить размер и видим появившуюся вокруг картинки рамочку с маленькими квадратиками - это значит картинка стала активна. Теперь наведя на середину картинки мышку и нажав указательным пальцем (т.е. для большинсва из нас левую) клавишу мыши не отпуская её мы можем перетянуть картинку на нужное нам место выше или ниже. Чтобы изменить размер картинки нам надо сделать картинку опять-таки активной, а потом "растянуть или уменьшить" её с помощью мышки: для чего медленно проведем мышкой над появившейся рамочкой в районе квадратика и когда мы увидим, что указатель нашей мышки превратися в стрелочку упирающуюся в отрезок рамочки картинки мы нажимаем указательным пальцем клавишу на мышке и тянем эту рамочку в сторону уменьшения или увеличения картинки.

Удачи вам! Главное не забывайте о пропорциях! [Я, кажется, c ними немного перестаралась ;)].

2. Способ ПО-НАУКЕ: Обычным способом подгружаем в нашу статью картинку. И переходим в режим редактирования HTML/Edit HTML. И видим следующий код:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i201.photobucket.com/albums/aa306/kylekeeton/RussianBlooger/Picture.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px;" src="http://i201.photobucket.com/albums/aa306/kylekeeton/RussianBlooger/Picture.jpg" alt="А здесь была КРАСИВАЯ ТАКАЯ КАРТИНКА!" title="Случайная картинка, найденная мною в интернете - оказалась пейзажем Дерка Хансена!" border="0" /></a>

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

1) Все что выделено синим цветом между двумя первыми значками меньше-больше <...> и последними значками меньше-больше <...> со слэшом и буковкой "а" по серидине говорит вашему браузеру, что картинка которую вы только что подгрузили будет на самом деле ссылкой и если кликнуть по этой ссылки мы увидим картинку целиком "в полный рост". Если картинка сама по себе небольшая и я её и так показываю целиком, я удаляю эту ссылку - т.е. все что в коде выделено синим. (Вам это делать совсем не обязательно!)

2) Между этими синими кусками мы видим собственно описание самой картинки. То что я выделила зеленым цветом это и есть ширина нашей картинки. В зависимости от режима, в котором вы её подгружали [размер: большой, средний или малый] ширина width может быть 400px, 320px, 200px вот этот-то параметр мы и меняем на.... что угодно, что вам больше нравится: на любое число - только не забываем про значок px (что значит пиксел) на конце. [Слово «пиксел» является сокращением от английских слов «picture element» (элемент изображения). На экране телевизора или монитора любое изображение состоит из совокупности очень мелких элементов (точек). Эти элементы изображения и называются пикселами (pixel).]

3) Красным цветом я выделила еще один хитрый параметр размещения картинки float может быть left, center, right или его может не быть совсем, в зависимости от того, какой Формат (Layout) вы выбрали при подгрузке своей картинки. Этот параметр вы тоже можете поменять, если вдруг решите, что эта картинка будет лучше смотреться не слева, а справа.

4) А вот таким светлоголубым цветом я отметила, то что вы у себя в HTMLе не увидите в параметр alt="" внутрь кавычек я добавила строчку А здесь была КРАСИВАЯ ТАКАЯ КАРТИНКА!, которую наш читатель увидит если картинка по каким-то причинам не подгрузится, а вот параметр title я вставила сама и включила в него в кавычках короткое описание картинки Случайная картинка, найденная мною в интернете - оказалась пейзажем Дерка Хансена! - это мое вознаграждение для любознательного читателя, который наведет на картинку мышку и прочтет ее описатие. Я, между прочим, всегда так делаю можете посмотреть что вам скажет эта кошечка в конце статьи - просто наведите на неё мышку.

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

Если вам понравилась картинка, на которой мы сегодня тренировались - вы может почитать о её создателе, Дерке Хансене здесь.

А я на сегодня прощаюсь, тихо радуясь за читателей кто узнал сегодня что-то новое :).
Света




Комментарии и вопросы более чем приветствуются,

нужна помощь - поможем! Читать дальше...

3.9.08

Картинки для Блоггера!

17 comments

Где хранить картинки для вашего блога!

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

1. Как вы, наверно, заметили нам очень нравятся анимированные картинки - они украшают и оживляют повествование. Но просто подгрузить их встатью с вашего домашнего компьютера не получится - Blogger обязательно преобразует их в статичные рисунки.

2. А что если вы хотите иметь красивый шаблон (template) для блога - тогда очень вероятно в самом шаблоне будут картинки: так шаблон для этого блога состоит на самом деле из 3-х картинок: картинка для головы, тела и ног (header, body and footer). Не очень сложно, а получился очень даже ничего себе дизайн!

Где же тогда хранить картинки - Мы храним картинке на PhotoBucket (Ведро Фотографий): http://photobucket.com. Это удобный сервис, который позволяет хранить картинки с размером достаточным, чтобы из них можно было сделать красивый дизайн для блога, размер альбома на бесплатном аккаунте 1 Gb, Monthly Bandwidth 25 Gb (Monthly Bandwidth[в документации это еще называют ресурсом полосы пропускания] - количество мегабайт в месяц (объем трафика), которые сервер может отправить за месяц при подгрузке картинок из вашего фотоальбома). Так если картинка с медвежонком в этой статье "весит" 25 Kb то если в месяц эту статью захотят посмотреть 1000000 человек они увидят этого симпатичного мишку, а вот 1000001 несчастный получит ошибку, потому что мы уже исчерпаем лимит нашего месячного Bandwidth'а и ему придется ждать следующего месяца, чтобы эту картинку в этой статье увидеть. [Ну, это все гипотетические разговоры - на самом деле при двухлетнем использовании Photobucket'а мы использовали только 9Mb (1% от 1 Gb) фотографий, а месячный Bandwith у нас 8 Gb (30%).] Сервис очень надежный, картинки загружаются довольно быстро и за все два года я не помню ни одного случая, когда бы нас этот сервис подводил.

Ред. 27 марта 2010 Только сейчас обнаружила печальные изменения в photobucket.com -- теперь чтобы заставить большее число пользователей платить деньги за использование их сервиса они сократили объемы предоставляемых бесплатных ресурсов. Теперь это только 500Mb дискового пространства и 10GB месячного трафика. Будьте внимательны и осторожны. Заводите во-время новые аккаунты!

Интерфейс у Photobucket'а очень удобный, достаточно начального уровня английского языка, чтобы зарегистрироваться и использовать этот ресурс. Фотографии можно загружать как с вашего домашнего компьютера, так и из интернета. На следующих двук рисунках я вам это покажу:
1) С домашнего компьютера: щелкаем по кнопке "Choose files", выбираем файл на домашнем компьютере и дважды по нему кликаем.
2) Из интернета: переводим переключатель From: в положение "web URL" и вставляем URL (адрес в интернете) понравившегося вам рисунка далее кликаем на синюю кнопочку "Upload" и теперь у вас на Photobucket 'e своя копия понравившейся картинки!

И последнее что мы с вами на сегодня рассмотрим как добавить картинку из вашего Photobucketa в вашу статью. А это теперь очень просто: с недавних в пор Blogger'e появилась возможность, когда мы щелкаем по иконке с картинкой во время написания статьи взять ей из интернета. Так что мы идем в наш Photobucket и кликаем на "direct link" нашей картинки, а потом вставляем этот "direct link" в поле URL.

Кажется, я рассказала сегодня подробно и много. Только на последок одна маленькая просьба никогда не вставляйте в свою статью картинки с чужих сайтов напрямую, это называется hot-link (горячий линк) и люди этого очень не любят, потому что когда вы вставляете картинку с чужого сайта вы тратите их Bandwidth (о котором я так долго рассказывала). Так что вначале скопируйте, понравившуюся вам картинку к себе, а уже потом вставляйте её к себе в статью или на сайт. Ну, что - договорились? ;)

А на последок я поделюсь с моими долготерпеливыми читателями ссылочкой на очень милую (а Кайл считает самую лучшую) библиотечку с анимированными картинками: http://www.animated-gifs.eu/.

Всем хорошего дня и побольше креатива,
Света


Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем!
Читать дальше...

Популярные сообщения