понедельник, 30 августа 2010 г.

postheadericon Анимированное облако тегов Blogumus.


Недавно наткнулся у кого-то в блоге на анимированное облако тегов, так называемый Blogumus, и не смог удержаться от соблазна прикрутить себе в блог такой же. Мучился три ночи, потому что информации в интернете много, но она везде одна и та же, да еще и устаревшая. В одном блоге наткнулся на локализованный вариант такого облака, но он у меня не прикрутился:( Поднапрягся и нашел более менее оптимальный вариант для себя.
Для тех,у кого нет ни ярлыков, ни гаджета "Ярлыки":
идем в меню Отправка->Изменить сообщение:


и создаем ярлыки для своих статей (ключевые слова, на которых завязаны статьи).
ВНИМАНИЕ: так как Blogumus , по неизвестной мне причине, не отображает кириллицу, то я поступил так-ваш ярлык записываем латинскими буквами и символами, так чтобы ярлык был похож на русское слово.Например:
}l{upHble ccbl^ku
cKpunT
BuD}|{eT
Cu^a 6^oroB - здесь нет ни одной русской буквы,только латинские и символы!
o|oaBuKoH
pacKpyTKa
6ecn^aTHo
Смотрим как это отображается у меня. Немного фантазии и все получится :)
Далее идем в меню Дизайн ->Элементы страницы. Выбираем место, где расположим свое облако->Добавит гаджет:
В верхней строчке называем гаджет (облако тегов или метки). Сохраняем. Далее переходим на Изменить HTML, ставим галочку Расширенные шаблоны виджета, нажимаем CTR+F и вставляем примерно такую строчку:
<b:widget id='Label1' locked='false' title='НАЗВАНИЕ' type='Label'>-где название,это название вашего гаджета.
Видим примерно это:
<b:widget id='Label2' 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>(включительно)выделяем и удаляем.
Вместо этого вставляем это:
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> via <a href='http://bloggerstop.net'>BloggerStop.Net</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;220&quot;, &quot;200&quot;, &quot;8&quot;, &quot;#ccffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x0000ff&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;300&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='13'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Нажимаем просмотр, если видим положительный результат, то идем дальше, меняем настройки виджета:
-зеленым отмечены ширина и высота виджета;
-красным, цвет текста;
-синим, цвет фона;
таблицу цветов и оттенков можете посмотреть на этом сайте http://hydra.nac.uci.edu/indiv/franklin/doc/html.colors.html
-эта строчка отвечает за скорость вращения so.addVariable(&quot;tspeed&quot;, &quot;300&quot;);
Опять нажимаем просмотр, любуемся и сохраняем шаблон.Вот как этот код выглядет у меня:

Интересное:

Recent Posts Widget
Технологии Blogger.