28.1.09

Blogger: О ярлыках опять - Облако тегов!

68 comments


Я тучка, тучка, тучка.
Я вовсе не медведь.
Ах как приятно тучке,
по небу лететь...
(Подписи к картинкам учимся делать здесь:
Blogger: Картинка с подписью!)
Облако тэгов или куча ярлыков!

Всем доброго времени суток! В субботу дальше Киевского вокзала мне ехать не пришлось, так что на радостях в воскресенье я взялась за написание очередной давно обещанной Скеггльёльд (Трудовые серые будни Скеггльёльд) статьи об Облаке тегов и наверное во вторник мне удастся её опубликовать.

Итак, облако тегов. Облако - туча - куча. Ну а, теги в Blogger'е переводят словом ярлык.. может быть не самый удачный перевод, но какой уж есть.

Пожалуй, пора переходить от лирического отступления к делу, а то так и до вторника можно будет не управится. Прежде всего алгоритм образования облака тегов взят мной из этой статьи: Setup and configuration for New Blogger Tag Cloud / Label Cloud.

Начинаем. Чтобы получить это облако тэгов (кучу ярлыков) Прежде всего нам надо завести эти самые ярлыки. Стоит ли их вообще использовать каждый решает для себя сам. В общем, ярлыки - неплохой инструмент показать читателю на какие темы еще он сможет найти информацию у вас в блоге. А облако тегов на боковой панеле помогает предъявить читателю все (или все значимые) ярлыки вашего блога в наиболее компактной форме. Как назначать ярлыки я уже писала в предыдущей статье: Blogger: Работа с метками и ярлыками!

Продолжаем. Ярлыки, у всех кто их решил завести, у нас к этому моменту предположим уже есть. Теперь на боковую панель надо добавить гаджет под названием Ярлыки:

Как всегда: Панель инструментов --> Дизайн --> Добавить гаджет
и из списка гаджетов выбираем Ярлыки (Покажите все ярлыки сообщений в своем блоге).

Теперь вся подготовительная работа сделана и можно вносить изменение в HTML-код нашего Шаблона.

Панель инструментов --> Дизайн --> Изменить Html

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

Изменение Html кода будет состоять из трех этапов.

Прежде всего поставьте галочку на Расширить шаблоны виджета:


1) Определение переменных для CSS- описания нашего Облака тегов:

Следующий код вставляем перед ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
2) Определяем переменные для JavaScript Облака тегов:

Следующий код вставляем после ]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Кстати, все переменные потом можно будет подправить...

3) Последний и основной кусок кода.

Теперь ищем вот такую строчку в нашем коде:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Ровно такая может и не найтись пробелом больше - пробелом меньше сами понимаете... основное здесь возможно: id='Label1'

Теперь весь текст начиная с этой или примерно этой строчки
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

и заканчивая строчкой окончания этого виджета: </b:widget>

заменяем на следующий код:
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
Теперь нажимаем синенькую кнопочку ПРОСМОТР и если на боковой панеле Список Ярлыков преобразовалсь в Облако, нажимаем оранжевую кнопку СОХРАНИТЬ ШАБЛОН, если Облако не появилось или Blogger сообщает нам об ошибке мы нажимаем УБРАТЬ ИЗМЕНЕНИЯ и пытаемся проделать все манипуляции еще раз.

Извиняюсь перед читатетлями, но далее в этой статье использовать слово ялык, принятое в русскоязычном Blogger'e я не смогу. Я заменю его (чтобы текст далее звучал более по русски) словом раздел.

Две известные причины когда этот скрипт может не заработать:
Если все ваши разделы содержат лишь по одной статье.
Если в названии разделов содержатся апострофы или двойные кавычки.

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

Заходим опять Панель инструментов --> Дизайн --> Изменить Html и внимательно смотрим на переменные добавленные нами на шаге 2).

Вот что они означают:

var cloudMin= 1; - Минимальное количество статей в разделе. С помощью этой переменной вы можете исключить все редко-используемые ярлыки из вашего облака тегов.

var maxFontSize = 20; - Максимальный размер шрифта используемый для Облака тэгов
var minFontSize = 10; - Минимальный размер шрифта используемый для Облака тэгов

var maxColor = [0,0,255]; - Цвет используемый для разделов с максимальным количеством статей
var minColor = [0,0,0]; - Цвет используемый для разделов с минимальным количеством статей

Цвет записываются в виде rgb о цветах мы немного рассуждали здесь: Blogger: Готовим краски для раскраски! Теперь я нашла еще один очень полезный online инструмент для подбора цветов: Color Schemer Online v2. И здесь они приводят номера цветов не только в шестнацатиричной но и в десятичной системе счисления. (Нам для этого скрипта нужны будут номера цветов в десятичной систем - т.е. никаких там A и F в номерах и все что между ними). Я кстати, наконец поменяла номера цветов и у себя в облаке тегов. Вот как оказывается полезно писать статьи! У меня теперь: var maxColor = [255,0,0]; (красный) и var minColor = [255,255,0]; (желтый). Выглядит помоему намного более гармонично, чем дефолтнные минимальный - черный и максимальный - синий.

И последняя переменная

var lcShowCount = false; Может принимать два значения false и true. - Её значение - показывать ли количество статей в разделе рядом с именем ярлыка. Дефолтное значение false (т.е. ложно - т.е. не показывать), можно и показывать, но меня лично устроил показколичества статей по наведению мышки на имя ярлыка.

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

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

PS Кому захочется поменять облако тегов на стандартный Blogger'овский гаджет обратно - это легко сделать. Найдите место где вы вставили последний кусок кода и замените его целиком на этот код:
<b:widget id='Label1' locked='false' title='Lables!' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


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

21.1.09

Blogger: Работа с метками и ярлыками!

87 comments

Мальчик с пальчик
Иллюстрация Адриен Сегур к сказке Ш.Перо "Мальчик-с-пальчик" найдена на изумительном сайте
Иллюстрации к книгам. А если вы, как и я, влюбились в иллюстрации этой французской художницы, родившейся в 1901, я вам с удовольствием порекомендую сайт Adrienne Segur Illustrations (на этом сайте они просят не использовать их картинки в горячую, т.е. сначала скопируйте их к себе на компьютер, а потом можно их использовать). К сожалению на русском языке рассказа об Адриен Сегур я не нашла, а вот по-английски мне понравилась вот эта статья: A Tribute to Adrienne Ségur by Terri Windling
По следам Мальчика-С-Пальчика

Всем доброго времени суток! Я тут ненадолго вернулась из Киева (в субботу возможно опять туда поеду), а пока у нас есть немного времени чтобы начать разговор о метках или ярлыках, как слово labels перевели в Blogger'е на русский.

Начать, потому что статей будет несколько.

Про метки в блоге я уже упоминала, когда мы разговаривали о ссылках и я тогда сказала, что разумная система навигации поможет вам удержать подольше внимание случайно зашедшего к вам читателя на вашем блоге. Так глядишь, прочитав несколько статей на интересующую его тему он возможно захочет запомнить это (ваш блог) интересное место в интернете. Облегчим ли мы ему эту задачу "Запомнить наш блог" и что для этого можно сделать мы поговорим в другой раз. А сегодня мы обсуждаем метки или ярлыки, я даже думаю что их можно назвать так же рубриками (а они называют их labels и это их право).

Итак, ЯРЛЫКИ (метки, рубрики):

1) Как присвоить статье во время написания или редактирование несколько меток многие знают. Для тех кто не знает покажу на рисунке. Я обвела слово "Ярлыки" в рамочку, напротив него есть поле, куда можно через запятую ввести эти самые ярлыки, а если мы уже использовали ярлыки, то стрелочка на рисунке указывает на ссылку Показать все (они имеют ввиду ярлыки):


2) А вот что делать если у вас в блоге уже около сотни статей и только теперь, соблазнившись новыми возможностями, которые у вас появляются при использовании ярлыков, вы решили навесить на каждую свою статью по ярлыку или по паре. Можно попробовать отредактировать все 100 статей и как говорится "Терпение и труд все перетрут". А хихикать между прочим не надо. Вот Кайл - творческая личность постоянно в своем блоге то заводит labels, то от них избавляется... я в период отказа от ярлыков в своих статьях все же пыталась ставить метки пиратским образом, а потом он, заметив это, их (метки, конечно же не статьи) потёр, а я очень расстраивалась, потому что это такой труд поставить их на все мои статьи обратно.... Ладно, хватит лирики - теперь я знаю, а вы через пару минут узнаете, как легко можно назначить новые метки или удалить старые сразу группе статей. Показываю на картинке. Идем Панель инструментов --> Изменить сообщения и ... да это если приглядеться по-внимательнее просто рай для работы с ярлыками!

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


3) А еще я действительно люблю метки и очень люблю чтобы они бросались в глаза. И может быть если вы еще не совсем притомились читать о метках я вам расскажу как их сделать ещё заметнее. Для этого нам придется немного поправить наш шаблон. Идем Панель инструментов --> Дизайн --> Изменить HTML Сначала как всегда делаем резервную копию текущего шаблона, затем отмечаем Расширить шаблоны виджета и теперь ищем в HTML коде нашего блога вот такую строчку:
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
В этой строчке <data:label.name/> и есть наша метка, та самая которая появляется в футере (в конце) нашей статьи. Её-то я и хочу сделать поярче. Для этого прежде всего я её окружу HTML тегами <b> </b> - т.е. сделаю мои метки полужирными, а к этому b как всегда можно навесить стиль, а в стиле указать размер, цвет и шрифт. Ну, например style="font-size:120%; color:green; font-family:sans-serif;" И все вместе у нас получается
<a expr:href='data:label.url' rel='tag'><b style="font-size:120%; color:green; font-family:sans-serif;"><data:label.name/></b></a>
А вот если я хочу само слово Ярлыки сделать поярче и позаметнее, придется мне подняться на пару строчек выше и взять в аналогичные b-теги вот такое выражение <data:postLabelsLabel/> и у меня получилось так:
<b style="font-size:130%; color:red; font-family:sans-serif;"><data:postLabelsLabel/></b>
Само слово Ярлыки я сделала красным и еще немного покрупнее, а вообще слово Рубрики мне нравится больше, так что не удивляйтесь, если вместо слова ярлыки в моем блоге вы когда-нибудь найдете слово Рубрики я это сделаю очень просто :

Вот всю эту "непонятность": <data:postLabelsLabel/> заменю одним простым словом Рубрики: и не забуду поставить после него двоеточие. :)

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

Читать еще о том, что можно сделать с ярлыками:
1) Blogger: О ярлыках опять - Облако тегов!

Всем Удачи и Хорошего настроения!
Света

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

11.1.09

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

30 comments




Это песенка Александра Суханова
"Уезжаю в Ленинград", а вот по этой ссылке вы найдете еще много песенок этого замечательного барда:
Александр Суханов(Зеленая карета, 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 часов сажусь на поезд...

Света


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

9.1.09

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

15 comments

Вот такие поделки из ненужных металлических предметов мы обнаружили с Кайлом на одном из московских авторынков.
У Кайла в блоге можно найти целую коллекцию фотографий этих персонажей:
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>


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


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

6.1.09

Blogger: Можно ли восстановить удаленный Гаджет?

25 comments

Иллюстрация на тему: Что будет если удалить из блога нужный гаджет?
Иллюстрацией к этой статье послужила картина английского художника карикатуриста, знаменитого иллюстратора книг и друга Чарльза Диккенса Джорджа Крукшенка(1792 — 1878) "The Headache".

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

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

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

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

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

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

И всё было замечательно, вот только гаджеты не восстановились! Не восстановились они из бэкапа шаблона. (Бэкапом я называю, файл который получился в результате резервного копирования.) Не восстановились они и из полного бэкапа, который я сделала по этой инструкции (Самый легкий способ сделать бэкап на Blogger'е!) и восстанавливала в свежесозданный блог, потому что мы знаем, что в существующий блог шаблон не восстанавливается, но восстанавливаются только посты, с метками, датами и комментариями (Blogger: Восстанавливаем Блог из Бэкапа!). Наверное, я не справедлива - восстановились заголовки удаленных мной гаджетов, но что мне за счастье в эти заголовках когда я удалила гаджет с RSS-подпиской, а он у меня как вы видите на боковой панеле не просто картинка со ссылкою, а довольно навороченная конструкция и гаджет, в котором я немного рассказываю о нас с Кайлом.

Погоревала я не долго, блог-то у меня живой, надо было срочно всё восстанавливать, а уже потом искать способ сделать это по-науке. Будучи человеком ну, ооочень опытным в вопросе удаления и восстановления блогов (Как восстановить удаленный блог на BLOGSPOT(Blogger)?), я пошла в свой любимый Google и в поисковом запросе поставила blogger4you, если вы заметили мой блог имеет такой адрес: http://blogger4you.blogspot.com Google мне тут же выдал мою старую статью и я не стала на неё кликать я кликнула на ссылочку под моей статьей Сохранено в кэше. Моя статья в кэше естественно была на старом шаблоне с не удаленными еще гаджетами. Я полезла в исходник полученной страницы и скопировала от туда код для удаленных гаджетов.

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

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

В настоящее время на Blogger'е не существует способа сохранения и восстановления пользовательских гаджетов. Будьте внимательны и осторожны!

Возможно на своем компьютере надо завести директорию Мои Гаджеты и копировать туда в виде .txt файлов все гаджеты, которые вы добавляете на свой блог.

Кажется, в этой статье я упомянула все мои самые важные статьи на тему Сохранения-Восстановления информации на платформе Blogger. Всю информацию по этой теме вы можете найти по метке Сохранение-Восстановление.

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



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

2.1.09

Blogger: Новогодний PageRank от Google!

17 comments


История этой картинки очень интересная. Нужна была картинка про подарки от Google и я, совершенно как вы понимаете, случайно наткнулась на очень интересную Рождественскую акцию Американо-Канадской военной организации Norad, одна из их миссий наблюдать за воздушным пространством во всем мире для предотвращения ракетного удара. Так вот в преддверии Рождества они решили понаблюдать за перемещениями Санты и даже создали по этому поводу. Сейчас этот сайт в целом закончил свою работу, а похоже был очень интересным... и я вам дам ссылочку только на одну его страничку: Рождество: Обратный отсчет!. Как явствует из названия это счетчик для детей показывающий сколько времени оставалось до Рождества. А заодно чтобы они не соскучились в ожидании и более 20 флэш-игрушек - некоторые из них мне показались очень занимательными. И вот вчера вместо того чтобы писать эту статью я, честно говоря, там немного подвисла... о чем впрочем не жалею. А вам очень рекомендую заглянуть туда с детками! ;)
1 Января - время распаковывать подарки!

Всем доброго времени суток! И еще раз с Наступившим уже Новым Годом!

Как мы все помним из нашего детства, в Новогоднюю Ночь к нам приходит Дед Мороз и приносит подарки, которые складывает под ёлку. И вот рано утром 1го Января мы все распаковываем, полученные подарки.

В этом году Google обновил PageRank 31 Декабря. Что такое Page Rank я уже рассказывала вот в этой статье:
Blogger: Page Rank и Nofollow!, кто не читал - очень рекомендую! Для всех остальных я с удовольствием воспроизвожу здесь опубликованный ранее JavaScript, чтобы вы все смогли распаковать свой подарок от Деда Мороза (ой, то есть, посмотреть PageRank от Google) :




Я заметила, что многие блоги, у которых до этого не было PageRank уже получили заслуженные 1, 2 или даже 3. Поздравляю!

Теперь если у вас уже сайту больше 2-3 месяцев и вы регулярно добавляете туда статьи, общаетесь в своем блоге с приятелями/приятельницами, а PageRank'а все еще нет.

Хочу отдельно подчеркнуть, что ни в PageRank'е блоггеровское счастье, но если у вас еще нет PageRank давайте убедимся, что ничего в настройках вашего блога не помешает поисковым роботам регулярно посещать и индексировать его. Ведь возможно кто-то ОЧЕНЬ нуждается в уникальной информации, которой только вы поделились с читателями в своем блоге!

1) Проверьте, пожалуйста, еще раз не затесалась ли у вас в HTML-коде шаблона фраза:
Blogger: Page Rank и Nofollow!
как это проверить я писала все в той же статье: Blogger: Page Rank и Nofollow!

2) Зайдите в настроки вашего блога Панель инструментов -> Настройки

И вот в настройках у них есть очень хитрый вопрос: Вы хотите, чтобы поисковые системы находили ваш блог? И далее, на мой взгляд, идет не самое удачное объяснение. Не очень даже понятно, куда они нас пытаются склонить: (Если Вы выберете "Да" мы включим ваш блог в поиск по блогам Google и отправим запрос ping на Weblogs.com. Если Вы выберете "Нет", все смогут видеть ваш блог, но поисковые системы будут его игнорировать.) Но в любом случае обязательно выберите Да (если, конечно ваш блог не является журналом резидента разведки).

Вот эти две вещи надо обязательно проверить! Причем это две разные вещи. Meta содержится Html-коде шаблона вашего блога, а когда вы меняете ответ на сакраментальный вопрос в настройках blogger'а: Вы хотите, чтобы поисковые системы находили ваш блог? ничего не меняется в Html-коде вашего блога, но меняются указания для поисковых роботов в файле robots.txt

Всем хороших творческих (в любой области) каникул и прекрасного настроения!

Света

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

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