28.9.08

Blogger: Page Rank и Nofollow!

33 comments

Не беспокоить!Кому НЕ нужна ИЗВЕСТНОСТЬ?

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

Сегодня у меня для вас опять горячая новость!!! Похоже что Google обновил-пересчитал Page Rank.

Пожалуй не буду я вам подробно рассказывать, что такое Page Rank (потому что сама не так чтобы до конца понимаю), а коротко процитирую Википедию: PageRank — это числовая величина, характеризующая «важность» страницы в Google.

Читателя, который чувствует в себе силы разобраться глубже в этой теме я отсылаю к статье Корпоративная информация Google. Обзор технологии или к статье о PageRank из Википедии (лучше читать английскую версию).

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



А вот здесь вы можете получить код для кнопочки с PageRank Вашего Блога и гордо демонстрировать всем Вашим читателям! ;)

Пожалуйста, не пугайтесь, если Вы большой заслуженный блог и Ваш Page Rank N/A (not available) или 0 (ноль). Мы прошлись по весьма заслуженным блогам некоторых наших друзей [Нам не нужно заполнять форму и спрашивать программу о Page Rank - наш браузер всегда показывает Page Rank страницы, которую мы читаем] и были потрясены - Как ТАКИЕ блоги не имеют Page Rank! Мы залезли в Исходный Код некоторых таких блогов и во всех них примерно на десятой-двадцатой строчке мы обнаружили следующую "магическую" фразу:

- эта фраза говорит всем поисковым роботам - оставить этот блог в покое и НЕ ИНДЕКСИРОВАТЬ НИ ПРИ КАКИХ УСЛОВИЯХ!

A теперь вопрос, мой уважаемый читатель, вот тот самый, который вынесен в подзаголовок: Кому НЕ нужна ИЗВЕСТНОСТЬ? А если вы пишите интересные статьи, то она Вам точно нужна и Ваши статьи точно нужны читающему не побоюсь этого слова человечеству!

И если я Вас убедила, что Ваши статьи НЕОБХОДИМЫ В ЭТОЙ ЖИЗНИ! Давайте быстренько исправим эту ситуацию:

1. Заходим на Панель Управления (Dashboard) кликаем на Дизайн (Layout) и выбираем Изменить HTML (Change HTML).

2. Cмотрим внимательно на HTML текст и возможно на первых двух страницах находим этот текст. Облегчить нахождение этого текста поможет сочетание клавиш CtrlF - нажав эту комбинацию, вы увидите поисковое окошко или поисковую строчку внизу браузера введите туда robots и попросите найти для вас это слово.

3. Если фраза найдена её надо аккуратно удалить. Теперь нажмем [Сохранить Изменения] и если сообщения об ошибке не поступило, то поисковые роботы начнут индексировать ваш блог и ваши новые читатели рано или поздно найдут вас!

4. Если в ходе этой процедуры вы получили сообщение об ошибке, значит мы удалили чуть больше или чуть меньше чем следовало. Нажимаем [Убрать Изменения] и удаляем эту фразу, я ее вам напомню: еще раз и аккуратно!

5. Если фраза в блоге не найдена, а PageRank=0, возможно вы еще слишком молодой блог - давайте подождем еще 3 месяца! Или пишите сюда будем вместе исправлять ситуацию!

6. Только не спрашивайте меня, пожалуйста, как эта фраза появилаяь в вашем макете-шаблоне-темплейте-коде HTML как назовёте... Разработчик шаблона, который Вы себе установили, почему-то не хотел чтобы его блог (возможно пробный блог на котором он разрабатывал и тестировал этот шаблон) был индексирован и возможно забыл удалить эту фразу из кода, когда выложил его в интернет.

Продолжаем разговор --> Blogger: Новогодний PageRank от Google!

Всем удачи во всем!

Света


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

26.9.08

Blogger: Начала HTML - Ссылки!

41 comments

Ссылки и отсылки!С любимыми не расставайтесь!

Всем доброго времени суток! И чему же, как вы думаете, может быть посвящена статья с таким патетическим подзаголовком? А будет она посвящена способам сделать случайного посетителя нашего сайта нашим постоянным читателям.

Здесь я перечислю некоторые из них:

1) Как и все говорят самое главное это контент или содержание говоря по-русски - т.е. читателю на нашем сайте должно быть интересно.

2) Хорошая система навигации в нашем блоге - разумные метки (ярлыки), поисковое окошко, архив сообщений и т.д.

3) Возможность для читателя легко подписаться на новостную рассылку сайта используя RSS - reader или получение новостей по электронной почте.

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

5) И наконец разумная система ссылок в наших блогах. (А вот это мы сейчас быстренько изучим!)

Чтобы писать красивые ссылки, чтобы отсылать своего читателя к интересной информации, а не "посылать его по адресу" (а то он может и не вернуться) нам придется изучить HTML. Грустно это, конечно, и страшно, но все-равно когда-то приходится начинать -- Любой блогер рано или поздно осознает необходимость в получении хотя бы начальных сведений об HTML. Кстати HTML значит Стандартный Язык Разметки Документов в Интернете (Википедия).

Язык HTML состоит из тегов. Большинство тегов парные, но встречаются и непарные (например для описания картинки).

Вот как выглядит любой парный тег:
открывающий тег:
<несколько символов являющихся названием тега и параметры если они нужны>
закрывающий тег:
</те самые несколько символов являющихся названием тега>

Не пугайтесь, пожалуйста, это совсем не сложно - сейчас как раз на примере ссылок мы и разберемся с тегами:

Ссылки в HTMLе организуются с помощью парного тега a [латинское а, между прочим. Во всех современных языках программирования используются только латинские буквы! Есть у меня в прочем какие-то смутные воспоминания, что на заре развития программирования в СССР были попытки создать "русские" языки программирования (я даже припоминаю, что моя мама программировала на каком-то виде ассемблера, использующим русские буквы), да и я помнится развлекала своего сына написав для него свой "русский" мета-язык программирования - нам очень нравилось играть в такое программирование!]

Итак, к нашим баранам... т.е. ссылкам. Из вышенаписанного ясно, что ссылка должна выглядеть как парный тег: <a параметры если необходимо, а в случае ссылки хотя бы один параметр будет необкодим> здесь между открывающим и закрывающим тегом может быть почти что угодно, но сегодня мы рассмотрим случай текста. И наконец закрывающий тег </a> И не забываем, что а у нас английское!

Теперь немного о параметрах и атрибутах (значениях параметров).
Параметры и их значения записываются в общем случае так:

имя параметра1="значение параметра1" имя параметра2="значение параметра2, другое значение параметра2, и еще одо значение параметра 2 "

Кажется, уже достаточно непонятной теории, чтобы показать на практике, как это все в действительности просто!

Итак, тег ссылки а может иметь следующие параметры:

1) href (единственный обязательный параметр) значением этого параметра является url адрес страницы куда мы хотим чтобы наш читатель заглянул, ну просто для расширения его читательского кругозора или убедить нашего дорогого читателя, что не из головы мы всё тут выдумали...

пишем например так href="http://thegelady.blogspot.com/2008/09/blog-post_27.html" (Кстати, это у нас будет ссылка на замечательную статью Челиты, о том как можно с толком потратить парочку миллионов на Мертвом Море, ну а если этих миллионов пока нету, то можно получить в подарок "серебрянное колье" с камешками.)

Статья мне действительно очень понравилась и я решила ей поделиться с читателями. Но я не хочу чтобы мой читатель ушел навсегда сначала к Челите, а потом кто знает - он пойдет к Челите зачитается её веселыми историями, а кнопочку назад нажать после такого развлечения точно забудет. Так что я пошлю моего читателя к Челите немного "хитрым образом" я скажу браузеру открыть Челитину статью в новом окне (или в новой вкладке) и пусть мой читатель наслаждается творчеством Челиты! А вот когда он покинет её сайт - все хорошее когда-нибудь заканчивается ... моя недочитанная статья будет ему немым укором, что как описать ссылки на HTML он еще не усвоил -- ну а что с этим немым укором он сердешный будет делать это мы оставим на его совести ;).

Итак параметр target позволяет нам указать, где открыть ссылку. По-умолчанию ссылки открываются в том же окне, а вот если мы хотим чтобы ссылка открылась в другом окне или в другой вкладке браузера мы назначим параметру target значение _blank и все вместе у нас получится: target="_blank"

И пожалуй последний полезный параметр title что значит заголовок, в качестве атрибута для заголовка, мы можем поставить краткое описание куда и зачем мы отсылам нашего уважаемого читателя, это описание появится всплывающей строчкой при наведении мышкой на ссылку. В нашем случае мы можем написать что-то типа: title="Стоит взглянуть! ;)" Так коротко, потому что ссылка у нас будет поставлена на текст, а вот если бы ссылкой служила картинка - можно было бы и по-подробнее объяснить читателю, куда он идет и зачем!

А теперь я наконец, заканчиваю вас мучить, мой дорогой читатель, и как и обещала отправляю в гости к Челите:

Узнай как можно с толком потратить парочку миллионов на Мертвом Море, ну а если этих миллионов пока нету, получить в подарок "серебрянное колье" с камешками.

Ой-ой-ой! Куда же Вы, дорогой читатель! Я же Вам еще самого главного про ссылки не рассказала! Ушел.... Но он еще вернется и тогда увидит вот это:
<a href="http://thegelady.blogspot.com/2008/09/blog-post_27.html" target="_blank" title="Стоит взглянуть! ;)">Как можно с толком потратить парочку миллионов на Мертвом Море, ну а если этих миллионов пока нету, то можно получить в подарок "серебрянное колье" с камешками.</a>

Это собственно и есть полный HTML код для ссылки, которую вы видели выше.

Понятно?
Спрашивайте, если не совсем или совсем не...

Всем удачи во всем!
Света Blogger: кошка.

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

23.9.08

Blogger: Комментарии на BOBs страничке - полезный трюк!

15 comments

СРОЧНО В НОМЕР:

Вы уже послали свой Блог на соревнования блогеров BOBS. Нет? Срочно бегите - вам сюда (осталась одна неделя предложить свой или чужой блог для участия во всемирной олимпиаде блоггеров).

А теперь для тех кто уже понял важность этого мероприятия и отправил свой блог на это престижное "соревнование" я расскажу о трюке, который я открыла только сегодня. Не бойтесь - ничего противозаконного, просто исправляем ошибки BOBs(a).

Сначала, рассказываю о проблеме. Свой самый первый блог я зарегистрировала на BOBs'е как и положено 1-го сентября, через несколько дней после модерации на BOBs'е появилась страничка посвященная моему блогу. Симпатичная такая страничка со скриншотом моего блога, названием, описанием, ключевыми словами и с возможностью предложить мой блог для участия в "перечень номинаций" и возможностью оценить блог и оставить комментарий. Через неделю, а то и через две дозрели мы с Кайлом предложить несколько еще наших блогов на олимпиаду. Дождались окончания модерации и.... упс - на страничках посвященным этим блогам на BOBs'е исчезла возможность ОЦЕНИТЬ наши прекрасные блоги и ОСТАВИТЬ ДЛЯ НАС хороший комментарий. Я по правде говоря долго расстраивалась, а сегодня придумала такой вот трюк:

Описание ТРЮКА:
Взгляните на url вашего блога на BOBs'е мой например выглядит следующим образом:

http://www.thebobs.com/index.php?w=1220660425395808GCFYIRZA

теперь изменяем этот url: добавляем в конец следующие символы: -NEW&p=1 т.е. теперь у нас получился url вида:

http://www.thebobs.com/index.php?w=1220660425395808GCFYIRZA-NEW&p=1

и это будет страничка где вы сможете оставить первый комментарий на свой блог. После первого же оставленного комментария на вашей BOBs-странички появится рейтинг и возможность для других читателей оставлять комментарии. Кстати комментарии теперь модерируются очень быстро - так как их почти нет [а у нас будут ;)!]

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

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

21.9.08

Blogger-SEO: Меняем заголовок статьи!

48 comments

Счастливого Плавания!Как вы лодку назовете,
так она и поплывет...

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

Среди людей, профессионально занимающихся интернетом, есть даже такая специальность Поисковый Оптимизатор [Search Engine Optimizator (SEO)]. По правде говоря, этих людей нисколько не заботит на сколько подробно и ясно вы изложили свои мысли, насколько красочно описали приключения и даже есть в вашей статье хоть доля правды или все это только вымысел. Поисковые оптимизаторы постараются, чтобы в вашей статье было побольше ключевых слов (тех слов, по которым, вы думаете, будут искать информацию люди, для которых вы написали эту статью), чтобы эти ключевые слова были вынесены в заголовок и даже хорошо если в вашей статье они бы были выделены полужирным шрифтом, например. Хороший поисковый оптимизатор постарается убедить вас использовать в вашей статье также синонимы ключевых слов, а еще он постарается рассказать о вашей новой статье во всех доступных тематических каталогах и попробует подружиться с другими сайтами сходной тематики, чтобы время от времени упоминать друг друга в статьях.

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

А сегодня я хочу рассказать лишь о небольшом приемчике. Я открыла этот прием совершенно случайно, изучая статистику посещения моего видео-сайта, я обнаружила, что довольно много людей приходит с поисковиков по слову Lotiuma -- я не могла поверить своим глазам, что моя статья, где я опубликовала видео этой фантастически популярной финской группы - находится на первой странице Гугла. Уже позже я осознала, что в заголовке статьи я сделала опечатку... я сделала опечатку и другие люди сделали опечатку, когда пытались найти эту группу. Опечатку я, конечно, исправила - зачем позориться-то.... А теперь самое важное: в ссылке (адресе этой статьи по прежнему стоит слово Lotiuma - и эта статья по-прежнему на первой странице Гугла по этому слову).

[Информация была верна на момент до удаления блога, когда я восстанавливала эту статью - я случайно восстановила её под правильным заголовком - вернее не тем, что был в блоге изначально и только теперь вспомнив всю эту историю и увидев "правильный url" в статье, я изменила его на тот, который был раньше -- с ачепяткой ;). Так что теперь придется подождать немного и посмотреть выйдет ли эта статья опять на первую страницу Гугла по этому странному запросу: Lotiuma.

Любознательный читатель возможно захочет узнать как же я смогла изменить url статьи если его изменить нельзя. Это просто! Я написала еще одну статью (на самом деле скопировала старую) и опубликовала её под "нужным заголовком" и за нужную дату, а старую статью со "слишком правильным url" пришлось удалить. ]


Теперь несколько наблюдений:

1. Поисковые роботы индексируют и довольно высоко ценят слова, которые они нашли в адресах наших статей.

2. Русские слова не попадают в адрес (url) вашей статьи. В url попадают только слова, написанные латинскими буквами.

3. Заголовок статьи можно безболезненно менять, а вот адрес (url) статьи будет сформирован из слов, которые вы использовали в заголовке статьи самый первый раз.

Теперь посмотрите на свой блог - наведите мышку на названия статей и посмотрите какой адрес отобразится в нижней (статусной) строчке вашего браузера? Позвольте мне угадать... Ну, если у вас чисто русское название -- это должно быть что-то типа http://адрес_нашего_блога.blogspot.com/yyyy/mm/blog-post_nn.html где yyyy - год, mm - месяц, nn - какое-то число и много эта строчка скажет поисковому роботу от которого так много, как мы выяснили зависит? Не очень!


И вот собственно мы добрались и до самого приема. Сначала публикуем статью под заголовком для поискового робота. [Я вот по привычке названия статей всё на английский переводила, а теперь вот подумала, что блог-то я веду по-русски и наибольшую пользу он может принести русскоязычному читателю, так что начиная с этого поста я даю поисковому роботу в названии русские слова, написанные латинскими буквами - он умный, он разберется!

Всем хорошего дня и хорошего настроения,
Света
PS А может кому будет интересно взглянуть на видео "Loituma" - очень милое, между прочим ;).

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

19.9.08

Blogger: Изменяем размер шрифта!

23 comments

Буковки большие и маленькие!

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

Дело-то оно хорошее, но сугубо личное и вот об этом-то я и хотела бы сегодня поговорить. Что до меня - я несколько лет назад сделала лазерную операцию на глаза и с тех пор абсолютно счастлива... но речь в этой статье пойдет не обо мне и не о замечательных возможностях современной лазерной микро-хирургии глаза [Об этом я как-нибудь к слову расскажу или вы можете почитать тут по-английски].

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

Люди мы все разные и глаза и способность видеть у нас разная - и я уже слышала от некоторых моих друзей вопрос - как бы изменить размер этих самых буковок в наших текстах. Обязательно ли для этого менять шаблон целиком?

Чтобы увеличит размер шрифта в блоге, шаблон менять не надо!

Рассказываю по шагам как изменить размер да и собственно сам шрифт. Этот способ будет работать для New Blogger(XML) шаблонов.
-----------------------------------------------------
Необязательная вставка для самых любознательных:
Шаблоны для Blogger(a) бывают двух типов New Blogger - это XML шаблоны и Blogger Classic - это HTML шаблоны. Вам не надо обладать большими познаниями в создании Web-страниц, чтобы отличить одно от другого. Если когда вы зайдете на вашу Панель Инструментов (Dashboard), вы увидите:

[Новое сообщение]
– Изменить сообщения – Настройки – Дизайн – Просмотреть блог

... это значит у вас New Blogger шаблон, а если вместо слова Дизайн у вас в Панеле инструментов будет слово Шаблон, значит у вас Blogger Classic шаблон и может быть, если вы не очень к нему ещё прикипели вам стоит его сменить. (В английской версии Layout=Дизайн и Template=Шаблон).
-----------------------------------------------------
Теперь, собственно, я расскажу и покажу на картинках Как Увеличить Шрифт:

1) Заходим Панель Инструментов кликаем на Дизайн и выбираем [Шрифты и цвета] и вот что видим:



2) Прокручиваем мышкой цвета пока не доходим до [Шрифт текста] и кликаем на него! И тут видим, что у нас есть возможность выбрать не только шрифт, но и уменьшить или увеличить его. А во время всех этих операций у нас есть возможность приглядывать за результатом в нижней половине окна. Покажу это на картинках:

3) Теперь если нам все понравилось кликаем на [СОХРАНИТЬ ИЗМЕНЕНИЯ], а если мы к этим изменениям еще морально не готовы, то [УБРАТЬ ИЗМЕНЕНИЯ].

Итак, дело сделано и мы увеличили шрифт!

Наши дорогие читатели возможно стали счастливее,
а ни этого ли мы все хотим! ;)


Всем хорошего дня,
Света

PS Иногда, так бывает что у людей, кто бесплатно скопировал где-то на просторах интернета красивый шаблон для Blogger(а) нет доступа к управлению цветами и шрифтами блога - в дальнейшем я расскажу как с этой бедой бороться.

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

16.9.08

BOBs: Пятый международный конкурс блогов!

0 comments

На Других Посмотреть и Себя Показать!

Всем Доброго Времени Суток! Конечно, это уже не новость, что Немецкая Волна проводит Пятый Международный Конкурс Блогов!

31 августа, в День блога BlogDay, стартовал пятый международный конкурс блогов. Помимо BOBs, мы также поддерживаем другие акции и мероприятия, способствующие международному обмену между блоггерами. В рамках BOBs мы хотим узнать от вас, какой из блогов является самым лучшим, красивым, трогательным, удивительным, ярким или информативным. Отправляйте нам ваши предложения!

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

По словам шеф-редактора DW-WORLD.DЕ Уты Тоферн (Uta Tofern), посредством международного конкурса "Немецкая волна" хочет поддержать свободу слова и свободу СМИ по всему миру. Своей целью организаторы конкурса видят отражение всего многообразия блогосферы и побуждение к диалогу без языковых барьеров в этой новой форме масс-медиа и вне ее.(Прочитать всю статью можно здесь.)

Я считаю в этом мероприятии обязательно надо участвовать! Прежде всего это не трудно - просто зайдите на страницу Международного конкурса и зарегистрируйте Ваш блог(и) и/или блог(и), который Вам нравится! Что вы с этого получите: самое маленькое ссылку на ваш блог и следовательно людей, которые возможно станут вашими читателями и собеседниками! Это так же очень интересное место для "сёрфинга" и не забудьте оставлять комментарии на блоги, которые вам понравились - каждый комментарий будет ещё одной ссылкой на Ваш блог!

На сегодняшний день я зарегистрировала там 5 наших блогов - я действительно, считаю их очень хорошими -- просто потому что мы туда вкладываем кусочек нашей души. А еще Главное не победа, главное - участие! И участие в таком мероприятии, я считаю очень достойным!

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

В общем, очень рекомендую!

Челита спрашивала, где можно проголосовать за наши блоги. Вот несколько ссылок:
Все для Blogger(a) на Blogspot(e)!
Russian Video from Russia!
Russian Photo Blog!
Soviet Stories!
Windows To Russia!

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

Всем удачи и не забудьте зарегистрировать свой блог на BOBs!
Света

PS А вот статья о конкурсе BOBs 2009/2010: Blogger. А не пойти ли нам всем на BOBs?


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

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

13.9.08

Blogger: Расширяем Блог!

99 comments

Больше места для Умных Мыслей!

Здравствуйте! Эта статья обязана своим появлению "Провинциальному попингую" - Azъ, который хочет больше пространства в блоге для своих статей. И это очень закономерно, я вот тоже недавно "расширила" вот этот самый блог, который вы сейчас читаете! Так что теперь постараюсь рассказать как это делается.

1. Заводим бесплатный аккаунт на Photobucket: http://photobucket.com/ кликаем [Join Now]... или вспоминаем где еще у нас был хороший, надежный аккаунт для хранения картинок, которые входят в шаблон нашего блога.

2. На панеле инструментов выбираем Дизайн/Layout --> Изменить Html/Edit Html, ставим галочку на Расширить шаблоны виджета/Expand Widget Templates.

3а. Прежде чем идти дальше производим резервное копирование нашего текущего шаблона кликаем на ссылку Загрузить весь шаблон/Download Full Template

3б. Если пункт 3а) выполнен вернуться к предыдущему шаблону будет легко - просто Загрузите шаблон из файла на жестком диске: (тот самый файл, который вы получили на шаге 3а).

4. Смотрим внимательно на Html-код нашего блога и находим описание колонок нашего шаблона:
#outer-wrapper {
.........
width:700px;
.........
}
#main {
width:430px;
float:$endSide;
.........
}
#sidebar {
width:150px;
float:$startSide;
...........
}

Итак наш шаблон: общая ширина 700px, основная колонка 430px и sidebar 150px.

Какие изменения мы собираемся сделать: Общую ширину увеличим до 900px и добавим по 100px к каждой колонке, а еще я лично мне нравится sidebar (кстати, может кто подскажет как его лучше по-русски называть?) справа от основного текста - это мы тоже изменим.

Изменять будем тупо!

1) Во всем шаблоне ищем 700px [Делаем это используя сочетание клавиш CntrF] и меняем 700px на 900px

2) В описании #main { меняем 430px на 530px
и float:$endSide; меняем на float:$startSide; [это мы меняем колонки местами]

3) В описании sidebar { меняем 150px на 250px
и float:$startSide; меняем на float:$endSide; [это мы меняем колонки местами]

Ну, вот - почти все сделано! Нажимаем [ПРОСМОТР] - А в общем, совсем неплохо получилось.... вот только картики.

Ага, в качестве фона у нас использовались картинки. Что делать? Выгрузить их на домашний компьютер и растянуть до 900px используя какой-нибудь редактор картинок. Мы, например, используем GIMP - а лучше всех про GIMP знает наш друг Николай Ганенков (Linux и мой домашний компьютер ).

Картинки мы ищем с помощью того же CntrF, но теперь ищем слово background и обращаем пристальное внимание на строчки в которых есть одновременно слово background и url("http://....) вот эти-то картинки нам и предстоит исправить, а затем положить в свой Photobucket, который мы заводили в самом начале статьи или куда-нибудь еще. И поставить новый url растянутой картинки на нужное место!
Я лично заменила 3 картинки.
Нажимаем еще раз [ПРОСМОТР] - и ЭТО ПОЧТИ СОВЕРШЕНСТВО! Ну, уж для совсем придир расскажу, что есть там еще одна картинка: так называемый "дивайдер": http://www.blogblog.com/scribe/divider.gif и если Вам кажется, что "дивайдер" не совсем подходит вашему новому шаблону - вы его тоже можете скачать, отредактировать на домашнем компьютере и заменить в вашем шаблоне, где найдете "divider.gif".

А мы с Кайлом не сильно эстететствуя просто заменили в описании #footer {.... строчку: background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide; на более короткую строчку border-top:1px solid #332A24;

и в описании #header {.... строчку: background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom $startSide; на более короткую строчку border-bottom:1px solid #332A24;

Вот и всё! У нас получилось - и у вас должно! Будут вопросы спрашивайте, посмотреть шаблон, который у нас получился и даже скачать его код вы можете здесь или кликнув на картинку :).

Всем удачи во всем!
Света


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

8.9.08

Все о редакторе Blogger(а)!

31 comments

Инструмент для Блоггера!

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

Кстати, некоторые его функции я открыла прямо сегодня! Что ни говори век живи - век учись [а продолжение про дурака, мы пожалуй опустим ;)]!

Итак, мы пишем или редактируем наш пост и находимся в режиме [Создать], потому как [Изменить html] - это уже для профессионалов и мы пока будем использовать этот режим только при крайней необходимости. Но для профессионалов я все же упомяну что вставлять в статью можно любые Html-объекты, таблички, формы и т.д. - я думаю, что любой пост можно здорово разукрасить, даже поставив свой background - я как-нибудь попробую это сделать..... Ой, куда-то меня понесло - не обращайте, пожалуйста внимания, это мы так "на птичьем языке почирикали немного".

Возвращаемся к нашему редактору В РЕЖИМЕ СОЗДАТЬ/COMPOSE. Прежде всего заметим, что если подвести мышку к какому-нибудь значку на панели инструментов, то появится строчка с описанием свойства этого значка, т.е. что этот значок делает.

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

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

Начнем с самой левого меню где написано Шрифт: Blogger предлагает нам 8 различных шрифтов: давайте на них посмотрим:
Так выглядит шрифт - Arial
Так выглядит шрифт - Courier
Так выглядит шрифт - Georgia
Так выглядит шрифт - Lucide Grande
Так выглядит шрифт - Times
Так выглядит шрифт - Trebuchet
Так выглядит шрифт - Veranda
Так выглядит шрифт - Webdings (а вместо этих значочков, между прочим слово Webdings было???) А Кайл, вот оказывается знал что такое Webdings! А я вот не знала так что с вашего позволения я здесь попечатаю немножко этим шрифтом, а мы с вами полюбуемся на получающиеся картинки!

A B C D E F G H I J K L M N O P R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0 - = + _ )(*&^%$#@!~`

[Кажется знаю, что мне сейчас Челита скажет - она здесь не видит вот этих маленьких картинок! И я их с работы не увидела, а увидела просто латинские буквы и цифры - видать у нас шрифт Webdings не установлен, а жаль картинки забавные, а использовать их не придется - не у всех есть этот замечательный шрифт - хотя это все игрушки! ;)]

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

Теперь меняем размер шрифта это там где на кнопочке большая и маленькая буквы [TT] Итого размеры шрифтов у нас могут быть:

Очень маленький - Smallest
Маленький - Small
Нормальный - Normal
Большой - Large
Очень большой - Largest

Вот это, наглядно - я понимаю! [Как на приеме у офтальмолога ;)]

С помощью следующей кнопки [b] - мы получаем полужирный шрифт, а с помощью кнопки [i] - курсив. Это в общем, понятно и в текстовых редакторах часто используется.

Кнопочка с заглавной буквой Т и цветными квадратиками мы можем раскрашивать наш текст - мои читатели, впрочем, к этому привыкли! ;)

Просто напечатаем текст выделим кусочек мышкой и выберем цвет! Точно так же как мы добавляем любые другие свойства нашему тексту!

А теперь внимание!
ОЧЕНЬ ВАЖНАЯ ТЕМА!

Мы учимся делать удобные ссылки в наших статьях! Иногда нам просто лень перепечатывать полностью полезную статью - мы даем только анонс и отсылаем читателей, кто заинтересовался прочитать полную версию, иногда это способ выразить свой респект и показать уважение коллеге и это обычно воспринимается очень-очень положительно так как наша ссылка повышает Page Rank и Индекс Цитирования сайта, на который мы ссылаемся. Следующая кнопка на которой изображена пара звеньев цепи позволит нам сделать красивую ссылку из любого текста.

1) Печатаем текст. Ну, например: Не все наверно знают, что у Николая я учусь создавать красивые видео, используя программу Kdenlive.

2) Идем на сайт моего друга Николая скопировать адрес его сайта "к себе в мышку".

3) Выделяем самую осмысленную часть нашей фразы мышкой и нажимаем кнопочку ссылки - ну, ту самую с звеньями цепочки, и видим длинненькое окошко куда нам предлагают "Enter URL" вставить адрес сайта который мы на предыдущем шаге скопировали к себе в мышку. Вот мы его теперь туда и вставляем хотите CntrlV хотите просто Copy.

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

Уфф, про ссылки рассказала! Будут вопросы - спрашивайте! А мы идем дальше - уж очень хочется в одной статье разобрать все имеющиеся на сегодня возможности редактора в Blogger(е).

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

КОЛЫБЕЛЬНАЯ ПЕСНЯ

Спят луга, спят леса,
Пала божия роса,

В небе звездочки горят,
В речке струйки говорят,

К нам в окно луна глядит,
Малым детям спать велит

"Спите, спите, поздний час,
Завтра брат разбудит вас.

Братний в золоте кафтан,
В серебре мой сарафан,

Встречу брата и пойду,
Спрячусь в божием саду,

А под вечер брат уснет
И меня гулять пошлет.

Сладкий сон вам пошлю,
Тихой сказкой усыплю,

Сказку сонную скажу,
Как детей сторожу...

Спите, спите, спать пора.
Детям спится до утра..."

25 сентября 1904

А нам спать пока рано осталось обсудить еще несколько возможностей, которые нам предоставляет редактор Blogger(а) - а вот этот абзац я, кстати, "Полностью выровняла"! Я вообще очень люблю полностью выравнивать мои абзацы - тогда посты в моих блогах выглядят совсем как статьи в настоящих журналах ;).

Blogger помогает нам включать списки в наши статьи. Нажимаем на кнопочку с нумерованным списком и получаем:
  1. Blogger проставил "1." и мы можем чего-то тут написать, теперь нажмем Enter
  2. и видим цифру "2." нажимаем Enter опять
  3. и Blogger продолжает считать за нас, еще Enter
  4. видим "4." и решаем, что пожалуй мы завершим наш список и нажимаем Enter, а когда увидим "5."на кнопочку со списком еще раз
Число "5." исчезло и мы опять можем печатать в нашем нормальном режиме!

Аналогично работает и ненумерованный список (следующая кнопочка за нумерованным списком). Давайте просто посмотрим как он выглядит:
  • Довольно именем известна я своим;
  • Равно клянётся плут и непорочный им,
  • Утехой в бедствиях всего бываю боле,
  • Жизнь сладостней при мне и в самой лучшей доле.
  • Блаженству чистых душ могу служить одна,
  • А меж злодеями — не быть я создана.
Юрий Нелединский-Мелецкий

Следующая кнопочка с нарисованной кавычкой ["] поможет нам красиво выделить блок с цитируемым текстом - степень красивости тут зависит от вашего шаблона/макета/дизайна и в дальнейшем если будет желание мы можем рассмотреть ка изменить стиль блока цитаты.

Вот как блок цитаты выглядит в макете, которым я пользуюсь (самой интересно - еще ни разу до этой статьи я его в этом блоге не использовала):

Акростих — литературная форма: стихотворение, в котором некоторые (в норме — первые) буквы каждого стиха составляют осмысленный текст (слово, словосочетание или предложение).

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

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

Всего вам хорошего,
а мне пора спать!

Будут вопросы - спрашивайте! Надеюсь, чего-то новое сегодня мы все узнали :).
Света


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

6.9.08

Favicon для Internet Explorer!

16 comments


Картинка взята из
этой забавной статьи!
Нет в Мире Совершенства
(но мы можем к нему стремиться)!

Эта небольшая статья статья обязана своим написанием наблюдательности Челиты (Былое и думы) и Несовершенству Мира. Ну, о несовершенстве мира мы поговорим в другой раз и даже войну браузеров будем обсуждать не сегодня. А сегодня лишь примем как данность, что некоторые вещи в интернете не будут работать сразу во всех браузерах. Так в комментарии к предыдущей статье, где я рассказывала о том как сделать Favicon для Blogger'a, Челита удивленно заметила, что она не видит никакого "пляшущего мишки" в командной строке браузера. И тут я поняла, что столкнулась вот с этим самым Несовершенством Мира! Да я читала, что для "старых" браузерах типа Internet Explorer надо писать отдельный код, но, признаться честно, я не очень в это поверила, статья, которую я читала была написана давно и я наивно полагала, что в 2008-то году все уже будет работать для любого браузера... Ну, хорошо, о моей наивности мы поговорим в другой раз, а пока ситуацию нужно срочно исправлять, а то расхвасталась я в прошлой статье какой у меня теперь симпатичный мишка сидит в командной строке и у вас будет сидеть если вы добавите эту страничку себе в закладки....

Короче, исправляем ситуацию.

Сначала немного теории:

1) Favicon для Internet Explorer может быть маленькая картинка только в формате .ico
надо же я никогда и не слышала об этом формате прежде! [Спасибо Челита ;)]
2) Favicon для Internet Explorer не будет анимированным (т.е. мой мишка плясать, увы, не будет, но впрочем будет вполне узнаваем!)
3) У вас в блоге может несколько описаний для Favicon сначала описываем Favicon для Internet Explorer, затем для других браузеров можем поставить анимированную картинку в качестве Favicon.

Итак, теперь к делу.

1. Будем исходить из того что на предыдущем шаге мы уже поставили Favicon на наш блог. И это скорее всего была картинка в формате png jpg или gif. Теперь у нас есть 2 пути - Первый воспользоваться продвинутым редактором картинок и попросить его сохранить нашу картинку в формате .ico А если у вас нету такого "продвинутого" редактора, то можно пойти по второму пути - этот путь ведет нас на сайт http://www.genfavicon.com/ где мы можем из нашего рисунка сгенерить Favicon в том самом ico формате.

Сайт к сожалению на английском, так что я быстренько объясню вам последовательность действий:
1) В оранжевом квадратике выбираем картинку из интернета [первое поле ввода] или cо своего компьютера нажимаем [browse] чтобы выбрать картинку. Теперь нажимаем [Upload].

2) Теперь мы видим нашу картинку в правом окошке и серую активную область наложенную на неё. Как работать с "активной областью" мы обсуждали в статье где мы меняли размер картинки т.е. теперь мы можем мышкой перемещить и сжимать-растягивать эту область и когда серая область будет прикрывать ту часть картинки, которую мы хотим видеть на нашей Favicon мы нажимаем кнопку в зеленом квадратике [Capture & Preview]

3) Теперь в синем квадратике мы видим нашу иконку и если она нам нравится мы нажимаем [Download Favicon] и видим пустую станичку только с нашей картинкой кликаем правой кнопкой мыши (у меня там безымяный палец) и выбираем сохранить рисунок.

2. Теперь у на на компьютере есть маленькая картинка с расширением ico только вот не совсем понятно куда его поместить, потому что мой горячо любимый Photobucket файлы с таким расширением сохранять не захотел, Blogger и Picasa (где собственно хранятся все картинки нашего блога, которые мы загружаем в блог напрямую с домашнего компьютера) тоже не хотят размещать картинок с расширение .ico Я нашла способ хранить ico файл на Народе завела там аккаунт и закачала туда файл. [Если понадобится инструкция как это сделать - спрашивайте, я напишу. Или пришлите мне вашу иконку, а я ее на Народ помещу.]

3. И наконец самое последние добавляем новую строчку в наш HTML код нашего Дизайна. Как и в прошлый раз выполняем последоватнльность действий: На "Панеле инструментов"(Dashboard) мы выбираем "Дизайн"(Layout) и в Дизайне кликаем на Изменить HTML. В открывшимся окошке находим строчку:

</head>

Теперь перед ней и перед нашей строчкой, где мы уже прописывали Favicon вставляем строчку вида:

<link href='адрес куда нам удалось поместить нашу ico-картинку' rel='shortcut icon' type='image/x-icon'/>

у меня это получилось так:

<link href='http://junglebook2007.narod.ru/baer11.ico' rel='shortcut' type='image/x-icon'/>

Т.е. все вместе:
<link href='http://junglebook2007.narod.ru/baer11.ico' rel='shortcut' type='image/x-icon'/> - Favicon для Internet Explorer

<link href='http://i201.photobucket.com/albums/aa306/kylekeeton/baer-0008.gif' rel='icon' type='image/gif'/> - Анимированная Favicon для современных браузеров

</head> - Конец заголовочной части блога

Ну, вот и всё! Если делать что-то специальное для Internet Explorer вам показалось слишком утомительно - не расстраивайтесь это может немного подождать по нашей статистике всего 25% наших читателей используют Internet Explorer. Мы вот тоже только вчера сделали Favicon для Internet Explorer.

Всем удачи во всех ваших делах,
Света
PS Для людей сносно владеющих английским языком очень рекомендую этот сайт: http://www.iconj.com/ - на нем вы можете подобрать или создать себе favicon, а так же он будет для вас её (favicon) бесплатно хранить.

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

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/.

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


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

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

Здесь были: