Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!
Оптимизация сайдбара: убираем блоки во вкладки с помощью DOMtabs
Опубликовано Апрель 17th, 2008 в Блоггинг: проектирование |
Автор: Майкл Мартин
Перевод: Всеволод Козлов
Вы, наверняка, видели на блогах, когда на ограниченном пространстве умещалось сразу несколько контентных вкладок, например, популярные публикации, топ-комментаторы и блогролл. Так вот эти блоги используют DOMtabs.
DOMtabs – бесплатный скрипт, об установке и использовании которого я и хочу поговорить в этой статье-руководстве.
Пример реализации данного скрипта можете посмотреть в сайдбаре блога Pro Blog Design. Эти вкладки очень удобны для пользователей и позволяют разумно использовать свободное пространство.
Обратите внимание, что это руководство пишется для блогеров, использующих WordPress в качестве своей блоговой CMS, но этот скрипт можно приспособить и для любой другой платформы.
Итак, процесс установки DOMtabs состоит из 5 этапов:
- Скачать скрипт с официального сайта и разархивировать
- Загрузить domtab.js в папку с темой оформления
- Скачать pbd_domtab.css (клик правой кнопкой мыши и «Сохранить как») и загрузить также в папку с темой оформления
- Вставить следующий код в файл темы оформления header.php над тегом </head>:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" /> - В файл sidebar.php или в виджет в место, где Вы хотите, чтобы отображался скрипт в действии, добавьте следующий код:
<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Вкладка 1</a></li>
<li><a href="#t2">Вкладка 2</a></li>
<li><a href="#t3">Вкладка 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>Контент первой вкладки</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>Контент второй вкладки</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>Контент третьей вкладки</p>
</div>
</div>
Вот и все! Как видите, ничего сложного нет! Количество вкладок неограниченно.
Стили оформления можете настроить в css-файле, ссылка на который выше уже упоминалась! Стили, которые можно изменять, выделены в самом начале файла.
Оригинал статьи: How To Install DomTABs on WordPress
Похожие статьи по блогингу и веб-местерингу:
Fatal error: Call to undefined function: similar_posts() in /home/u82003/w3school.ru/www/blog/wp-content/themes/w3school-blog/single.php on line 35