dotRB

CSS Анимация - тест в Blogger

noreply@blogger.com (Croaker) — Wed, 21 Aug 2019 23:17:00 +0000

Ruby

Brew

Код здесь: https://codepen.io/devlanev/pen/NWKbEKR

Все стили и HTML прописывались прямо в теле Сообщения.

При создании сообщения (Важно!)
Настройки сообщения — Параметры:

Интерпретировать введенный HTML-код
Использовать тег <br>

Пример сделан для этого комментария (и далее)

Обойма социальных кнопок для Blogger

noreply@blogger.com (Croaker) — Wed, 28 May 2014 08:27:00 +0000

Как добавить набор кнопок «Поделиться в социальных сетях» внизу сообщения Blogger.

Сервисов для создания набора кнопок «Поделиться» (share) а-ля «все-в-одном» сейчас в Интернете как блох на бродячей собаке. Выбор какого-то конкретного сервиса — это уже вопрос личных ~~сексуальных~~ предпочтений.

Предлагаю воспользоваться сервисом AddThis.

Почему именно AddThis? — А вот смотри:

Есть кнопки (неожиданно, правда?)
Есть возможность их настройки
Ведется статистика
Ну а, собственно, почему бы и нет?

Регистрация в сервисе AddThis.

Первонахово, нужно создать учетную запись в сервисе. По-моему, это вообще опционально, то есть — «по желанию». Лично я уже был давно зарегистрирован, а посему за сединой ноздрей уже и не помню, нужна она или нет.

В любом случае, советую зарегистрироваться — понадобится для сбора статистики. Здесь она называется «Аналитика». «А налито ли?»

Регистрация, как и везде, простая как дверь. Справиться с ней под силу и хромому таксидермисту. Поэтому, ну её к лешему — дальше интересней.

Выбор и настройка кнопок социальных сетей.

После регистрации погладь большую розовую… кнопку Get the Code «Получить код». Из-под неё тут же выскользнет меню. Выбери Share Buttons «Кнопки "Поделиться"».

Это приведёт тебя на страницу выбора стиля кнопок.

Выбери область применения кнопок A Website (вебсайт).
Не Blogger. (мы не ищем легкий путей ;) )
Выбери стиль кнопок
Движок сайта автоматически подберет тебе "наиболее оптимальный" (по его мнению) набор кнопок

«Да кто ты такой чтобы мне указывать,
ничтожный пакет молока?!!»

Поэтому жми ссылку Disable and select your own buttons «Пресечь и выбрать собственные кнопки».

Откроется сокрытый доселе раздел выбора кнопок.

Тут всё просто: перетаскиваем слева-направо, сортируем сверху-вниз. (Наискосок не пробовал).

Далее в разделе Add to your site «Добавь на свой сайт» копируй код в окошке. Или просто жми большую синюю кнопку Grab it «Взять его!»

Вставка кода в шаблон Blogger

Перейди в Blogger: Панель управления → Шаблон → Изменить HTML

Найди инклуд Сообщения:

<b:includable id='post' var='post'>

Разверни код инклуда. Внутри него ориентируйся на <data:post.body/>. Это собственно, переменная, в которой хранится текст сообщения («поста») блога.

Вот и где-то после этой переменной ищи блок футера — «подвала» поста.

Выглядит он примерно так:

<div class='post-footer'>
  …тут различные вложенные элементы…
</div>

Сразу после <div class='post-footer'> в новой строке нужно разместить нижеследующую конструкцию. В которую и вложить код кнопок AddThis.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- Сюда (вместо всей этой строки) вставить код AddThis -->
</b:if>

Всё. Сохранить шаблон.

(Не понятно?)

Контрольный выстрел в голову

Пример:

<div class='post-footer'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style addthis_32x32_style'>
<a class='addthis_button_facebook'/>
<a class='addthis_button_google_plusone_share'/>
<a class='addthis_button_twitter'/>
<a class='addthis_button_vk'/>
<a class='addthis_button_mymailru'/>
<a class='addthis_button_compact'/><a class='addthis_counter addthis_bubble_style'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=your_pubid' type='text/javascript'/>
<!-- AddThis Button END -->
  </b:if>
  <!-- Дальше без изменений -->

Спасибо за внимание :)

Rails file_column изменить имя загруженного файла

noreply@blogger.com (Croaker) — Sun, 04 May 2014 11:12:00 +0000

How to rename a file with file_column plugin.

Собственно, понадобилось… Время от времени изменять имя файла, загруженного с помощью file_column. Например так: stylesheet.css → stylesheet_1399194798.css.

Вот, что получилось.

Модель

/app/models/custom_template_file.rb

class CustomTemplateFile < ActiveRecord::Base
  db_magic_init

#... blah-blah...
  belongs_to :fileable, :polymorphic => true
  file_column :file, :fix_file_extensions => false

#...

  # Renames the file and saves a file-data into db field
  def rename_to(new_name)
    file_dir = File.dirname(file)
    file_path = "#{dirname}/#{new_name}"
    File.rename(file, file_path)
    # Update db field
    update_attributes( :file => f = File.open(file_path, "r") )
    f.close
  end

#...

end

Контроллер

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

/app/controllers/template_controller.rb

#...

# Returns a CustomTemplateFile obj :file => "stylesheet.css"
@template_file = @template.custom_template_file(:stylesheet)

#...

# Renames the file using timestamp
@template_file.rename_to("stylesheet_#{Time.now.to_i}.css")

#...

Копипастить необязательно; импровизируй! :)

Тут и сказочке #EOF

GlowingSword Blog: Unable to find specified executable ошибка в Thunderbird

noreply@blogger.com (Croaker) — Wed, 21 Sep 2011 10:13:00 +0000

GlowingSword Blog: Unable to find specified executable ошибка в Thunderbird

Поимел проблему с Thunderbird 6.0.2 на Linux Mint 9 Росинка.

А всего-то и нужно было — доустановить один пакет

sudo apt-get install libnotify-bin

Ошибка эта достала — пожалел, что обновил Thunderbird. А вот предложенное решение помогло :)

4.04

noreply@blogger.com (Croaker) — Mon, 04 Apr 2011 16:36:00 +0000

С днем веб-разработчика, веб-мастера!

День святого Исидора

Cвятой Исидор Севильский считается покровителем учеников и студентов, а в 2003 году папа Иоанн Павел II официально назвал святого Исидора покровителем интернета.

Католическая церковь избрала его покровителем интернета, основываясь, прежде всего, на том, что Всемирная сеть — это огромная сокровищница практического и теоретического человеческого знания.

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

Не в тему. Про зажигалку

noreply@blogger.com (Croaker) — Wed, 23 Feb 2011 23:41:00 +0000

Сегодня (вчера) друг невзначай подарил зажигалку. Видя как я с лицом одухотворенной обезьяны кручу ее в руках, объяснил: «Она зажигается как деньги пересчитывают».

А я как дипломированный инженер пытался ее за всевозможные неровности ногтем поддеть!

Многие вещи проще, чем кажутся.

UPD Специально для тех кто просил фоток :)

P.S. Фотки не мои — из того, что выдал гугль.

Выравнивание по центру

noreply@blogger.com (Croaker) — Thu, 21 Oct 2010 06:28:00 +0000

Простой пример выравнивания по центру; подходит как для страницы, так и для отдельных блоков. Вот как это сделано в шаблонах Blogger.

Магия кроется в тегах body и div outer-wrapper. Хотя нет, вру: магия как обычно в CSS.

В общем случае, теги расположены так:

<body>
  <div id="outer-wrapper">
    ...содержание...
  </div>
</body>

Чтобы выровнять содержимое по центру, нужно задать body text-align:center, а для блока outer-wrapper фиксированную ширину width:1000px, а так же отступы auto слева и справа.

Теперь нужно вернуть содержимому outer-wrapper «нормальное» выравнивание текста (по левому краю) text-align:left.

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

body {
  text-align:center;
}
#outer-wrapper {
  margin:0 auto;
  text-align:left;
  width:1000px;
}

Вуа-ля – страница расположена по центру.

Mail.ru Вас стер!

noreply@blogger.com (Croaker) — Sun, 17 Oct 2010 17:06:00 +0000

Когда-то в стародавние времена, когда компьютеры были большими, а сервисы маленькими, завел я себе аккаунт на mail.ru. Повзрослев и, – надеюсь, – поумнев, перебрался я на гуглопочту. Старый же почтовый аккаунт оставил преимущественно для мейловских сервисов и «временных» регистраций.

Хотя… в той адресной книге оставалось у меня некоторое количество респондентов, с которыми иногда переписыва~~юсь~~лся. На Новый год, например, или просто по случаю или срочной надобности.

Не так давно понадобилось мне списаться через почту М.ру. Тут-то меня и ждал не самый приятный сюрприз:

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

И чуть ниже:

Если Вы хотите продолжить им пользоваться, нажмите разблокировать.

Спасибо и на том.

Выбираю «разблокировать» и наконец-то попадаю в свой “soap box”. Где действительно ничегошеньки /*не соврали ;)*/ а во Входящих единственное письмо:

Добро пожаловать на Mail.Ru!
Вы стали пользователем самого большого и надежного почтового сервиса Рунета.

Простите, «надежного»?!! %)))

Upd 20.10.2010 Улыбнул следующий пункт:

8.1 Пользователь согласен с тем, что Mail.Ru оставляет за собой право прекратить действие учетной записи Пользователя в любое время без предварительного уведомления Пользователя.

Еще по теме:
2 скрытых способа использования адреса Gmail

2 скрытых способа использования адреса Gmail

noreply@blogger.com (Croaker) — Wed, 06 Oct 2010 21:03:00 +0000

Недавно прочел заметку в официальном блоге Gmail о двух скрытых способах использования адреса электронной почты Google. По сути это два способа изменять адрес своей электронной почты, чтобы он по-прежнему оставался рабочим.

Добавь знак плюс («+») и любую комбинацию слов или цифр после своего email адреса. Например, если твой адрес topblogger@gmail.com, ты можешь отправлять почту на topblogger+friends@gmail.com или topblogger+mailinglists@gmail.com
Вставь одну или несколько точек («.») где-либо в своем email адресе. Gmail не учитывает точки в адресах – мы просто игнорируем их. Например, ты можешь дать человеку свой адрес как topblogger@gmail.com, top.blogger@gmail.com или top.blog.g.er@gmail.com.

Про способ с точкой я знал довольно давно и использовал его, например, для многократной регистрации на сайте под одним и тем же (видоизмененным) адресом. Или для регистрации на недоверенных сервисах. Например, использовав адрес вида t.opblogger@gmail.com. Впоследствии, зная адрес, на который приходит нежелаельная почта, я мог тут же загнать ее под фильтр.

Способ же с плюсом («+») эти возможности несколько расширяет. Например: topblogger+jobs@gmail.com или topblogger+news@gmail.com; или даже topblogger+sosedki21kv@gmail.com.

2 hidden ways to get more from your Gmail address - Official Gmail Blog

Выиграл погоду

noreply@blogger.com (Croaker) — Mon, 09 Aug 2010 13:10:00 +0000

Выиграл погоду Яндекс. То, что началось, можно условно назвать метелью, но вместо снега песок =).

Я 1:1 Яндекс.Погода

вт 10	ср 11	чт 12
метель	метель	метель
+33	+31	+33

Ура, спасибо! Закрепите, пожалуйста.

Переиграйте Яндекс.Погоду!

Блогинг и троллинг

noreply@blogger.com (Croaker) — Tue, 06 Apr 2010 12:51:00 +0000

«Бессмысленная и бездарная статья»
– Вася Пупкин

«Не знаю шо имел ввиду автор, но читать не рекомендую»
– Дмытро Сеопульченко

«Это статья о блоггинге и троллинге»
– Капитан Очевидность

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

#TODO: Купить хорошие кроссовки для бега.

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

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

Мои ёрничания по тексту – исключительно моя реакция на написанное и не обязательно "правильная".

Ощущения такие, что некоторые блогописцы (из обширной и весьма глубокой ниши сео-манимейкинга) в понедельник не совсем удачно похмелившись, вспоминают о том, что "надо бы и поработать". А именно – тиснуть в Интернет очередную тривиальность, по принципу «абы було».

Я на полном серьезе задумываюсь над созданием специальной кнопки для твиттер: “Unfollow всех мудаков на этой странице”.

Оказывается, вчера был день Исидора Севильского – покровителя Интернет.

Ну ты "почти успел"! Буквально в последний вагон уходящего поезда... сутки спустя :). Молодец – держи свисток! Поэтому это и называется «день 404» (4 апреля и по-совместительству – самая популярная ошибка «документ не найден»), Международный День Интернета и День веб-разработчика.

«Джокер» – это тот же «покер», но с буквы J. Совпадение?
Нет – «джовпадение»!
т/с Друзья (Friends)

По прочтении некоторых статей в разных блогах создается впечатление, что их пишет один и тот же ~~идиот~~ человек. Броский и бессмысленный заголовок – невнятное сено внутри – в конце поста вопрос, «чтоб типа заставить читателя задуматься». Похоже, что такие авторы скачали с депозита книжку «Суперблогер! Как писать посты, чтобы зарабатывать много бабла в интернете. 100%-ное руководство!» и четко следуют "сокровенному знанию".

Секрет Google раскрыт!

Я познал все 32 секретных алгоритмов Яндекс
И теперь я самый главный ~~бездарь~~ СЕО в интернете.

Я раскрыл секрет популярности Википедии

Почитаем...

Песец

Ухтышка! А я-то думал про 521 037 статей на русском языке, многократно выверенный контент, которому безоговорочно доверяют и потому регулярно ссылаются. Как я ошибался – оказывается есть «секрет».

Джон. Что-то сомнительно...
Джен. При всем моем уважении к тебе, Джон, но... Я глава IT-отдела, и я получила этот пост не просто так. Если ты вобьешь в «Гугле» слово «гугл», то ты сломаешь Интернет.
т/с Компьютерщики (The IT Crowd)

По прочтении подобных креативов понимаешь две вещи:

Ты абсолютно бездарно потратил 10–15 минут своего времени;

Скорость появления таких постов (и их ценность) сопоставима со скоростью машинописи их «творца»;

Читать это можно только по диагонали; писалось – тоже;

Автору абсолютно насрать на все твои выводы.

Угадай, чего ожидает автор абсолютно пустого и шаблонного поста? – Как минимум серьезных и конструктивных комментариев! I'm fucking serious! Комментов совершенно отличных от чего-либо в духе «Ты дурак».

Да только когда понимаешь, что на подробный и доходчивый комментарий ты потратишь времени едва ли не больше, чем автор на написание поста, ничего другого на ум и не приходит. А ты говоришь «троллинг» :)

В контексте вышеоткнопанного ~~бреда~~ контента... Любезный блогер-баблоруб, ну сколько можно повторять: «Не хочешь срать – не мучай жопу». Нечего написать – не пиши, иди в баню. Я серьезно. Сходи в баню с водкой и девочками, отдохни, развейся. Ты же SEO-гуру и супер-манимейкер. Уж это, наверное, сможешь себе позволить. Мы ведь одинаково понимаем слово «манимейкинг»?

Такой вот скверный, пустой и бездарный апрельский псто. Всех благ! ..и не верь в «секретные дзюцу».

P.S. Кто понял шутку про две вещи – давай зачётку. Комменты в духе «Ты ниумеиш щитать!» тоже всячески приветствуются.

Примечание Кэпа: Оказывается, «троллинг» и «тролль» – это просто совпадение.

...И для разрядки обстановки :)

Видео: Mr. Freeman «Я – с большой буквы»

RSS-бонус: демотиваторы Капитан Очевидность

Редизайн блога

noreply@blogger.com (Croaker) — Thu, 01 Apr 2010 10:00:00 +0000

В рамках мероприятий по передаче блога новому владельцу (блог был продан за бочку варенья, коробку печенья и 552 погонных метра оральных ласк) выполнен редизайн блога. В соответствии с новой концепцией.

Итак, традиционное «было – стало».

Было – Ruby Brewed

Ruby Brewed – Блог web-разработчика. Рецепты для Blogger, Ruby on Rails, XML, XSLT, CSS, HTML, JavaScript на практике.

Ruby Brewed – Тюнинг Blogger

Стало – «Рупор блондинки»

Blogger для блондинок. Обо всем популярно и большими буквами!

Рупор блондинки – Blogger для блондинок

Следующий пост в этом блоге будет уже от лица нового владельца (точнее – владелицы) ресурса. Попрошу любить и жаловать :).

Слоеный заголовок Blogger

noreply@blogger.com (Croaker) — Tue, 02 Mar 2010 08:35:00 +0000

Продолжаю серию постов о тюнинге заголовка Blogger. В этот раз картинка – фоновое изображение под Названием и Описанием блога.

Напомню, что в Blogger существуют три варианта виджета Заголовок. Этот – второй и в терминах «Блоггера» обозначен как

Изображение после названия и описания

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

Для своих ~~бесчеловечных~~ экспериментов я снова выбрал стандартный шаблон Minima.

Этап первый: Загрузка и настройка изображения

В первую очередь подготовь фоновое изображение заданной ширины. Для шаблона Minima по-умолчанию это 660 пикселей.

Загрузи изображение и настрой размещение с помощью стандартной формы виджета «заголовок»

Настройка виджета «заголовок»

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

Этап 1: Загрузка и настройка виджета «заголовок»

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

~~Вместо самолета получился паровоз~~;
ненужный отступ сверху, над изображением;
изображение «вылазит» за пределы рамки.

Совет «после сборки обработать напильником» по-прежнему работает. Поэтому, напильник в руки и вперед!

Этап второй: Тюнинг виджета

Перво-наперво на странице настроек шаблона (Дизайн – Изменить HTML) отметь Расширить шаблоны виджета.

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

Полный код виджета заголовка (с комментариями) можно посмотреть здесь.

Листинг 1: Фрагмент виджета «Заголовок»

    <b:else/>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;
+ &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot;
+ data:widthStyleStr
+ &quot;min-height: &quot; + data:height + &quot;px;&quot;
+ &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>

Листинг 2: Фрагмент стилей CSS шаблона

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Теперь нужно избавиться от комментариев и вычислимого выражения в коде виджета, а результат вычислимого выражения перенести в стили. Как это сделать показано в листинге 3.

Чтобы узнать адрес фонового изображения, просмотри исходный код страницы и найди в нем элемент div с id="header-inner".

# Листинг 3: Измененный фрагмент виджета «Заголовок»

    <b:else/>
      <div id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>

Результат вычисленного выражения style, подсмотренный в исходном коде страницы, нужно перенести в стили шаблона, предварительно выкинув из него вычисленное значение width (чтобы избавиться от «вылезания» изображения за пределы рамки).

Листинг 4: Измененный фрагмент стилей CSS шаблона

#header-inner {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXZB8wP6Yb8ap5nAtJPwHLNqNX3imohvUp9e3xY76MwJUfjX9yIqq-sKQq4ybE1faTdm-s2Dzy0KOYppcjlwDzSvFNUCVWZKdeb2I7C7ZhRGpyAiMvh8vmLZ8G2eNSYq9y4XFK4prODOnE/s1600-r/polet-ekzuperi-banner-660px.jpg);
  min-height: 153px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid $bordercolor;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  margin: 5px;
  text-align: center;
  color:$pagetitlecolor;
}

Замечание: правило для бордюра («рамки») я перенес из свойств стилей элемента #header в элемент #header-inner. Это сделано для того, чтобы избавиться от отступа сверху.

Не забудь сохранить шаблон.

Итогом всех этих манипуляций должно стать следующее:

Этап 2: «Обработка напильником» виджета «заголовок»

Успехов!

Бонус для RSS-подписчиков: Анекдот про напильник.

Украли американцы у русских чертежи истребителя. Собрали — паровоз. Разобрали, собрали — паровоз! Что делать, выкрали русского специалиста. Спец берёт чертёж, смотрит, смотрит и говорит: «Там же внизу маленьким шрифтом: после сборки обработать напильником».

Статьи «в тему»

Ширина шаблона Blogger

noreply@blogger.com (Croaker) — Wed, 10 Feb 2010 21:15:00 +0000

«Ну-ка, морда, шире тресни!»

Как увеличить ширину шаблона Blogger

Тяжело будет впихивать третью колонку в шаблон, предварительно не расширив страницу. Добавить блогу ширины можно с помощью несложного тюнинга стилей CSS шаблона.

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

Я объясню на примере стандартного шаблона Minima. По-умолчанию этот шаблон составляет 660 пикселей в ширину. Я увеличу его до 1000 px.

Элементы шаблона Blogger

Я специально раскрасил их в попсовые цвета в стиле «вырви глаз» для пущей наглядности :).

Элементы шаблона Blogger “Minima”

В общем случае, нужно будет увеличить следующие элементы:

«Обертка» страницы

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}

Меняю ширину с 660px на 1000px:

#outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}

Здесь и далее изменяется только свойство width; все остальное остается без изменений.

Заголовок

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}

Меняю:

#header-wrapper {
  width:1000px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}

«Подвал»

#footer {
  width:660px;
  /* ... */
}

тоже увеличивается до 1000 пикселей в ширину

#footer {
  width:1000px;
  /* ... */
}

Теперь нужно сохранить шаблон.

После этого появится место для дополнительной колонки в блоге.

Пост скриптум

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

В шаблоне «Минима» это блок #content-wrapper, но ширина для него задается «автоматически» и тут ничего менять не надо.

CSS3 свойство border-radius

noreply@blogger.com (Croaker) — Wed, 27 Jan 2010 12:16:00 +0000

Скругление углов с помощью CSS3

Для скругления углов в CSS3 используется свойство border-radius.

Браузеры Google Chrome и Safari «понимают» его как с префиксом -webkit так и без оного. Mozilla Firefox понимает это свойство только с префиксом -moz. А Opera и Internet Explorer не понимают его ни под каким видом.

Каноническое задание: border-radius: размер, где:

размер – размер в допустимых единицах CSS

.radius1 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

Скругление определенных углов

С помощью свойства CSS3 border-radius можно задавать размер скругления отдельных узлов.

Исправлено: Порядок задания размеров последней спецификации border-radius.

border-radius: top-left top-right bottom-right bottom-left

Порядок задания размеров запомнить проще так:

1 2
4 3

.radius2 {
  -webkit-border-radius: 0 10px 0 10px;
  -moz-border-radius: 0 10px 0 10px;
}

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

Можно использовать отдельные правила для скругления каждого угла.

Каноническое задание: border-top-left-radius: размер, где:

top – это top | bottom

left – это left | right

размер – размер в допустимых единицах CSS

Тут неприятно удивил браузер Firefox, так как синтаксис у него отличается от «канонического»:
-moz-border-radius-topleft: размер.

.radius3 {
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomleft: 10px;
}

Успехов в «украшательстве» веб-страниц! И… пользуйся продвинутыми браузерами ;)

Еще по теме CSS

В этой статье я рассказывал про свойство box-shadow.

HTML скругление углов

Скругление углов с помощью CSS

Колонка слева, колонка справа

noreply@blogger.com (Croaker) — Mon, 18 Jan 2010 12:35:00 +0000

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

Сам метод создания 3-колоночного шаблона для Blogger приведен в этой статье: Третья колонка в шаблоне. Из него и буду исходить.

Колонка между основным и боковым блоками

Фактически это пример из исходной статьи (ссылка выше).

Третья колонка между основным блоком и сайдбаром
Демо

Фрагмент кода шаблона с дополнительным блоком

<!-- Блок основного содержания -->
<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
  </b:section>
</div>

<!-- Блок боковой панели -->
<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
  </b:section>
</div>

<!-- Блок дополнительной боковой панели -->
<div id='sidebar2-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
  </b:section>
</div>

<div class='clear'>&#160;</div>

Стили CSS дополнительного блока

#sidebar2-wrapper {
  width: 170px;
  float: right;
  word-wrap: break-word;
  overflow: hidden;
}

Третья колонка слева

Третья колонка в шаблоне слева
Демо

Для того, чтобы третья (дополнительная) колонка располагалась в шаблоне слева, нужно:

Вставить код дополнительного блока перед блоком основного содержания:

Фрагмент кода шаблона с дополнительным блоком слева

<!-- Блок дополнительной боковой панели -->
<div id='sidebar2-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
  </b:section>
</div>

<!-- Блок основного содержания -->
<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
  </b:section>
</div>

<!-- Блок боковой панели -->
<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
  </b:section>
</div>

<div class='clear'>&#160;</div>

В свойствах стилей дополнительного блока задать выравнивание по левому краю.
Стили CSS дополнительного блока. Положение слева.
```
#sidebar2-wrapper {
  width: 170px;
  float: left;
  word-wrap: break-word;
  overflow: hidden;
}
```

Третья колонка справа

Третья колонка в шаблоне справа
Демо

Чтобы разместить третью колонку в шаблоне справа:

Вставь код дополнительного блока после блока основного содержания, перед блоком боковой панели:

Фрагмент кода шаблона с дополнительным блоком справа

<!-- Блок основного содержания -->
<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
  </b:section>
</div>

<!-- Блок дополнительной боковой панели -->
<div id='sidebar2-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
  </b:section>
</div>

<!-- Блок боковой панели -->
<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
  </b:section>
</div>

<div class='clear'>&#160;</div>

В свойствах стилей дополнительного блока задать выравнивание по правому краю.
Стили CSS дополнительного блока. Положение справа.
```
#sidebar2-wrapper {
  width: 170px;
  float: right;
  word-wrap: break-word;
  overflow: hidden;
}
```

Таким образом дополнительную, третью колонку в шаблоне Blogger можно размещать где угодно на странице.

P.S. Спасибо Александру и Елене за вопрос.

Изображение – ссылка на пост

noreply@blogger.com (Croaker) — Wed, 13 Jan 2010 15:50:00 +0000

Как сделать чтобы ссылка загруженного изображения Blogger вела на страницу сообщения? Отвечаю на вопросы читателей.

По-умолчанию, ссылка ведет на полноразмерное изображение, и обычными средствами Blogger это реализовать нельзя. Поэтому, я написал Javascript-функцию для ссылок изображений Blogger.

Важный момент. Помимо самой функции добавлены следующие условия:

на главной (индексной) странице блога ссылка изображения ведет на пост;
на странице сообщения ссылка ведет на изображение.

Это реализовано с помощью условных операторов Blogger:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <!-- код Javascript-->
</b:if>

Итак, два варианта подключения скрипта для изображений в шаблоне Blogger.

1. Полный код функции

Листинг 1: Полный код для вставки в шаблон Blogger.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
/* Функция для ссылок изображений в Blogger
Denis Neverov aka Croaker, @jcden
http://dotrb.blogspot.com
*/
var nodeId = "Blog1";
var postClassName = "hentry";
var postTitleTag = "h3";

// Сторонняя функция getElementsByClassName
getElementsByClassName = function (classname, node){
  if(!node) node = document.getElementsByTagName("body")[0];
  var a = [];
  var re = new RegExp('\\b' + classname + '\\b');
  var els = node.getElementsByTagName("*");
  for(var i=0,j=els.length; i<j; i++)
    if(re.test(els[i].className))a.push(els[i]);
  return a;
}
// Сама функция для обработки ссылок изображений
bloggerImageLink2Post = function(){
  var node = document.getElementById(nodeId);
  var posts = getElementsByClassName(postClassName, node);
  for(var i=0,j=posts.length; i<j; i++){
    var titleLinks = posts[i].getElementsByTagName(postTitleTag)[0].getElementsByTagName("a");
    var imgs = posts[i].getElementsByTagName("img");
    if (imgs[0] != undefined){
      var aParent = imgs[0].parentNode;
      if ( (aParent != undefined)&&(aParent.tagName == "A") ){
        aParent.href = titleLinks[0].href;
      }
    }
  }
}
// Вызов функции
bloggerImageLink2Post();
//]]>
</script>
</b:if>

Для чего нужен элемент CDATA, я рассказывал здесь: XML термин CDATA

Или второй вариант – подключение внешнего файла Javascript с последующим вызовом функции.

2. Подключаемый Javascript-файл

Листинг 2: Код для подключения внешнего файла javascript.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script src='http://sites.google.com/site/railsdepot/files/imagelink2post.js' type='text/javascript'/>
<script type='text/javascript'>
bloggerImageLink2Post();
</script>
</b:if>

Используй либо первый вариант, либо второй (не оба сразу!)

Куда вставлять javascript-код

Скрипт (код javascript) вставлять в код шаблона Blogger перед закрывающим тегом </body>.

Если ты используешь код Google Analytics – тогда перед кодом Google Analytics.

Не забудь сохранить шаблон.

Post scriptum

Работа обоих вариантов скрипта протестирована в Firefox, Chrome, Opera и IE.

Код разрабатывался для стандартных шаблонов Blogger и для шаблонов на основе стандартных. В «сильно нестандартных» шаблонах Blogger может не работать. Скорей всего придется задавать собственные значения переменных nodeId, postClassName и postTitleTag.

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

SEO-friendly заголовок блога

noreply@blogger.com (Croaker) — Thu, 07 Jan 2010 10:31:00 +0000

Речь пойдет о том как сделать заголовок блога более SEO-привлекательным. И в частности, – заголовок первого типа.

Тюнинг заголовка Blogger: Изображение вместо названия и описания

Напомню, что в шаблонах Blogger доступно три варианта заголовка:

Изображение вместо заголовка и описания
только изображение
Изображение после названия и описания
фоновое изображение + текст
Без изображения
только текст

В своем блоге я использую вариант «номер раз» – изображение вместо заголовка и описания. И недавно заметил, что стандартный заголовок Blogger не удовлетворяет требованиям поисковой оптимизации. Да и структуре страницы вообще. Поэтому, как говорится, «будем лечить» или тюнинговать – кому как больше нравится.

Структуру заголовка я рассматривал здесь: Виджет заголовка Blogger. При желании можешь ознакомиться подробнее. Меня же интересует следующий фрагмент кода.

Исходный код заголовка

# Листинг 1: Фрагмент виджета «Заголовок» – только изображение.

<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
  <div id='header-inner'>
    <a expr:href='data:blog.homepageUrl' style='display: block'>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </a>
  </div>
<b:else/>

И тут я вижу две проблемы:

Отсутствует заголовок верхнего уровня (h1) на странице блога;

Отсутствует описание блога.

Тюнинг заголовка Blogger

Следовательно, нужно добавить и то и другое.

Заключить ссылку на главную страницу блога в теги заголовка верхнего уровня <h1> и </h1>;

Добавить описание блога в тег ссылки как вычислимое выражение: expr:title='data:description'.

Вот что в итоге должно получиться:

# Листинг 2: Исправленный фрагмент виджета «Заголовок» – только изображение.

<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
  <div id='header-inner'>
    <h1><a expr:title='data:description' expr:href='data:blog.homepageUrl' style='display: block'>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </a></h1>
  </div>
<b:else/>

Не забудь сохранить шаблон.

Кстати, текстом заголовка верхнего уровня будет название блога. В первом варианте заголовка это альтернативный текст изображения – атрибут alt.

Шаблон sIFR 2.0 без флэш

noreply@blogger.com (Croaker) — Wed, 30 Dec 2009 15:48:00 +0000

Обезфлэшивание шаблона для Blogger

Недавно переделал довольно симпатичный шаблон для Blogspot-блогов – sIFR 2.0.

Шаблон sIFR 2.0 без flash

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

sIFR

*sIFR – это технология, позволяющая использовать любые шрифты на веб-странице.

Scalable Inman Flash Replacement (sIFR) технология с открытым кодом на JavaScript и Shockwave Flash создана для замены текстовых элементов HTML страниц на Flash эквиваленты с выбранным уникальным шрифтом.
Цитата из Википедии: siFR

Недостатки оригинала

Вот так оригинальный шаблон смотрелся на системах Linux:

Ошибки шаблона sIFR 2.0

Несмотря на настройки, объекты flash не отображались в transparent mode (прозрачно);

Не отображалась кириллица.

Изменения

Исключено отображение шрифтов с помощью Flash;

подобраны шрифты для заголовков;

изменен цвет подложки на более подходящий к текстуре шаблона;

добавлены CSS стили для заголовков внутри сообщения;

исправлены стили списков внутри сообщений;

Важно: шаблон настроен под использование стандартного «ката» Blogger

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

Подробнее можно посмотреть на демо-странице шаблона

Демо / Скачать

Хидер «Новогодний»

noreply@blogger.com (Croaker) — Mon, 28 Dec 2009 18:00:00 +0000

Сменил баннер заголовка блога. По «телебатору» все чаще докладывают, что скоро Новый год, поэтому и тема для заголовка была выбрана новогодняя.

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

«Йоу, босота! Я сменил дизайн страницы ошибки 404! Давайте станцуем по этому поводу джигу!»

Поэтому будет бонус. А то и два.

Традиционное «было – стало»

Было

Хидер блога (было)

Стало

Хидер «Новогодний»

Нижние пиксели пообкусаны – их съел Кризис. И по этой же причине изображение сохранено в 128-цветной палитре – я забочусь об экономии трафика моих читателей :).

Бонус №1 – ширина баннера

Помнишь эту картинку?

Настройка виджета «Заголовок»

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

Изображение будет уменьшено до 660 пикс. в ширину.

Так вот размер «XXX пикс. в ширину» берется не «от балды», а прямиком из стилей CSS шаблона. Точнее – это размер блока, окружающего секцию (section) заголовка. В данном случае – блока #header-wrapper:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Бонус №2 – как танцевать джигу

«Так как все-таки правильно отплясывать джигу?» – спросит меня пытливый читатель. По моему сугубо личному убеждению, – если душа требует, то отплясывать джигу можно и «в одного». Но всё же куда веселее делать это «хором», как мальчики и девочки в танцевальном шоу Riverdance.

Видео: Ирландский степ танец. Шоу Riverdance.

Побольше поводов сплясать на радостях джигу в Новом году!

Виджет заголовка Blogger

noreply@blogger.com (Croaker) — Wed, 23 Dec 2009 22:06:00 +0000

Виджет Заголовок (Header) включен в шаблон блога по-умолчанию. С виду этот виджет «висит себе и жрать не просит», но он далеко не так прост, как может показаться. В этой статье я разобрал «по деталям» код виджета заголовка. Попутно рассмотрев такие конструкции шаблона как b:section, b:widget и b:includable. И сделав, пожалуй, самый подробный разбор виджета «Заголовок». Во всяком случае, этой информации пока нет даже в официальной справке.

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

Содержание

Три состояния виджета «заголовок»

Код виджета «Заголовок»
- Условия в коде виджета

Подробнее о Секциях и Виджетах
- b:section
- b:widget
- b:includable

1. Изображение вместо заголовка и описания
- Что такое expr
- data

2. Изображение после названия и описания
- Значения data

3. Только текст

§ Три состояния виджета «заголовок»

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

Настройка виджета «заголовок»

Заголовок может отображаться тремя разными способами:

Изображение вместо заголовка и описания – только изображение

Изображение после названия и описания* – изображение + текст

Без изображения – только текст

* – С недавних пор изображение добавляется как фон заголовка, под текстом названия блога и описания.

Все три варианта отображения заголовка учитываются в коде виджета

§ Код виджета «Заголовок»

Чтобы посмотреть код виджета заголовок нужно перейти на вкладку редактирования шаблона Blogger (Дизайн → Изменить HTML) и нажать «Расширить шаблоны виджета».

# Листинг 1: Код виджета «Заголовок» (с моими комментариями).

<div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Успешный блог (заголовок)' type='Header'>
      <b:includable id='main'>
        <b:if cond='data:useImage'>
          <!-- Использовать изображение -->
          <b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
            <!-- 1. Изображение: Вместо заголовка и описания -->
            <div id='header-inner'>
              <a expr:href='data:blog.homepageUrl' style='display: block'>
                <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
              </a>
            </div>
          <b:else/>
            <!-- 2. Изображение: После названия и описания
            Изображение как фон текста
            -->
            <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; +
            &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; +
            data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; +
            data:height + &quot;px;&quot; + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
              <div class='titlewrapper' style='background: transparent'>
                <h1 class='title' style='background: transparent; border-width: 0px'>
                  <b:include name='title'/><!-- Включить вложение 'title' -->
                </h1>
              </div>
              <b:include name='description'/><!-- Включить вложение 'description' -->
            </div>
          </b:if>
        <b:else/>
          <!-- 3. Без изображения -->
          <div id='header-inner'>
            <div class='titlewrapper'>
              <h1 class='title'>
                <b:include name='title'/><!-- Включить вложение 'title' -->
              </h1>
            </div>
            <b:include name='description'/><!-- Включить вложение 'description' -->
          </div>
        </b:if>
      </b:includable>
      
      <!-- Код вложения 'title' -->
      <b:includable id='title'>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <data:title/>
        <b:else/>
          <a expr:href='data:blog.homepageUrl'><data:title/></a>
        </b:if>
      </b:includable>

      <!-- Код вложения 'description' -->
      <b:includable id='description'>
        <div class='descriptionwrapper'>
          <p class='description'><span><data:description/></span></p>
        </div>
      </b:includable>
    </b:widget>
  </b:section>
</div>

§ Условия выбора варианта отображения

# Листинг 2: Упрощенный («условный») код виджета «Заголовок».

<b:if cond='data:useImage'> <!!-- Если: Использовать изображение -->
  <b:if cond='data:imagePlacement == &quot;REPLACE&quot;'> <!-- Если: Режим == Замена -->
    <!-- только изображение -->
  <b:else/><!-- Иначе -->
    <!-- изображение + текст -->
  </b:if><!-- Конец условия -->
<b:else><!-- Иначе -->
  <!-- только текст -->
</b:if><!-- Конец условия -->

§ Подробнее о Секциях и Виджетах

b:section

b:section – секция шаблона Blogger. Это контейнер для виджетов (гаджетов).

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <!-- ... -->
</b:section>

Атрибуты section:

class – CSS класс элемента (секции);

id – уникальный идентификатор элемента в DOM – Объектной модели документа

maxwidgets – максимальное количество виджетов в секции

showaddelement – отображать пункт «Добавить гаджет». Значения: yes|no|maybe (да/нет/для блондинок**)

** – Автор шутит. Только yes или no.

b:widget

b:widget – код виджета или гаджета. Это небольшой, ограниченный блок страницы, который содержит собственный контент.

<b:widget id='Header1' locked='true' title='Успешный блог (заголовок)' type='Header'>
  <!-- ... -->
</b:widget>

Атрибуты widget:

id – уникальный идентификатор элемента в DOM

locked – разрешено ли перемещение виджета. Значения: true|false (запрещено/разрешено)

title – заголовок виджета

type – тип виджета. Бывают виджеты разных типов: Header, HTML, Label, BlogArchive, LinkList...

b:includable

b:includable – Подключаемый блок в виджете. Небольшая, повторяющаяся часть кода виджета.

Имеет единственный атрибут:

id – уникальный идентификатор вложения

Подключается командой b:include с атрибутом name='идентификатор включаемого вложения'.

Вложение с id='main' включено в виджет по-умолчанию – это основной блок виджета.

# Листинг 3: Упрощенный код виджета «Заголовок» с вложениями.

<b:widget id='Header1' locked='true' title='Успешный блог (заголовок)' type='Header'>
  <b:includable id='main'>
    <!-- ... -->
    <h1 class='title'>
      <b:include name='title'/><!-- Включить вложение 'title' -->
    </h1>
    <!-- ... -->
  </b:includable>
      
  <!-- Код вложения 'title' -->
  <b:includable id='title'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- Если открыта главная страница блога -->
      <data:title/><!-- Отобразить текст заголовка -->
    <b:else/>
    <!-- Иначе -->
      <!-- Отобразить ссылку на главную страницу блога -->
      <a expr:href='data:blog.homepageUrl'><data:title/></a>
    </b:if>
  </b:includable>
</b:widget>

Теперь можно рассмотреть фрагменты кода подробнее.

§ 1. Изображение вместо заголовка и описания

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

# Листинг 4: Фрагмент кода виджета для варианта 1 – только изображение.

<a expr:href='data:blog.homepageUrl' style='display: block'>
  <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Что такое expr

expr – это команда движку Blogger, что следующая строка является вычислимым выражением. Например, строка в моем шаблоне:

<a expr:href='data:blog.homepageUrl'>Главная</a>

В коде HTML на выводе (после вычисления) будет выглядеть так:

<a href='http://dotrb.blogspot.com'>Главная</a>

data

Значения data из приведенного кода виджета Заголовка.

data:blog.homepageUrl – URL адрес главной страницы блога;

data:title – название блога;

data:height – вычисленная высота изображения для заголовка;

data:widget.instanceId – id виджета (см. раздел Секции и Виджеты для справки);
Код
```
expr:id='data:widget.instanceId + &quot;_headerimg&quot;'
```
даст:
```
id='Header1_headerimg'
```

data:sourceUrl – URL адрес изображения в заголовке;

data:width – вычисленная ширина изображения для заголовка.

§ 2. Изображение после названия и описания

На самом деле, в современных шаблонах Blogger картинка вставляется как фоновое изображение под текстом заголовка и описания блога.

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

Отобразить изображение как фон под текстом. Вы не сможете достаточно точно вычислить ширину в JS поскольку отступы (margins) не принимаются во внимание ни одним из clientWidth, offsetWidth или scrollWidth, поэтому мы не можем четко задать минимальную ширину если пользователь использует уменьшенное изображение.
Эти результаты ширины отступов получены ценой обрезанных пикселей. Если пользователь не использует уменьшенное изображение, мы расширяем заголовок.

# Листинг 5: Фрагмент кода виджета для варианта 2 – текст и фоновое изображение.

<!-- создается блок div с фоновым изображением -->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; +
&quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; +
data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; +
data:height + &quot;px;&quot; + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
  <div class='titlewrapper' style='background: transparent'>
    <h1 class='title' style='background: transparent; border-width: 0px'>
      <b:include name='title'/><!-- Включить вложение 'title' -->
    </h1>
  </div>
  <b:include name='description'/><!-- Включить вложение 'description' -->
</div>

Значения data

data:sourceUrl – URL адрес фонового изображения в заголовке;

data:backgroundPositionStyleStr – строка задания background-position (left center);

data:widthStyleStr – вычисленная ширина;

data:height – вычисленная высота.

Честно говоря, не особо я надеюсь на «автоматику» и этот блок предпочел бы отредактировать самостоятельно через редактор шаблона.

Про b:include я уже рассказывал в разделе про секции и виджеты.

§ 3. Только текст

Самый простой вариант заголовка.

# Листинг 6: Фрагмент кода виджета для варианта 3 – только текст.

<!-- 3. Без изображения -->
<div id='header-inner'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:include name='title'/><!-- Включить вложение 'title' -->
    </h1>
  </div>
  <b:include name='description'/><!-- Включить вложение 'description' -->
</div>

Тут используются стандартные теги HTML и два инклуда – вложения. Инклуды я уже описал в разделе Секции и Виджеты.

Google Wave подсветка кода

noreply@blogger.com (Croaker) — Tue, 15 Dec 2009 11:31:00 +0000

Многие программисты уже используют Google Wave как средство командной разработки. В этом отношении, кстати, весьма полезный инструмент. Можно поделиться фрагментом сырого кода, прокомментировать или исправить проблемный код, предложить свой вариант. Рано или поздно каждый разработчик задает вопрос: «Как подключить подсветку синтаксиса в Google Wave»? Не так давно я нашел простое и удобное решение.

Этим советом поделился Antonio Cangiano в своем блоге.

Создай новый вейв (wave – «волна») и добавь к нему робота Syntaxy. Используй вейв-адрес: kasyntaxy@appspot.com.
Возможно, нужно будет добавить бота к твоим Контактам Google;

Определи язык кода – в начале сообщения укажи #!python или #!ruby;

Вставляй свой код.

Бот Syntaxy автоматически подсветит код в твоем сообщении как на картинке ниже:

Подсветка синтаксиса в Google Wave

Как я и обещал, все очень просто.

Бонус для RSS-подписчиков: Аватар бота Syntaxy

Аватар бота Syntaxy для Google Wave
http://kasyntaxy.appspot.com/assets/avatar.gif

Третья колонка в шаблоне

noreply@blogger.com (Croaker) — Sat, 12 Dec 2009 19:11:00 +0000

Как сделать третью колонку в шаблоне Blogger

Трехколоночный шаблон блога Blogspot
Скриншот | Демо

Простая и подробная инструкция.

В теории добавление 3-й, дополнительной колонки можно представить так:

Уменьшить основной блок;

сузить боковую панель;

добавить еще одну боковую панель.

На практике все ненамного сложнее.

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

<!-- Блок основного содержания -->
<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
  </b:section>
</div>

<!-- Блок боковой панели -->
<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
  </b:section>
</div>

<div class='clear'>&#160;</div>

Добавь код для 3-й колонки после блока боковой панели:

<!-- Блок основного содержания -->
<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
  </b:section>
</div>

<!-- Блок боковой панели -->
<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
  </b:section>
</div>

<!-- Блок дополнительной боковой панели -->
<div id='sidebar2-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
  </b:section>
</div>

<div class='clear'>&#160;</div>

Блоки «обертки» (wrapper) и секции (section) дожны иметь уникальные идентификаторы. «Уникальные» – не значит «оригинальные», поэтому я задал им id sidebar2-wrapper и sidebar2 соответственно.

Задай стили CSS для 3-й колонки. И не забудь уменьшить секцию основного раздела и боковой панели.

#main-wrapper {
  width: 530px;
  float: left;
  word-wrap: break-word;
  overflow: hidden;
}

#sidebar-wrapper {
  width: 220px;
  float: right;
  word-wrap: break-word;
  overflow: hidden;
}

#sidebar2-wrapper {
  width: 170px;
  float: right;
  word-wrap: break-word;
  overflow: hidden;
}

Сохрани изменения.

Страница «Изменить дизайн» должна выглядеть примерно так:

Добавить и упорядочить элементы страницы

Можешь добавлять гаджеты Blogger в дополнительную, третью колонку.

Рекомендую по теме:

Колонка слева, колонка справа

Сайдбар в шаблоне Blogger

Футер Blogger в три колонки

Ruby, 1000 чертей!

noreply@blogger.com (Croaker) — Mon, 07 Dec 2009 21:45:00 +0000

Случается, что число чертей или других сущностей (и не обязательно – зловредных) переваливает далеко за 1000+. В моем случае это было количество товаров в тестовом приложении. Ровно 40305. Отобразить такое большое число на странице, не поломав при этом верстку, бывает довольно проблематично. Поэтому я сегодня добавил пару методов для сокращения размера оного.

Пример:

2¹⁰ → 1024 → 1k+

Код написан на Ruby.

def bignum_format(number)
  if number > 1000000 # == 10**6
    (number/1000000).to_i.to_s+"M+"
  elsif number > 1000 # == 10**3
    (number/1000).to_i.to_s+"k+"
  else
    number
  end
end

def html_bignum_format(number)
  number > 1000 ? "<span class='bignum' title='#{number}'>"+bignum_format(number)+"</span>" : number
end

Стили CSS для сокращенного числа:

.bignum {
  border-bottom:1px dashed;
  cursor:help;
}

Вызов метода из хэлпера (helper):

<%= html_bignum_format(@items_count) %>

В качестве суффиксов M и k, для миллиона и тысячи соответственно, взял префиксы системы СИ.

Twitter и Friend Connect становятся ближе

noreply@blogger.com (Croaker) — Thu, 03 Dec 2009 08:14:00 +0000

Хорошая новость для всех «орнитологов» блогосферы! Эту новость я уже упоминал в своем твиттере. Итак, Twitter и Friend Connect преодолели фазу «предварительных ласк» и теперь эти два социальных сервиса стали по-настоящему близки. Кратко: можно подключаться к сети Friend Connect используя свой аккаунт Twitter.

Вот что пишет об этом Google Social Web Blog:

Сегодня мы делаем Twitter и Friend Connect еще ближе друг к другу. Теперь ты можешь присоединиться к более чем 9 миллионам Google Friend Connect сайтов, используя свой Twitter логин. Присоединившись, твой Twitter-профайл будет автоматически связанным с сетью FC и ты сможешь твитить твою активность на сайтах, делиться дискуссиями из гаджета Комментариев и приглашать друзей через Twitter.

Видео: Google Friend Connect добавляет функции для Twitter

Переврать новость по-своему можно, используя первоисточник: Friend Connect: Birds of a Feather Tweet Together. Предложить лучший вариант перевода можно в комментах.