Виджет "Самые Активные Читатели"

вторник, 27 января 2009 г.

Если ваш блог уже набрал обороты, то ваши записи обязательно будут комментировать, задавая вопросы, споря, критикуя или же просто выражая благодарность за предоставленную информацию или материал.
Думаю многим хотелось бы знать кто же самый активный читатель и комментатор на блоге? Для этого был написан плагин "Самые активные читатели". Виджет будет отображать пользователей, которые оставили наибольшее количество комментариев к вашим записям и число их комментариев.
Для того чтобы добавить виджет на Ваш блог просто нажмите на кнопку ниже:

После чего необходимо внести некоторые изменения в содержание кода виджета:
  1. в строке var baseUrl = "http://beliber-da.blogspot.com/"; - то, что выделенно красным замените на адрес своего блога (обязательно с /на конце)
  2. var maxList = 5; - этот параметр указывает число комментаторов, которых будет указывать виджет.
  3. var sFilter = ""; - тут между ковычками можно указать людей, которых не будет учитывать виджет. Ники нужно указывать через запятую БЕЗ пробелов вообще (например "вася,ваня")

Виджет перевода блога

суббота, 24 января 2009 г.

Позвольте вашим читателям перевести блог на различные языки мира, используя компактный и простой в использовании виджет. Google translation widget
Выбрав один из восьми (Китайский, Французкий, Немецкий, Японский, Корейский, Английский, Испанский или Итальянский) языков и нажав соответствующий ему флажок блог будет автоматически переведен с использованием технологии Google Translate.
Чтобы добавить виджет на Ваш блог необходимо просто нажать на кнопку ниже и следовать подсказкам системы Blogger.


надеюсь Вам виджет будет полезен. Жду комментариев ;)

Ярлыки: , , ,

Flash Облако тегов

четверг, 22 января 2009 г.

В одной из предыдущих статей я описывал как можно сделать облако тегов для блоггера, которое бы содержала ярылки ваших постов.
Мы снова обновили облако тегов для Blogger, теперь его можно установит за пару кликов: Читайте инструкцию в новой записи тут! Сегодня я бы хотел описать способ, который позволит Вам добавить в свой блог Flash Облако тегов (которое в отличии от аналогов поддерживает кириллицу) . При этом Темы будут отображаться разными цветами - в зависимости от количества сообщений, которые будут им соответствовать ;)


Во-первых необходимо добавить виджет "Ярлыки" (Labels). Для этого переходим в "Макет" >>> "Элементы страницы" и добавляем видеж "Ярлыки" подобно тому, как мы добавляли "HTML/JavaScript", когда "заснеживали" Blogger.


Далее из макета Блога переходим к изменению "HTML" шаблона, ставим галочку "Расширить шаблоны виджета"
С помощью поска в браузере находим следующий код:
<b:widget id='Label1' locked='false' title='Ярлыки' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
и заменяем на:
<b:widget id='Label99' locked='false' title='Темы' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <script type="text/javascript" src="http://forum.wafl.ru/files/freeman/swfobject.js"></script>
      <script type="text/javascript">
        var flashvars = {};
        flashvars.mode = "tags";
        flashvars.minFontSize = "8";
        flashvars.maxFontSize = "22";
        flashvars.tcolor = "0x0988ff";
        flashvars.tcolor2 = "0x000000";
        flashvars.hicolor = "0xd95800";
        flashvars.distr = "true";
        flashvars.tspeed = "100";
        flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count'><data:label.name/></a></b:loop></tags>";
        var params = {};
        params.wmode = "transparent";
        params.bgcolor = "#333333";
        params.allowscriptaccess = "always";
        var attributes = {};
        attributes.id = "b-cumulus";
        attributes.name = "tagcloud";
        swfobject.embedSWF("http://forum.wafl.ru/files/freeman/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes);
      </script>
      <div id="b-cumulus">
        <a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
      </div>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>
Облако тегов можно настроить в соответствии с оформлением вашего блога. Для этого в выше указанном коде можно изменять следующие параметры:
  • в строке "swfobject.embedSWF("http://FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes); " 300 - это ширина виджета в пикселях. 250 - это высота виджета в пикселях.
  • flashvars.minFontSize = “8“; - минимальный размер шрифта.
  • flashvars.maxFontSize = “22“; - максимальный размер шрифта.
  • flashvars.tcolor = “0xffffff“; - цвет самого редкого ярлыка.
  • flashvars.tcolor2 = “0×0be4f8“; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.
  • flashvars.hicolor = 0xd95800; - цвет текста при наведении курсора на ярлык.
  • flashvars.tspeed = “100“; - скорость вращения Flash Облака тегов
  • //params.wmode = “transparent“; - этот параметр обозначает прозрачный фон.
  • params.bgcolor = “#333333“; - цвет фона Flash Облака тегов.


Пробуйте на своих блогах, в случае чего оставляйте сообщения в комментариях.

Плывущий текст для Blogger. Scrolling Or marquee text for blogger

вторник, 6 января 2009 г.

"Плывущий" или "прокручивающийся" текст позволит Вам привлечь внимание к новостям своего блога или обратить внимание читателей на определенное место страницы.


Добавление подобного эффекта широко распространено в сети для привлечения внимания к новостям сайта или наиболее важной информации.
Также важно то, что Вы можете изменить параметры "Плывущего" или "прокручивающегося" текста на свое усмотрение и учитывая оформление и дизайн вышего блога ;-)
Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Демонстрация "Плывущего" или "Прокручивающегося" текста


Смотриться интересно и необычно, неправда ли?


Так давайте шаг за шагом узнаем как разнообразить посты подобным текстом!


Начнем с теории для того чтобы понять как вообще это все работает и что из себя представляет:


"Плывущий" или "прокручивающийся" текст - это по сути обычный текст, только заключенный в определенные html теги. Выглядит это примерно так:


<открывающий тег> Ваш "Плывущий" или "прокручивающийся" текст </закрывающий тег>
конечно же вместо "открывающий тег" и "закрывающий тег" мы будем истользовать настоящие html теги и различные параметры. Выглядить это будет примерно так:
<marquee>Демонстрация "Плывущего" или "Прокручивающегося" текста</marquee>
если Вы попробуете добавить это в сообщение, то опубликовав его увидите "Плывущий текст"! Можете попробовать ;-)


Но как я уже говорил существует возможность изменять такие параметры "Плывущего" или "прокручивающегося" текста, как размер шрифта, сам шрифт, фон текста, скорость прокрутки, направление прокрутки и т.п. на свой вкус!


Для этого к открывающемуся тегу необходимо добавить дополнительные параметры вашего текста.
Такие как:
ПараметрРезультат
direction="left"Заставляет двигаться текст влево
direction="right"Заставляет двигаться текст вправо
direction="up"Заставляет двигаться текст вверх
direction="down"Заставляет двигаться текст вниз
behavior="alternate"Заставляет двигаться текст вправо и когда он достигнет конца вернуться влево
behavior="slide"Заставляет текст остановиться, когда он достигнет конца строки
loop="4"Если Вы хотите заставить текст появляться определенное количество раз, то добавьте этот параметр, указав вместо "4" необходимое число появлений текста
scrollamount="2"Этот параметр устанавливает скорость движения текста. Чем меньше значение, тем медленней будет двигаться текст (1-медленно, 5-быстро)
width="400"Этот параметр указывает ширину поля, в котором будет двигаться текст
height="66"Этот параметр указывает высоту поля, в котором будет двигаться текст
onmouseover="this.stop()" onmouseout="this.start()"Если Вы зададите первый параметр, то текст остановится, когда вы подведёте к нему курсор. Второй заставит текст двигаться, когда подведете к нему курсор.
bgcolor="#9999CC"Этот параметр устанавливает цвет фона поля с текстом
style="color: #FF0000"Этот параметр устанавливает цвет текста
style="font-size: 1em"Размер шрифта
style="font-family: Tahoma"Шрифт
style="font-size: 12pt; color:
#800000; font-family: Tahoma"
Если Вы хотите одновременно указать размер шрифта, его цвет, и сам шриф, то используйте данный параметр со своими данными




Тут привожу примерный код, который можете поизменять на свой вкус с целью попробовать все выше перечисленные параметры:
<marquee direction="Up" scrollamount="8" width="220" style="font-size: 12pt;
color: #800000; font-family: Tahoma" height="66" bgcolor="#FFCC99">Плывущий текст для Blogger</marquee>
и результат
Плывущий текст для Blogger


Дерзайте!

Ярлыки: ,