Blogger: Улучшенные расширяемые сообщения (Убираем под кат) !

С праздником, дорогие защитники!

Здоровья, Счастья, Любви и Удачи!

Праздник у нас наступающий и у всех желающих есть еще возможность украсить свой блог симпатичной открыткой. Я свою взяла на Яндекс.Открытках (Зная креативность своих читателей, думаю очень немногие воспользуются полученным советом - у 95% уже заготовлен свой шедевр, ждущий только своего часа быть опубликованным)

Так что с вашего позволения я продолжу о вещах, в которых я разбираюсь лучше чем в рисовании. Мы продолжим о так называемых расширяемых сообщениях. Тема такая же обширная как и тема о Ярлыках (я помню, что не рассказала вам все что можно на их основе сделать).

Итак, сегодня мы продолжаем разговаривать о расширяемых сообщениях, о которых мы начали разговор в прошлый раз (Blogger: Расширяемые сообщения (Убираем под кат) -1). Многие читатели заметили, что возможно это не совсем оправдано, когда ссылка "Читать далее..." появляется во всех сообщениях, даже в тех в которых читать далее нечего (они были написаны давно и под кат там ничего убрано не было).

Ред. Наконец Blogger разработал встроенную в редактор возможность убирать часть поста под кат. Очень рекоммендую воспользоваться: Blogger: Как вставить 'Читать дальше'

Лирическое отступления для специалистов: Исследование этого вопроса, как улучшить предложенный в Blogger Help скрипт заняло у меня примерно неделю. Я заходила с разных сторон, пытаясь добиться, чтобы ссылка "Читать далее..." появлялась только у сообщений, написанных после определенной даты. Это у меня не получалось, потому что язык XHTML, на котором написаны шаблоны у Blogger не поддерживает сравнение строк на больше-меньше, только равно - не равно (по крайней мере у меня не получилось заставит Blogger произвести такое сравнение). Можно было пойти по пути включения в код куска на java-script, но.... тут несколько дней назад я встретила уникальную статью, написанную умнейшим человеком Yin Wang. Во всем интернете ТОЛЬКО ОН догадался до красивой и очевидной (для людей владеющими в совершенстве CSS - я к ним к сожалению не отношусь, зато есть куда стремиться) идеи как сделать чтобы ссылка "Читать далее..." появлялась только в статьях где мы убирали под кат часть статьи. Прочитав его статью: A better way to create expandable post summaries in Blogger (для классических шаблонов), написанную еще в 2005 году, я вдохновилась и адаптировала его идею для новых шаблонов Blogger'а, исправив по пути несколько неточностей (сразу видно, что статью писал математик, для которого главное - красивая идея ;)).

Итак, предлагаю вашему вниманию результат совместного творчества: расширяемые сообщения для платформы Blogger методом Prostova-Wang ;)

Как всегда:

Панель инструментов -- Дизайн -- Изменить Html
Ставим галочку на Расширить шаблоны виджета.

1) Находим тег </head> и ПЕРЕД НИМ пишем кусок кода описывающий CSS-style

<style>
a.more{display:none;}
<b:if cond='data:blog.pageType != &quot;item&quot;'>
span.fullpost {display:none;}
span.fullpost + a.more {display:inline;}
span.fullpost + div + a.more {display:inline;}
<b:else/>
span.fullpost {display:inline;}
</b:if>
</style>

Те кто, уже внедрил код расширяемые сообщения из предыдущей статьи, заменяют написанный ранее блок <style> ... </style> на этот.

2) Теперь находим в нашем Html-коде строчку

<data:post.body> (здесь могут быть небольшие разночтения)
строчка может выглядеть и вот так: <data:post.body/>
но очевидно, что символыdata:post.body там будут обязательно

Ее (эту строчку мы оставляем в покое - не трогаем), а ПОСЛЕ НЕЁ вставляем код:

<a class='more' expr:href='data:post.url' style='font-size:130%;' title='Читаем всю статью…'>Читать дальше...</a>

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

Пояснение: Этот код ни что иное как описание ссылки "Читать далее..." она будет вставлена после тела вашей статьи (а вот появится она или она будет спрятана зависит от того заканчивается ли ваша статья "спрятанной областью" или нет [это описывается в CSS-коде, который мы вставили на предыдущем шаге]).

Описывать ссылки мы уже учились вот в этой статье: Blogger: Начала HTML - Ссылки! и знаем что такое title, и знаем, что может быть разумнее не отправлять читателя навсегда на страницу со статьей, он может и не вернуться к нам на главную для этого можно вписать в тег ссылки параметр target='_blank' (например перед первой >). В нашем коде для ссылки "Читать далее..." я специально поставила описатель стиля style='font-size:130%;' - тем самым сказав браузеру увеличить шрифт на 30% от базового. Вы можете этот описатель убрать, а можете и добавить всяческих красот типа:
изменить цвет color: вот так будет еще заметнее; (вместо русских слов вставляем номер любимого цвета),
font-weight: bold; - хочу чтобы текст ссылки была полужирной и т.д. на что фантазии хватит (такого рода описатели вставляем между апострофами в параметре style и не забываем заканчивать описатель каждого свойства точкой запятой).

Ну, вот собственно с исправлением шаблона мы закончили. Нажимаем ПРОСМОТР и если у нас ничего не сломалось СОХРАНИТЬ.
3) Работа над шаблоном закончена. А чтобы статья стала расширяемой конец статьи, который мы будем прятать, должен быть заключен между тегами <span class="fullpost"> и </span>

Обратие внимание: Очень важно, чтобы статья заканчивалась спрятанной областью (только в этом случае у нас появится ссылка "Читать дальше...")

Теги в статью можно поставить вручную: Когда статья уже целиком написана переходим в режим "Изменить Html", ищем место, начиная с которого будем прятать текст и ставим <span class="fullpost"> теперь идем в самый конец статьи и ставим </span>.

Для тех у кого в статье слишком сложное форматирование, написана специальная статья: Blogger: Структура языка HTML (приложение к статье о расширяемых сообщениях). Она вам поможет грамотно расставить теги для обозначения спрятанной области!

А еще можно изменить Шаблон сообщения:

Идем Панель инструментов -- Настройки -- Форматирование и внизу странички видим:

Шаблон сообщения В окошко напротив этого параметра вставляем следующий код:

Здесь краткое описание поста для главной страницы <br/><span class="fullpost">Здесь размещаем спрятанную часть</span>

Всех Защитников с Праздником,
а Защищаемых - с замечательными Защитниками!

Ура!!!

Света


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

Blogger: Делаем картинку объемнее!

Это песенка Александра Суханова
"Уезжаю в Ленинград", а вот по этой ссылке вы найдете еще много песенок этого замечательного барда:
Александр Суханов(Зеленая карета, 1996)

Уезжаю в Ленинград...

На самом деле не в Ленинград, а в Киев.... на неделю и очень неожиданно. Уезжаем завтра вот с этого самого вокзала, который на картинке, взятой мной из статьи в Википедии "Киевский вокзал".

Но мой рассказ будет не о стиле неоклассицизма с элементами ампира, в котором был построен этот вокзал более 90 лет назад и даже не о том как мне не хочется от вас всех уеэжать, хотя к некоторым читателям мы будем и ближе по крайней мере географически.... А расскажу я вам, как можно придать картинке в блоге некий 3D эффект.

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

Итак, в прошлый раз (Blogger: Картинка с подписью!), мы вспомнили немного о стилях CSS. Сегодня я покажу еще пару свойств которые можно добавить к стилю, описывающему вашу картинку или что угодно еще.

1) padding - отступ
2) border - рамка

назначая для padding полжительное значение в пикселях или процентах, мы заставляем наш объект в данном случае картинку немного сжаться - отодвинуться внутрь от её границ. Граница же останется на месте и мы её даже покрасивее выделим, назначая какие-нибудь красивые значения для параметра border.

В этой статье я назначила параметру padding значение 5px.
А рамку (border) описала следующими параметрами: 4px groove #6D5C4C что значит толщина рамки 3px стиль рамки groove (гравированный), а это #6D5C4C номер цвета или он может записываться так же как rgb(197, 166, 137) - я без лишних затей взяла цвет, который уже используется в этом шаблоне. Вы, конечно подберете свой цвет для рамочки.

Кстати, оба параметра (padding и border) могут задаваться как для всех сторон сразу, так и для каждой стороны по-отдельности. Тогда они будут записываться так padding-top, padding-bottom, padding-left, padding-right для padding и тоже самое для border border-top, border-bottom, border-left, border-right.

Если с padding почти все понятно, смотрим на картинку и чисто визуально решаем стоит ли нам еще чуть чуть увеличить или уменьшить отступ, то для border есть очень хорошая страничка показывающая возможности этого параметра CSS Border. А внизу странички там есть даже HTML-описание c рамочками, с которым можно поиграться и посмотреть на результат.

Кому читать на английском не интересно я быстренько нарисую какие бывают рамочки. Везде рамочки будут синего цвета и шириной 5px, чтобы лучше было видно.

style="border: 5px solid blue;"

style="border: 5px double blue;"

style="border: 5px groove blue;"

style="border: 5px dotted blue;"

style="border: 5px dashed blue;"

style="border: 5px inset blue;"

style="border: 5px outset blue;"

style="border: 5px ridged blue;"

style="border: 5px hidden blue;" (рамочку видите? и правильно, что нет - она ведь спрятанная!

Теперь у вас уж точно есть то над чем можно поэкспериментировать.

Экспериментировать можно над любой картинкой в вашем блоге. Добавляем в параметр style="" описания нашей картинки <img ... > элемент padding (вот у меня было добавлено padding: 5px;) и элемент border (у меня было как вы помните border: 4px groove #6D5C4C; )

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

Итак, идем Панель инструментов, Дизайн, Изменить Html
1) Сохраняем текущее состояние нашего Шаблона (Blogger: Сохраняем и восстанавливаем шаблон на Blogger(е)!)
2) Теперь ищем в нашем шаблоне строчку: .post img
после этой строчки в фигурных скобках будет CSS описание как выглядят картинки в ваших статьях. Измените значения для padding и border, на те которые вам понравились в ходе предыдущего эксперимента. Нажмите ПРОСМОТР посмотреть как это будет выглядеть и СОХРАНИТЬ ШАБЛОН если вы довольны результатом. Нажмите УБРАТЬ ИЗМЕНЕНИЯ если что-то вам не понравилось.

Всем Любви и Удачи!

А я через 18 часов сажусь на поезд...

Света


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

Blogger: Картинка с подписью!

Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков.
У Кайла в блоге можно найти целую коллекцию фотографий этих персонажей:
Russia: What to do With Old Mufflers and Converters!

Расскажи больше...

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

Думаю, что и другим читателям это будет интересно. Для того чтобы делать подписи к картинкам нам надо будет припомнить все что мы знаем об Html (Стандартном языке разметки документов). Ну или хотя бы самое основное, что Html будучи языком разметки документов состоит из этих самых меток, которые принято называть тэгами (tag). Метки (т.е. тэги) бывают одиночными (непарными) или парными. И всегда заключаются в угловые скобки - знаки меньше и больше < >.

Примером одиночного - непарного тэга может служить тэг описания картинки <img ...>, который говорит вот здесь у нас будет картинка, а внутри тэга записываются его параметры такие как адрес (т.е. где эта картинка лежит в интернете) - это обязательно, конечно, заголовок картинки (это надпись, которую ваш читатель увидит, если наведет мышкой на картинку) и т.д. подробно я об этом рассказывала в статье: Blogger: Меняем размер картинки!. Очень рекомендую перечитать!

Большинство же тэгов являются парными и это естественно, они отмечают начало и конец чего-то. Ну, например абзаца, или текста который является ссылкой (кстати, если вы не знаете как правильно оформить на Html ссылку пожалуйста сюда: Blogger: Начала HTML - Ссылки!, но сегодня впрочем нам это не понадобится.) Парный тэг состоит из двух частей: метка начала тега <типтэга ...> и метка конца </типтэга> Типтэга - это несколько латинских букв (иногда одна латинская буква). Так мы уже рассматривали:

a - для ссылки (парный)
img - для картинки (непарный)
center - для позиционирования чего- либо по центру (парный)

Самые любознательные могут посмотреть перечень всех тегов Html.

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

А самым важным является то, что в любой Html тэг можно добавить параметр style, в котором можно записать как мы хотим увидеть объект, описываемый этой меткой. Ну, например ширину и высоту картинки, величину, шрифт и цвет буковок в абзаце и т.д.

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

Загружаем картинку через Blogger.

0) Меняем размеры картинки перетаскиваем её на нужное нам место;
1) Переходим из режима Создать в режим Изменить Html;
2) Видим абракадабру от Blogger'а, описывающую нашу картинку. Я вот например увидела такую:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 300pх; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a>

3) Не пугаемся ничего, а окружаем этот текст, описывающий нашу картинку, парным Html тэгом описания блока: <div style=""> - перед началом описания картинки и </div> в конце описания.

4) Теперь печатаем наш текст для описания картинки. Печатаем его между концом описания картинки и закрывающим тегом </div>.

5) Внимательно смотрим на описание картинки и находим в нем параметр style

6) Начинаем переносить, а некоторые элементы копировать из стиля описания картинки в стиль описания блока.

Так элемент описания отступов margin мы переносим из style картинки в style нашего блока. Не забываем про точку с запятой ; (переносим значит в стиле для картинки этого элемента уже не будет, а он будет только в стиле описания блока!)

Мы переносим также элемент описания обтекания текстом float.

Ширину картинки width мы копируем из style картинки в style описания блока div.

Ну, вот и всё... Пожеланию в описание style для div можно добавить

text-align: center; или text-align: justify; для размещения подписи по центру блока или выравниванию её по ширине получившегося столбца,

color:blue; - это будет цвет букв в нашем блоке - столбце. Конечно, blue взято для примера, вы туда подставите шестизначный код цвета или pink или еще английское название какого-нибудь другого красивого цвета (Про цвета я рассказывала здесь: Blogger: Готовим краски для раскраски!).

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

можно так же изменить величину шрифта в нашем блоке, путем добавления свойства
font-size: 80%;

а можно поставить font-style: italic; это чтобы подпись была курсивом
и добавить font-weight: bold; чтобы текст был полужирным.

На сем моя фантазия иссякла, дорогие мои... Будут вопросы спрашивайте!

А это получившийся в этой статье код (картинка и подпись):

<div style="margin: 0pt 10px 10px 0pt; float: left; width: 300px; color: rgb(0, 102, 0); font-size: 80%; text-align: justify; font-style: italic; font-weight: bold;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="cursor: pointer; width: 300px; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a>Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков....</div>

Небольшое добавление: Раз уж у нас все так хорошо пошло, давайте сделаем совсем красиво!

1) Увеличиваем ширину в <div> пикселей на 10;

2) а картинку окружаем тэгами размещения по центру <center> </center>

Вот теперь я вам рассказала абсолютно всё!
А вот это полученный улучшенный код:

<div style="margin: 0pt 10px 10px 0pt; float: left; width: 310px; color: rgb(0, 102, 0); font-size: 80%; text-align: justify; font-style: italic; font-weight: bold;"><center><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg"><img style="cursor: pointer; width: 300px; height: 225px;" src="http://i400.photobucket.com/albums/pp90/peppy200/Blogger4You/100_3528-3.jpg" alt="" border="0" /></a></center>Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков....</div>

Всем удачи и здоровья!
Света


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

Blogger: Голография и раскрашивание скрипта!

Раскрасим Наш Мир и поговорим о голографии!

Здравствуйте! Сегодня мы продолжаем раскрашивать Наш Мир, вернее наш сайт, нет все-таки наш мир, который каждый из нас пытается создать на просторах интернета...

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

Так и наши интернет дневники - являющиеся только частью нашего мира, может быть как голограмма отражают весь наш мир целиком?

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

Итак, раскрашивать будем на примере скрипта Поиск в нашем блоге, который Катя (Бебеккины Кузяки) себе уже установила и чем я очень горжусь!

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

На самом деле раскрашивать с помощью CSS (Cascading Style Sheets - Каскадных таблиц стилей), очень просто. Для этого в HTML описание объекта который мы хотим раскрасить или как-то изменить мы добавляем волшебный атрибут style и его значением будет строка состоящая из объявлений свойств, каждое из которых представляется в виде пары имя: значение и если у обекта несколько свойств они разделяются точкой с запятой.

Не будучи еще очень большими специалистами в HTML, с атрибутом style мы уже встречались: вот например, когда разговаривали о Картинках для фотохудожников мы изучили такое свойство как ширина width и присвоили ему значение 500px, записав width:500px;

Так что не все так страшно и мы приступаем к раскраске нашего скрипта:

А вот и его код:

<center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите слово для поиска..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Искать" type="submit"/></form></center>

в нем присутствует описание двух графических объектов "поле для ввода" и "кнопка поиск". Вот их то мы сегодня и будем изменять.

В описании поля для ввода уже есть магический атрибут style и он задает ширину поля для ввода (width) - в моем случае это было 200px, но если у вас такое поле в блог не помещается его можно уменьшить: поставьте например width:150px на пробу. Кстати слова в атрибуте value можно тоже изменить, чтобы они помещались в строку ввода.

Какие свойства нам могут понадобиться:
width - ширина
height - высота

background-color - цвет фона
border-color - цвет рамочки

color - цвет шрифта
font-size - размер шрифта

размеры будем указывать в пикселях px
а цвета - 6 шестнадцатиричных цифр с символом # перед ними

Для раскраски нашего скрипта я уже заготовила несколько цветов:

#00CCFF
#FF0000
#3300FF
#00CC00

И вот какой код у меня получился:

<center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #00CCFF; font-size: 14px; background-color: #FF0000;" value="Что ищем?..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #00CCFF; background-color: #00CC00; color: #3300FF;" value="Искать" type="submit"/></form></center>

и вот так он теперь выглядит:

Немного попугаисто, зато никакой цвет не перепутаешь ;).

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

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


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