Облако тэгов для блога на Tumblr

tumblr1.jpg

Тумблер — бесплатный блоговый движок. Весьма удобный, кстати. Это вроде твиттера, но с возможностями, не ограниченными 140 знаками. Его очень любят фотографы и люди творческих профессий, так как очень легко постить и перепащивать (о, слово то какое!) фотографии, можно привязать аккаунт к своему аккаунту на Flickr, к твиттеру опять же и фейсбуку. В общем, интересная и полезная такая вещица. Вэлкам на мой тумблер!

И все бы ништяк, но тэги в тумблере можно вывести только у каждого поста по отдельности. А хочется ж чтоб как у людей — облако тэгов в сайдбаре и все такое. Стандартными средствами в тумблере этого не сделать. Поэтому приходится пользоваться сторонними скриптами. Сегодня я расскажу, как это сделать. А за наводку спасибо Насте. Это она нашла данный способ.

Приступим. Для начала следует заметить, что в тумблере любой из бесплатных выбранных шаблонов оформления можно смело править в коде на свой вкус. Не знаю, как обстоят дела с платными. Не пользовался. Для того, чтобы что-то поменять, заходим в раздел Customize – Theme и там кликаем по кнопке «Use custom HTML»

tumblr2.jpg

Откроется консоль с кодом. По большому счету ничего сложного здесь нет. Это обычный HTML, разбавленный специальными вставками тумблера вроде таких: {block:Posts}… {/block:Posts}. Точно также страница поделена на функциональные блоки. Нас в данный момент интересует сайдбар, куда необходимо вывести облако тэгов. Ищем в коде следующий кусок (показываю на примере шаблона под названием Minimal):

{block:IfShowAboutWidget}
<h3>{lang:About}</h3>
<div id="about" class="widget">
<img src="{PortraitURL-64}" alt="portrait" />
{block:Description}<div class="description"><p>{Description}</p></div>{/block:Description}
</div>
{/block:IfShowAboutWidget}

Это практически в самом конце. Чтобы было легче искать, скопируйте весь код из консоли и вставьте его в свой любимый текстовый редактор (только не Блокнот!), который умеет считать строчки кода. Ищите строку 581. И сразу после нее нужно добавить следующий код:

<h3>Tags</h3>
<div id="tags" class="widget">
<!-- Start Tumblr Tag Cloud -->
<script type="text/javascript" src="http://tumblrtags.rivers.pro/jquery.js"></script><script type="text/javascript" src="http://tumblrtags.rivers.pro/widget.js?css=default&minsize=100&maxsize=200&order=alphabetical">
</script>
<!-- End Tumblr Tag Cloud -->
</div>

Не забудьте сохраниться, нажав на зеленую кнопку Save в верхнем правом углу страницы настроек. Результат вы можете увидеть на моем tumblr-блоге

13.12.2010

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

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

Оставить комментарий: