Показаны сообщения с ярлыком Templates. Показать все сообщения
Показаны сообщения с ярлыком Templates. Показать все сообщения

вторник, 19 апреля 2011 г.

Разные шаблоны для разных страниц Blogger (1)


Менять шаблон конечно нельзя. Но можно не показывать отдельные блоки на разных типах страниц. Согласно справочному руководству Blogger (клик по картинке) есть три типа страниц: index, item, arhive. Потом появились еще static_page статичные страницы (на сегодня их можно добавлять до 10 штук). И, наконец, вот оно - счастье, можно использовать условие по URL, оно подойдет и для конкретных статичных страниц, и для страниц по меткам... (надо, кстати, попробовать,  как работают страницы с URL, содержащими "? ")
Не следует забывать, что помимо условия "==" есть еще "=!"..., посмотреть примеры использования условий "b:if" можно в любом (собственном) штатном шаблоне Blogger. 
Вот пример c CSS...,  боковая панель загружается
 в броузер и не отображается. Не лучший вариант...
<b:if cond='data:blog.pageType == quot;static_page quot;'>
<style type="text/css">
#sidebar-wrapper{display:none;}
.post {width:680px;}
</style>
</b:if >
<b:if cond='data:blog.pageType ==quot;static_pagequot;>
Static Pages
</ b: if>
<b:if cond='data:blog.url == 'Specific_Post_Url>
This will appear on the page specific posts
</ b: if>
Осталось только выяснить, перед какими тегами "div" нужно всатвлять условия "b:if", но этот вопрос не кажется сложным..., потому пвернемся к нему позже. А вот вопрос о том, как задавать условие для страниц с ярлыками остается открытым, здесь не него пытались ответить, но не получилось. А вот здесь автор подал идею, как использовать URL адрес метки, вот фрагменты кода с не очень понятными тегами...

понедельник, 18 апреля 2011 г.

Условное форматирование изображений в Blogger


......
.h40 {
height: 40px;

]]></b:skin>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.h40 {
height: 150px;
} </style>
</b:if>

На главной странице картинка поста не должна быть большой, а вот на отдельной странице ее можно развернуть во всю ширь, вернее "высь". Для этого можно задать несколько новых классов, допустим h0 h40 h200 h400 и переприсвоить их в шаблоне Blogger в зависимости от вида страницы. Если присваивать изображению сразу два класса (клик по картинке), то можно менять не только размер, но и выравнивание, например... вот вставка в шаблон ("мой" одна колонка) дополнительного класса .h40 и условия b:if  
Поскольку оболочка b:skin может быть только одна, то приходится после нее вставлять тег таблицы стилей и переопределять класс. Название класса, кстати, должно начинаться с буквы..., и все надо бы включать в CDATA...
А вот (не очень удачный) пример использования условий в шаблоне блоггер.
Они интересуют нас только как шаблоны кода, поскольку
Blogger с тех пор внедрил сплиттер "Read more".
Как создавать расширяемые краткие описания сообщений?Условные CSS

пятница, 10 декабря 2010 г.

2.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

Вот два фрагмента CSS из Firebug левый - для внутренненго элемента меню, правый для li первого уровня.
Все хаки здесь. Главный хак - вставка в "ul#nav li a " форматирования "-webkit-box-shadow:"...., менял еще где-то padding,
Главный недостаток полученного слоя - все внутренние списки выглядят также, как и главные.

1.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

В этом году в панели управления Blogger появился сервис дизайна шаблонов. На основании предустановленных шаблонов теперь можно строить полноценный качественный дизайн... Хочется написать об этом, но некогда..., да и лучше сначала "показать", что можно сделать, а потому ограничусь промежуточным, но очень важным постом о хаках CSS для того, чтобы прилепить jQuery SooperFish Multi-Column Animated Drop-down меню к боковой стенке окна броузера (т.е. сделать меню неподвижным. (Меню можно посмотреть и скачать, если кликнуть по картинке).
Итак, начнем с HTML шаблона виджета темы Blogger`a

вторник, 22 июня 2010 г.

Почему Blogger требует заголовок для виджета HTML/JavaScript

Просто скопипастил шаблон блога "Trader" и вставил его в блог "Forex". В результате все заработало, но Блоггер потребовал заголовок для виджета HTML/JavaScript... Задачка решилась при вставке пустого тега <span > </span>
Однако, можно (и нужно) подправить сам шаблон... Рецепты есть на форуме

вторник, 16 марта 2010 г.

CSS и структура шаблона Блоггера

#outer-wrapper {
margin-top: 0px;
margin-$endSide: 3em;
margin-bottom: 0;
margin-$startSide: 3em;}

Это в начале, а в конце:

body#layout #outer-wrapper {
margin-top: 0px;
margin-$endSide: 50px;
margin-bottom: 0;
margin-$startSide: 50px;}

Посмотрим на шаблон этого блога. Вот весь простой шаблон Блоггера (1 столбец, без боковых полей "сайдбаров") . Мои комментарии в тексте выделены красным шрифтом. Обратим внимание, что в-основном используются ID и классы, а для блока "outer-wrapper" есть два определания стиля, здесь странные идентификаторы вроде $endSide - это переменные, которые определяются в шаблоне (XML) Блоггера:
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">

Толковых описаний языка я так и не нашел, но из картинок понятно, что по умолчанию значения соответствуюе "left" "right", ...а вот как их можно менять, использовать?  Может быть посмотрим код уже сформированной страницы блога. Прояснится что-нибудь...?
Посмотрел... Нет, скорее запутает... Оказалось, что блок "outer-wrapper" находится сразу внутри body, а элемента с ID="layout" вообще не видать в сформированном коде HTML. Ну ладно, пока не очень то и хотелось..., нам до завтра надо перечисленные баги исправить, а не шарады разгадывать.
Перекур. Вместе с сигаретными канцерогенами в башку заскакивает паскудная мыслишка.
Экспериментируя с форматированием, я решил вставлять стили в теги, используя style="...". Потом посмотрел раздел "Шрифты и цвета" и понял, что можно (точнее-нужно) подобрать цвет фона и блоков под цвета Navbar, это проще, чем возится с картинками и CSS горизонтального меню Apicon.  Значит, нужно будет в каждом написанном посте заменять атрибуты style на class. Утомительное это дело... Так что надо скорее сочинить свои классы и прописать их в таблице стилей Блоггера... И этим я займусь сразу после ловли CSS-багов... Дураков работа любит...

Опять пост получился не о том, о чем соирался писать... Переделать заголовок

TopUp Narod

Плавающая картинка или объект

воскресенье, 14 марта 2010 г.

Форматирование текучего поста

Сначала о том, какие блоки использовать:
<div style="float: left; padding: 1em 1em;"> Плавающая картинка или объект</div> 
<div heigh="80" width="200" style="background-color: #eeeeee; text-align: left;overflow: hidden;float: left; margin: 2em 1em; padding: 2px 2px;"> Это блок с кодом фон голубой </div>
<div style="text-align: justify;">А это блоки с текстом </div>
Ясно, что блок с кодом этого поста и отфоматирован, как блок с кодом (бледно-голубой фон).  Пример такого форматирования в предыдущем посте.
С первым блоком всё ясно, здесь только свойство padding, дабы текст не прилипал к картинке, сначала верх=низ, а потом лево-правые отступы. Почему не поля? Да, можно и поля, просто не знаю, iexplorer по-прежнему их "не так показывает"?
Во втором блоке не работают свойства width и heigh... надо разобраться - почему?
А в третьем... есть justify, которое штатный блоггер вставляет в каждый блок div, а сами блоки щедро создает и вставляет для каждого абзаца... Спрашивается, для моих "жидких" постов эти текстовые блоки-абзацы будут затекать между блоками картинок и кода (как в нижнем посте), как они это будут делать? Как найти оптимальный размер текстового блока? А редактор что выкинет?
И еще вопросы:
1.Пробовал текстовый блок, он неудобен, поскольку нельзя разделить код на строки (нет ли там какого свойства? Посмотреть в справке...)
2. В текстовом блоке также не работали свойства width и heigh... (там по умолчанию маааленькая фитюлька выскакисает вместо блока)...
И наконец, увидел, что не вставил jusyify, выделил весь пост и нажал кнопку в редакторе. Смотрю код...  да, там где выравнивание было задано, оно осталось..., а текст был разбит на блоки со свойством style="text-align: justify;"

Под футером шаблона забота об авторских правах.

Дабы соблюсти лицензионную чистоту, я в футере вставляю вот такой код:
<span style="font-style:italic;">Altersego disigned this blog with excellent plagins 1. "Menu" by <a href="http://apycom.com/">Apicon</a> and 2.<a href="http://gettopup.com/">"TopAp" by Paul Engel</a></span>
Во первых, надо вставлять ссылку на "себя"!!! Во-вторых, после доработки надо запихнуть его прямо в шаблон, поскольку при тиражировании каждый раз надо вставлять новый виджет. В-третьих, забыл..., что в третьих? Ага, доработка - это еще и форматирование (шрифты помельче..., расположение и проч...)

воскресенье, 7 марта 2010 г.

Идея, как смотреть шаблоны!!!

Вот на этой страничке блога-хелпера реализована RSS-трансляция c cобственного блога с картинками... Это же так просто!!! Картинки!!!

Шаблоны - Один столбец. Качественные

Вот склад mashable.com  лучших шаблонов. Первый же Nautica06, оказался великолепным. Однако, сделан для просмотра фотогалерей...

Шаблоны о 4-х коклонках с bloggertemplates

Набор 4-х колоночных шаблонов здесь  bloggerblogtemplates.com/2008/02/four-column-blogger-templates.html и очень интересен...
На кртинке не самый навороченый шаблон

Xclear и еще 4 шаблона по 4 колонки.

Сложены они вот на этой странице themescook.com. Тему Xclear я опробовал на своем закрытом сайте "Для старых..." Шаблон protonema-blogger-template.blogspot.com (это демонстрационная страничка) точно такой, как Xclear, но с границами сайдбаров...
Все сайдбары статичны, не убираются для страницы поста и метки (категории)
Шаблон XClear я закачал в документы, будем комментировать и разбирать...

пятница, 5 марта 2010 г.

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

Это называется fresh-magazine http://www.bietemplates.com/2009/10/fresh-magazine.html

Тема для всплывающих AJAX окон

Эта тема содержит только заголовки на главной странице... К ней так и хочется прикрутить TopUp для показа постов...
Опять от freebloggertemplate

А ниже тема Scrapbook - у нее js вертикальный выдвигающийся справа столбец меню.
Еще ниже - Gybrid
Под ней - Fresh Brown Featured с текстовым слайдшоу (AJAX?)
1

Тема Guzel c freebloggrtemplate

А вот навороченная (загрузка c freebloggrtemplate) тема guzel-fbt.blogspot.com (демо) двe nabbar (c одним подуровнем) два столбца постов (на главной странице и в метках-категориях)....
стационарная область убирается только в постах...

Тема arthemia-magazine рассыпается, зараза...


Темы становятся всё лучше, попробовал arthemia-magazine, а она рассыпается (столбцы боковой панели уходят вниз)..., начал было искать ошибки форматирования в постах... (я их импортировал из блога-черновика "IT-notes"), сразу не догадался, в чем дело... Присмотрелся к теме - цвета надо бы поменять..., да и прочитал еще раз Bloeer Template for Layout... И решил - поставлю ка я что-нибудь другое...
И вообще, надо снизить требования к шаблонам. А как это сделать? Очень просто: нашел jQuery плагин для раскрывающейся панели меню (navbar)  и для всплывающих окон...

понедельник, 16 марта 2009 г.

Рекомендации о вставке ключевых слова в заголовок

More Tips:
1. Search engines have been known to give a very slight priority to alphabetical order.
2. Limit your title tag to less than 60 characters (usually about 7 to 10 words). Any longer and part of your title may get chopped off by some search engines.
l3. Actually, my page title is not optima — if you can, you should avoid using what are called dead weight words in title tags. These are words that have become so common that search engines give irrelevant results when the words are entered into the search. Examples include homepage or homepage, WWW, web and web page.
This is one thing I like to tweak a LOT, with my blogs/websites — the Page Title.
The page title is exceedingly important. If you use weak keywords, your blog or website is not going to have a good placement in search engines. If you can’t be found easily in search engines, the effect is a loss of traffic (no matter how good your site’s content might be), which is really wasted effort on your part.
I’ll cover Page Title for Blogspot.
The <*title> and <*/title> tags are the same for a regular website as well.
// To cut a long story short (if you just want the code), skip to Point #4.
// If you want to know a little more about how page titles work, please carry on.

пятница, 20 февраля 2009 г.

Как формировать Header для Blogger


webhostmonkeys.com
Tips on Webhosting, Blogging, Web Design, Webmastering, SEO, CSS, and whatever the damn hell I know.) по заполнению meta tags в Блоггере с готовым кодом и подробной инструкцией.
The page title is exceedingly important. If you use weak keywords, your blog or website is not going to have a good placement in search engines. If you can’t be found easily in search engines, the effect is a loss of traffic (no matter how good your site’s content might be), which is really wasted effort on your part.