Установка гаджетов в блог на Blogspot

воскресенье, 31 августа 2008 г.
Список Google гаджетов в BlogspotПосле длительных испытаний и тестов в черновиках (бета версии) blogger`а разработчики сделали доступной установку Google гаджетов для всех пользователей. Новый интерфейс позволяет интегрировать гаджеты iGoogle непосредственно в сайдбар вашего блога, указывая при этом некоторые простые настройки. Также был создан хороший справочник гаджетов, с помощью которого можно просмотреть тысячи доступных на данный момент элементов и добавить на свой сайт всего одним нажатием мышки.

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

Гаджеты имеют встроенные настройки для легкой интеграции с вашим блогом, все они автоматически подстраиваются под размеры боковой панели сайта, а высота блока может изменяться пользователем. Список доступных гаджетов постоянно растет и развивается, в справочнике гаджетов вы найдете практически все – от счетчиков, спортивных событий до flash игр.

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

Также разработчики создали по данному вопросу специальное видео, с разъяснением всех описанных выше новостей. Можете взглянуть, вслушиваться в английские слова не обязательно, все, в принципе, понятно по действиям создателя ролика:



Хочется от себя еще добавить несколько строк. Во-первых, некоторое время назад, сразу после перехода на систему гаджетов, во всплывающем окне сбивалась кодировка. Поэтому ориентироваться в этом сборнике было очень сложно. Сейчас все приведено в норму. Если что-то и будет возникать, то можно попробовать либо переключить язык интерфейса на английский, либо сменить кодировку в браузере.

Во-вторых, я встречал много гаджетов, которые по непонятным мне причинам оказались нерабочими. Их установка ни к чему не приводит, поэтому фразу о том, что в каталоге можно найти тысячи всевозможных гаджетов, не стоит воспринимать буквально. Хотя их там действительно много.

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

добавленный в блоге google гаджет

Upd: хотя в некоторых моментах в IE возникали глюки с кодировкой. Видимо, тестирование будет продолжаться на практике еще не один месяц.

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

P.S. А вы знаете, что можно легко настроить кросспостинг своего блога на Blogger?

Вдогонку сразу информация как настроить обратный кросспостинг с блоггера в ЖЖ.

Еще можно почитать как использовать ссылки конкурентов в своих целях.

Спонсор поста:
Как вам пост?   

Новые шаблоны для Blogspot (Ads Theme и Butterfly)

воскресенье, 24 августа 2008 г.
Решил вот сменить дизайн, как только увидел в RSS ридере данную тему. Сразу захотелось установить, а то предыдущая была какая-то немного мрачноватая, да и несколько раз в сети замечал ее у других блоггеров. В принципе, пастельные и спокойные тона прошлого шаблона смотрелись весьма неплохо, к тому же я собирался добавить туда разных текстур, но все никак не хватало времени. А теперь и вовсе изменил направление мысли, отдав предпочтение этому светлому, яркому и веб 2.0-льному дизайну.

Конечно, работы здесь тоже еще много – начиная от банальной настройки всех функциональных блоков и элементов до модификации HTML кода. И почему все темы для блогов имеют такую узкую текстовую колонку, постоянно приходится ее расширять, что в Blogger`е, что в Wordpress. В общем, пока блог функционирует в тестовом режиме.

Дабы придать информационной ценности этому посту, решил опубликовать для скачивания 2 blogspot шаблона.

Ads Theme

Ads Theme blogger xml template - шаблон для blogspot

Моя старая тема, если, кому-то приглянулась. Достаточно официальный и серьезный шаблон, куда очень хорошо вписывается разного рода реклама – как баннеры, так и AdSense. Кстати, для первых предусмотрено 2 блока – в шапке 468х60 и в боковой панели – 125х125. Вот можете посмотреть пример применения данной темы.

Скачать архив с шаблоном для blogger Ads Theme можете здесь.

Там вы найдете 2 XML файла. Один из них my-adsthemes.xml содержит мой вариант шаблона, который я использовал для данного блога. В чем отличительные особенности тем? – ну, во-первых, я убрал всю рекламу, потом немного расширил текстовое поле. Также там остались настройки для подсветки исходного HTML и CSS кода в постах. Возможно, найдете еще какие-то нововведения.

Butterfly

Butterfly blogger xml template - шаблон для blogspot

Как вы уже заметили на скриншоте, помимо блока контента тема имеет 2 колонки в боковой панели, а также яркое векторное изображение в шапке.
Кстати в коде шаблона есть место, где прописывается адрес RSS потока, найдите поле с текстом http://YOUR-FEEDBURNER-URL.COM и замените его на свой.

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

P.S. Если же у вас блог на Wordpress, предлагаю заценить новейшую и супер яркую бесплатную тему Notepad Chaos.

Для людей, зарабатывающих в Интернете, предлагаю почитать как легально продавать аффилиэйт-продукты на eBay.

Предлагаю поменяться ссылками в постовых?
Как вам пост?   

Подсветка синтаксиса в блоге на Blogger.com

среда, 13 августа 2008 г.
Поступил мне недавно на электронную почту вопрос - как можно организовать подсветку исходного кода при публикации у себя в блоге? Хочу заметить, что речь сейчас идет о ресурсах, созданных на платформе Blogspot (Blogger.com). Кстати, некоторое время назад я рассматривал данный вопрос на другом своем проекте, но тема касалась движков Wordpress. Задача решилась достаточно просто – установкой специального плагина. Но как быть с Blogger`ом?!

На помощь приходит отечественная разработка - Highlight.js. Скрипт используется для подсветки исходного кода на любых веб-страницах. Он работает автоматически, поэтому особой сложности возникнуть не должно. Поддерживается достаточно большое число языков, от C++ до Ruby, от 1С до SQL и т.д. Скачать архив скрипта можно на странице описание или здесь.

Итак, чтобы установить данный скрипт на сайт, заходим в раздел «Макет» - «Изменить HTML» и вставляем перед </head> следующий код:
<script type="text/javascript" src="http://softwaremaniacs.org/js/highlight.js"></script>
<script type="text/javascript">
initHighlightingOnLoad();
</script>
После этого сохраняем шаблон.
Следует заметить, что автоматическое распознавание может работать медленно из-за большого числа включенных языков и обширных размеров исходного кода. Чтобы ускорить процесс можно в вызывающей функции указать лишь нужные вам языки:
<script type="text/javascript">
initHighlightingOnLoad('html','php','css');
</script>
В процессе работы скрипт ищет на странице конструкции с кодом <pre><code>...</code></pre>, выделяя и помечая отрывки кода специальными классами. Поэтому в стилях нужно добавить для каждого из них оформление, например:
.comment {
color: gray;
}

.keyword {
font-weight: bold;
}

.html .atribute .value {
color: green;
}
Если вы скачали архив скрипта, то в папке styles можете найти примеры оформления default.css, dark.css и т.д. Код из этих файлов можно поместить в шаблон вашего блога там где описаны другие стили.

Напоследок хотелось бы сказать немного слов о способе распознавания кода. Скрипт пытается обработать фрагмент всеми языками подряд, после чего считает число подошедших вариантов. Для какого языка нашлось больше всего синтаксических конструкций и ключевых слов – тот и выбирается. Понятно, что данный метод далеко не всегда срабатывает правильно, поэтому авторами предусмотрена возможность указать язык приведенного кода вручную. Нужно просто вписать его название в виде класса:
<pre><code class="html">...</code></pre>
Если вы хотите запретить обработку фрагмента – используйте следующую конструкцию:
<pre><code class="no-highlight">...</code></pre>
Вот, в принципе, и все. Еще раз напоминаю адрес страницы проекта.

P.S. Я уже говорил о конкурсе граватарок с призовым фондом в $50. Параллельно запустил еще один – бесплатная баннерная реклама для блогов. Каждый блог может получить размещение собственного баннера на 1-2 месяца. Единственное условие – баннеры рисуют сами авторы:) Читаем подробнее и принимаем участие.
Как вам пост?   

Убираем элемент управления в шапке блога NavBar

суббота, 2 августа 2008 г.
элемент управления в шапке блога
Если вам мешает верхняя панелька, раздражает или портит дизайн, то ее запросто можно убрать. Для этого вовсе не нужно каких-то супер сложных действий, все решается добавлением трех строк в HTML код шаблона. Как правило, во всех нестандартных шаблонах эта опция прописана, поэтому полезно будет тем, кто использует стандартные.

Заходим в панель управления и выбираем меню «Макет» для нужного нам блога:

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

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

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

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">

Сохраняем шаблон и любуемся результатом. Чтобы вернуть панель обратно просто убираем добавленный код.
Как вам пост?   
Related Posts with Thumbnails