среда, октября 27, 2010

Красивые метки под заголовком блога

Метки можно по-разному отображать на вашем блоге: в виджете на боковой панели, под публикацией, а также выводить в меню. Woork на своем блоге использовал собственный способ отображения меток, который приглянулся и мне – посмотреть демо можно на его сайте. Я, немного его отредактировав, тоже использую на этом блоге этот способ отображения меток (смотрите на этом блоге под заголовком каждого сообщения).


Итак, перед тем, как вносить изменения в шаблон, сделайте резервную копию вашего шаблона.


1. Активируйте галочку “Расширить шаблоны виджета”.
2. Найдите в шаблоне:
]]></b:skin> 
и перед этим фрагментом добавьте код:

div.tag{font-size:11px; padding-top:5px; color:#999999; margin-bottom:10px;}
.profileImage{float:left; margin:3px 6px 2px 0px; background:#FFF; padding:4px;}
.post-tag{font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-size:12px; margin-bottom:10px;}
.post-tag a:link, .post-tag a:visited{color:#666; text-decoration:none; font-style:italic;}


Вы можете изменить значения цвета и шрифта, чтобы они больше соответствовали вашему шаблону.


3. Теперь поищите вот такой фрагмент кода:

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

После этого фрагмента вставьте код:

<!-- TAG -->
<div class='post-tag'> <b style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ &quot;?max-results=10&quot;' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
</div>

4. Теперь нажмите кнопку “Просмотр” и если вам все нравится, сохраните шаблон.

Web Analytics