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

вторник, 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

среда, 30 марта 2011 г.

Как показать ярлыки поста на главной странице

Открываем в броузере страницу редактирования шаблога с опцией full HTML.
Задаем поиск по словосочетанию "post-labels".
Комментируем элементы кода:
<!--Show on main page ////////////////////////////////-->
<!--b:if cond='data:blog.pageType == &quot;item&quot;'-->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span><!--/b:if-->
<!--Show on main page ////////////////////////////////-->

вторник, 11 января 2011 г.

Как редактировать PDF без акробата.

Подробный обзор с рекомендациями и видеороликом.
Like Inkscape, the OpenOffice toolbox also includes support for annotations, shapes, images, tables, charts, etc. but here you have more choices and the software also looks less complex....OpenOffice is the best tool for manipulating PDF documents when you don’t have the budget for Adobe Acrobat
Скачать расширение с OpenOffice

пятница, 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

понедельник, 6 декабря 2010 г.

Прячем Google navbar, заголовок и освобождаем место для TopUp

Берем за основу шаблон Корпорация "Чудеса" из нового (сервиса) дизайнера шаблонов Блоггера.
Во вкладке "Дополнительно" находим опцию "Добавить CSS" и сдвигаем весь блог вправо, прячем панель Google navbar и название блога.
.content-inner {float: right;}
#navbar {height: 0px; visibility: hidden; display: none;}
#header {height: 0px; visibility: hidden; display: none;}

четверг, 18 марта 2010 г.

Как "отлепить" горизонтальное меню (navbar) от верхней кромки страницы.

С этой навязчивой идеей я решил исследовать стили шаблона с одной колонкой (родной гугловский шаблон этого блога). Представьте, в частности, что горизонтальное меню (navbar) этого блога "прилепелно к верхнему краю страницы... (Посмотрите на картинке слева)  Надо же сделать "просвет"... Итак, исследуем код страницы с помощью FireBug.
Вот блоки горизонтального меню:
<div id="HTML1" class="widget HTML">
<div class="widget-content">
<div id="menu">
<!-- id="menu" это уже блок не блоггера,
а плагина JQuery -->
А вот стили для них:
#main .widget {
padding-bottom:10px;
margin-bottom:20px;
border-bottom:dotted 1px $bordercolor;
clear: both;
}
Вопросы, возникшие у меня при изучении шаблона (вот он полность, кстати ;
весь код код
):
1) в таблице CSS задан стиль для класса "widget", а в коде есть class= "widget HTML", но нет просто класса "widget"... Стоп..., припоминаю, кажется здесь присвоение сразу двух классов... в одних кавычках через пробел... ?
2) что такое clear: both; эта строчка встречается очень часто..., все лень посмотреть...
А мне нужно исправить следующие недостатки посредством CSS: Штрих линия - убрать вообще,

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

Баги ShareThis? Или пост о пользе курения.

Суперсервис ShareThis  Надо, чтобы под каждым постом был ряд кнопок, нажал на кнопочку - краткое содержание поста скопировалось в Delico... или Twitter или еще куда, благодать! Как вы уже поняли, ShareThis именно такой сервис. Для боггера все вообще автоматизировано, настраиваешь количество, порядок кнопок, можно вынести отдельные кнопки из общего всплывающего окошка... и, для (некоторых движков) можно сразу вставить готовый скрипт в виджет...
<script type="text/javascript">var _sttoolbar = {}</script><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger.js"></script>
<scripttype="text/javascript">stBlogger.init("http://w.sharethis.com/button/sharethis.js#publisher=42510309-01cb-46f5-ac4f-474b4ce75dd1&amp;type=blogger");</script>
Да всё не так просто, стал пробовать, меню Navbar не работает...
1. Первым делом надо посмотреть самое простое - не затер ли я в конце предыдущего скрипта > когда вставлял скрипт в шаблон... (об этом подумал только на "перекуре", а так начал перебирать более сложные варианты...) Ага, проверил, нет, не затер..
2. Теперь проверим Navbar на другом сайте, может он просто не работает (скрипт грузится с сайта автора)? Попробовал, работает. Все не так просто...
3. Теперь беру скрипт Sharethis и убираю из виджета. Так, navbar заработал, но не сразу, пришлось убрать его из раздела дизайн страницы, удаление виджета со главной страницы и последующая перезагрузка не реанимировали navbar.
4. Теперь попробуем вставить часть скрипта sharethis в <Head></Head> Попытка не удалась, блоггер выдает собщение:
Element type "scripttype" must be followed by either attribute specifications, ">" or "/>".
фантастика, в скрипте всё закрыто... раздвинул окошечко, баа, да у меня "scripttype" вместо "script type"... вот такая дурь всё дело в плохом редакторе, перенесшем строки...
5. Ну ладно, исправил, но из <Head></Head> скрипты не работают, дальше пробую разные варианты, часть переношу в body, перезагружаю новый скрипт..., вставляю виджет в за меню... Всё это - потуги чайника, которому некогда лезть в сложный (для чайника) скрипт... Приговор окончательный:  Sharethis блокирует Navbar... Что делать? Можно, конечно, отложить это дело и написать автору  Navbar..., вернее, затеять переписку...
6. Перекур,  ...идиот!!! Надо поискать ДРУГИЕ сервисы. Неужели у Sharethis нет конкурентов? 
7. Как искать? В закладках набираем "Sharethis" и на первой же странице находим сервис ADDThis, пробуем... виджет работает вместе с  Navbar... Фуфффф, сколько времени я угрохал на эти скрипты...., no, the glass is half full! Сколько бы времени я угрохал на поиск бага в чужом скрипте... Ведь они нужны мне оба... Idiot (понятие инвариантное) но я, всё же, не безнадежен...
8. Награда - дополнительная функция у ADDThis - сервис статистики, надо будет посмотреть...
Ну, и как ту бросишь курить?



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

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

Дабы соблюсти лицензионную чистоту, я в футере вставляю вот такой код:
<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>
Во первых, надо вставлять ссылку на "себя"!!! Во-вторых, после доработки надо запихнуть его прямо в шаблон, поскольку при тиражировании каждый раз надо вставлять новый виджет. В-третьих, забыл..., что в третьих? Ага, доработка - это еще и форматирование (шрифты помельче..., расположение и проч...)