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

воскресенье, 19 декабря 2010 г.

Как добавить в пост текстовое поле


Виджет "Переводчик блога" для Blogger


Красивое вертикальное меню для Blogger



Как использовать шрифты Google Custom в Blogger

Как известно есть некоторое количество общепринятых шрифтов,которые именуются web-шрифтами.
Этим летом команда Гугл запустила новый сервис Google web fonts,это позволяет применять нестандартные шрифты из каталога Google без каких-либо регистраций,бесплатно и возможностью применять как в личных,так и в коммерческих целях.
Такое нововведение позволит сделать блог более привлекательным и разнообразным.
Действия следующие:
Идём в редактирование шаблона,сохраняем копию шаблона,на всякий случай.
Теперь идём по этой ссылке ,выбираем нужный шрифт,настраиваем его,и получаем код.
Ищем у себя в шаблоне код <head> и сразу (!!!) после него вставляем полученный код вида:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>



Теперь добавим к коду слэш "/" перед закрывающим тегом >,это важно!
Получим так:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>
Вставляем готовый код после <head> и сохраняем шаблон.
Теперь шрифт сохранён и его можно применить .

Чтобы использовать его где-то в постах,добавляем этот код:

<div style="font-family: 'FontName', serif;">Your text</div>
Ну а чтобы добавить шрифт к заголовкам виджетов,тексту поста,заголовку блога и т.п,то надо добавить CSS код (он также у гугла получается по ссылке выше).
Ищем код того,к чему применим шрифт,например:
.post h3 (или .post-title ) -Заголовок поста
.post-body -сообщения
.title -заголовок блога
.sidebar -виджеты
Ну и добавляем:

.post h3 {
font-family: 'Your Font Name';
}

Демо можно посмотреть здесь.

воскресенье, 12 декабря 2010 г.

Генератор цветового HTML кода

Простое раздвижное меню с картинками

Простая менюшка.При наведении на картинку,она сдвигается и показывается пункт меню.


Оформляем внешнюю ссылку иконкой

Чтобы посетитель блога видел,что ссылка ведёт на другой сайт/блог,можно добавить к ссылке картинку.
Добавляем в CSS пару строк:

.post a[href^="http://"]:not([href*="nuzhdiki.blogspot.com"]):not([href*="1.bp.blogspot.com"]):not([href*="2.bp.blogspot.com"]):not([href*="3.bp.blogspot.com"]):not([href*="4.bp.blogspot.com"])after {
content: " " url(http://dl.dropbox.com/u/5453630/external.png);
}
Чтобы у вас каждая ссылка не была отмечена,добавляем адреса-исключения (синие строчки),в данном примере первый адрес,это свой домен,остальные это картинки Пикасы.Адреса можно добавить любые.

Как сделать футер ( footer ) в 3 колонки в Blogger

Как убрать навбар (Navbar) в шаблонах Blogger

Перед ]]></b:skin> ставим этот кусок кода:

#navbar-iframe { display: none !important;}

Заменить фразы "Предыдущее","Следующее","Главная" на картинки в Blogger

Ищем и добавляем к каждому элементу код на картинку.
<data:olderPageTitle/>
<img alt='Предыдущие' src='ссылка фото' title='Предыдущее'/>
<data:homeMsg/>
<img alt='Главная страница' src='ссылка' title='Главная страница'/>
<data:newerPageTitle/>
<img alt='Следующие' src='ссылка' title='Следующие'/>

Как сделать автоматический переход "Читать далее..." в Blogger