понедельник, 26 ноября 2007 г.

Убираем nawbar

Прикольно, но ещё прикольнее когда её нет - никто тыкать в неё лишний раз небудет.
Я сейчас расскажу вам об этом. Польза очевидна, ну а заходить в редактирование своего блога будет проблематичнее.
Или по ссылке Blogger:панель инструментов, или делать что-то типа META на страничке у себя. Другой способ не нашёл - если что подскажите.

Приступим: Шаблон->Изменить HTML:

1. вставляем код сразу после <head>:

<style type='text/css'>
#navbar-iframe
{
height:0px;
visibility:hidden;
display:none;
}
</style>


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

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}


все, теперь этот Navbar буден невидим. Получилось? Я за нас рад.
Гы-Гы.



Read More...

Создание меню в блоге.

Очень просто!
Поверьте, что если делать именно так как я расскажу, то у вас появится меню, подобное моему сверху, да оно неказистое, но я ведь вместе с вами облагораживаю блог и поверьте если всё-всё запихнуть в блог - тоже ничего хорошего не получится.
Приступим.


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

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>


а красные вставляем между ними, это мы обозначили, что появился на свет 'menubar'.
Теперь в CSS-части определяем свойства его, вставлять нужно только в CSS, короче туда, где идёт много определений с такими вот значками #, вставлять обязательно одним блоком:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}


Заголовка у нашего 'menubar' не будет, а зачем заголовок в меню? Там будут только опции, которые вы сможете добавить в макете.
Сохраняемся, упс и проблема или упс и нормально?

В некоторых шаблонах при сохранении ругается админка. Приблизительно так:

"Invalid variable declaration in page skin: Variable is used but not defined. Input: headerTextColor"

Если так, то это лечится, просто нужно описать переменную, а лучше две переменные, чтобы наверняка, вписываем в код сверху, где описываются переменные:

<Variable name="headerCornersColor" description="Цвет фона меню"
type="color" default="#fff" value="#e6e6e6">
<Variable name="headerTextColor" description="Цвет текста меню"
type="color" default="#c60" value="#5588aa">


Сохраняемся, теперь уж ничто ругаться на будет.

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

Пива всем!



Read More...

расширенное резюме поста.

(исправлено) Расширенное резюме - это метод, которым пользуются, чтобы показать начало поста. Ну например, чтобы на вашей странице был не один пост, а эдак сколько влезет и, например, по одному параграфу - для наглядности! В blogger реализацию тега more, который используется в таких случаях я не увидел, да и бог с ним - мы простые способы не ищем, а этот мне показался интересным! В итоге мы должны получить приведённое ниже фразу 'прочитать полностью'
Приступим!

В мануале blogger'а я так всё запутано, что и я тоже запутался. Объясню попроще. Чтобы всё получилось нужно чётко выполнять инструкции и ни-ни в сторону, иначе -.ОПА.

Условный CSS

Первым шагом поместим код так называемого условного CSS. ...здесь в конце поста рассказывается про то как изменить шаблон вашего сообщения...Он заменяет отображение на экране постов на страницах блога. Заходим в Редактировать HTML и сохраняем шаблон - на всякий случай.

Далее прокручиваем шаблон до тега </html> и добавляем следующий код сразу перед этим тегом:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Удачно? Сохраните шаблон. ВАЖНО: в шаблоне есть такой тег
]]></b:skin> пред тегом </html> именно между ними и надо вставить этот код. В нем мы определили класс "fullpost", который будет появляться только на страницах с вашими постами.

Ссылки "Прочитать полностью..."

Вторым шагом является добавление ссылки Прочитать полностью... , которая будет появляться после каждого резюме вашего поста. Чтобы это сотворить надо включить галочку сверху кода вашего шаблона под названием "Расширить шаблоны виджета". Затем пролистайте вплоть до кода (он обязательно у вас есть) <data:post.body/> и сразу за ним добавьте:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Прочитать полностью...</a>
</b:if>


Сохраните шаблон. Эта ссылка будет появляться только на главной странице и по ней будет перекидывать на страницу с вашим 'полноценным' постом.
ОЧЕНЬ ВАЖНО Вааще не трогайте код, ну только если я вам дал наводку, а вы разбираетесь!

Если осилили, то переходим к качеству ссылки! Для читателя важно её видеть, поэтому вместо последнего кода можно засунуть код ( опять же и туда же, но только вместо ) такого плана, Жирный и увеличеный, например такой:

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><span style="font-size:120%;"><a expr:href='data:post.url' target='_blank'>Прочитать полностью...</a></span></span>
</b:if>


сохраняем!

Изменение вашего поста

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

Это начало поста(резюме)<span class="fullpost">А это остальной текст поста</span>

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

Преимущество способа

Дополнительные ссылки - при индексировании не помешают и текст открывается в новом окошке!
Удачи!



Read More...

вторник, 13 ноября 2007 г.

Подписки на теги (labels).

Используя Feedburner можно создавать подписки на теги (labels).
Например у вас блог о животных. Кошки, собаки, крысы, морские свинки, аллигаторы и прочее.
Вы можете позаботиться о RSS-ридере ваших подписчиков и создать подписку, например, не только на общий фид сайта или блога, а на конкретные темы (читай теги).

Способ прост.
Изначально перед "прожиганием" фида в Feedburner есть единственный адрес фида Atom:

http://xxxxx.blogspot.com/feeds/posts/default, который вводится в строку для "прожигания"-регистрации фида.

Адрес вывода всех статей по ярлыку (тегу) имеет следующий вид:

http://xxxxx.blogspot.com/search/label/ярлык, "переведённый" RSS-адрес определённого тега получается заменой /search/label/ на /feeds/posts/default/-/, таким образом получаем RSS-адрес тега (ярлыка):

http://xxxxx.blogspot.com/feeds/posts/default/-/ярлык, теперь этот адрес можно вставить для прожига в Feedburner и получить окончательный адрес RSS-подписки для конкретного ТЕГА.

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


Источник: http://konkoff.blogspot.com/2007/08/rss.html

Read More...

четверг, 8 ноября 2007 г.

Внешний вид блоков AdSense

Всегда ли стандартные шаблоны блоков AdSense гармонично вписываются на страницу? Или может быть хочется разнообразить страницу симпатичной графикой? Как поменять внешний вид блока AdSense?
Подробные инструкции и шаблоны здесь http://web2magazine.blogspot.com/2007/06/29-different-google-ads-style.html
или здесь http://konkoff.blogspot.com/2007/07/adsense_04.html, кому как нравиться :)

Read More...

среда, 31 октября 2007 г.

HTML Физическое форматирование

Физическое форматирование

Физическое форматирование документа (визуальное)
позволяет создавать различные виды выделения части текста по
смысловому признаку. Например, можно подчеркнуть часть текста
с помощью тега <U> или же сделать
наклонное начертание с помощью тега <I>.
По возможности стоит отдавать предпочтение тегам

логического форматирования документа.



Перейдем к описанию тегов физического форматирования документа.



Часто для удобства документ разделяют заголовками разделов с
помощью тегов <Hn> и </Hn>,
где n может принимать значение от 1 до 6:





<H1>Заголовок 1</H1>


<H2>Заголовок 2</H2>


<H3>Заголовок 3</H3>


<H4>Заголовок 4</H4>


<H5>Заголовок 5</H5>


<H6>Заголовок 6</H6>



Параграф располагается между тегами <P>
и </P>. Выравнивание задается свойством
ALIGN. Перевод строки осуществляется с помощью тега
<BR>.





<P ALIGN="left">
Выравнивание по левому краю</P>



<P ALIGN="center">

Выравнивание по центру</P>



<P ALIGN="right">
Выравнивание по правому краю</P>




<P ALIGN="justify">
Выравнивание по ширине страницы.
Для параграфов, содержащих большое количество текста, этот вариант выравнивания
выглядит гораздо лучше, не правда ли?</P>


Текст после <BR>
переходит на новую строчку.


Начерание текста определяется следующими тэгами:



<B>Жирный</B>

<I>Курсив/наклонный</I>

<U>Подчеркнутый</U>

<STRIKE> Перечеркнутый</STRIKE>


<SUP>Верхний индекс</SUP>

<SUB>Нижний индекс</SUB>


Шрифт для фрагмента текста можно задать с помощью тега
<FONT> (закрывающий тег
</FONT> обязателен).
Свойство SIZE определяет размер текста,
значения размера от 1 (мелкий) до 6 (крупный), по умолчанию

SIZE=3.
Свойство FACE задает имя шрифта.
Можно задавать несколько имен шрифтов через запятую.
Если у пользователя не окажется первого шрифта, то браузер будет подставлять второй
и т.д. Свойство COLOR задает цвет текста.
Можно использовать как имена цветов (red, blue, green) так и номер в виде
#RRGGBB, где RR - концентрация красного, GG - зеленого, BB - синего.
Выделение текста цветовым фоном достигается использованием свойства
style="backgroud-color: цвет".
Продемонстрируем применение тега <FONT> на примерах:




<FONT SIZE="1">Размер 1</FONT>

<FONT SIZE="2">Размер 2</FONT>

<FONT SIZE="3">Размер 3</FONT>


<FONT SIZE="4">Размер 4</FONT>

<FONT SIZE="5">Размер 5</FONT>

<FONT SIZE="6">Размер 6</FONT>


<FONT FACE="Times New Roman">Times New Roman</FONT>

<FONT FACE="Arial">Arial</FONT>


<FONT FACE="System">System</FONT>

<FONT FACE="Verdana">Verdana</FONT>


<FONT FACE="Courier">Courier</FONT>

<FONT FACE="Comic Sans MS">Comic Sans MS</FONT>


<FONT COLOR="red">Красный</FONT>

<FONT COLOR="green">Зеленый</FONT>


<FONT COLOR="#0000FF">Синий</FONT>

<FONT STYLE="background-color: pink">Текст на розовом фоне</FONT> Текст на обычном фоне.

Read More...