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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

Спонсор поста:
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Новые шаблоны для 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.

Предлагаю поменяться ссылками в постовых?
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Подсветка синтаксиса в блоге на 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 месяца. Единственное условие – баннеры рисуют сами авторы:) Читаем подробнее и принимаем участие.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   

Убираем элемент управления в шапке блога 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">

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