Шикарные вертикальные вкладки-табы для сайдбара блога на jQuery и CSS не тормозящие загрузку и легко настраиваемые под дизайн страниц. Применение вкладок-табов позволит уменьшить объем текстового пространства при сохранении объема самой информационной насыщенности донесения материала посетителю.Тем более,что внешний вид вкладок табов может стать самостоятельным элементом дизайна при соответствующих настройках CSS.
Применение вкладок-табов.
Вариантов применения вкладок, (Горизонтальные вкладки-табы) скрывающих часть текста или же, кнопок социалок,полезных ссылок,а так же ротаторов последних сообщений или других полезных гаджетов,огромное множество.Вещь крайне полезная и необходимая.Тем более,что установить туда можно всё,что душа пожелает. Пример использования.
Установка вкладок-табов для блога.
Первый этап.Если на вашем блоге уже установлен код подключения jQuery,то этот шаг следует пропустить. Если же нет,то в шаблон </head> закидываем этот маленький скрипт,который в дальнейшем будет отвечать за все эффекты на блоге.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'></script>Второй этап. В раздел </body> устанавливаем этот небольшой скрипт.Хотя если ковыряние в шаблоне вызывает определённые затруднения,то можно всё установить просто в любой гаджет НТМЛ.
Читать дальшеКак заработать на опросахЗаработать уже сегодняМонетизация мобильного трафика Партнёрские программы рунета Тизерная реклама-отзывы | <script> (function($) { $(function() { $('div.vgtabs').delegate('div:not(.vvg)', 'click', function() { $(this).addClass('vvg').siblings().removeClass('vvg') .parents('div.allvg').find('div.vgbox').eq($(this).index()).fadeIn(80).siblings('div.vgbox').hide(); }) }) })(jQuery) </script> |
Третий этап. Установка стилей CSS,где следует в случае необходимости произвести изменения и корректировку под свой дизайн.Код CSS после настройки закидываем в раздел для стилей или же так же в гаджет НТМЛ.
<style> /*вкладки-табы v-gol.ru */
.allvg {
width: 240px; /*ширина блока*/
margin: 0;
text-align: left;
}
.vgtabs {
margin: 0;
padding: 0;
}
.vgtabs div {width: 240px; /*ширина выпадающего блока*/
float:left;
cursor: pointer;
text-align: center;
font:bold 14px Tahoma, sens serif;
color:#fff; /*цвет текста и размер*/
padding: 7 0;
margin: 0 3px 0 0;
border-radius: 3px 3px 0 0;
background: #044; /*цвет фона вкладки */
border: 1px solid #836FFF; /*цвет рамки*/
} /*нажатая вкладка цвет*/
.vgtabs div:hover {
border: 1px solid #fff;
color:#fff;
background: #dbd;
}
.vgtabs div.vvg{
background: #ccc;
border: 1px solid #C4C;
border-bottom: 1px solid transparent;
} /*Настройки скрытого блока*/
.vgbox {
display: none;
padding: 10px;
color: #000; /*текст основной */
background: #fff; border: 1px solid #ddd;
}
.vgbox.visible {
display: block;
border-top: 0;
}
.vgbox img {width: 50px;height:50; float: left; border: none; margin: 0 5px 5px 0;}/*#v-gol.ru настройка миниатюр */
.vgbox a{text-decoration:none;color: #044;font-weight:bold;;}/*ссылки цвет,размер */
</style>
.allvg {
width: 240px; /*ширина блока*/
margin: 0;
text-align: left;
}
.vgtabs {
margin: 0;
padding: 0;
}
.vgtabs div {width: 240px; /*ширина выпадающего блока*/
float:left;
cursor: pointer;
text-align: center;
font:bold 14px Tahoma, sens serif;
color:#fff; /*цвет текста и размер*/
padding: 7 0;
margin: 0 3px 0 0;
border-radius: 3px 3px 0 0;
background: #044; /*цвет фона вкладки */
border: 1px solid #836FFF; /*цвет рамки*/
} /*нажатая вкладка цвет*/
.vgtabs div:hover {
border: 1px solid #fff;
color:#fff;
background: #dbd;
}
.vgtabs div.vvg{
background: #ccc;
border: 1px solid #C4C;
border-bottom: 1px solid transparent;
} /*Настройки скрытого блока*/
.vgbox {
display: none;
padding: 10px;
color: #000; /*текст основной */
background: #fff; border: 1px solid #ddd;
}
.vgbox.visible {
display: block;
border-top: 0;
}
.vgbox img {width: 50px;height:50; float: left; border: none; margin: 0 5px 5px 0;}/*#v-gol.ru настройка миниатюр */
.vgbox a{text-decoration:none;color: #044;font-weight:bold;;}/*ссылки цвет,размер */
</style>
Нтмл часть кода самая основная часть кода для установки вкладок-табов,так как изменять и добавлять всю информацию необходимо сюда.Эту часть кода следует добавить в гаджет НТМЛ,расположенный в боковой колонке блога.Лучше конечно добавить новый для того,чтобы не путаться при редактировании.
<div class="allvg"> <div class="vgtabs"> <div class="vvg">Популярные сообщения</div> <div>Где заработать</div></div> <div style="clear: left;"></div> <div class="vgbox visible">Текст,ссылки,картинки</div><div class="vgbox">Текст,ссылки,картинки </div></div> | Популярные сообщения Где заработать |
Настройки вертикальных вкладок-табов.
Настройки внесены в код CSS и подобрать необходимый цвет и размер можно воспользовавшись онлайн редактором. Размеры миниатюр изображений по умолчанию равны 50px и все изображения добавленные в блок изменят свои размеры до указанной величины и сместятся влево.Если требуется другой вариант измените настройки.Всё быстро просто и доступно.
Отправить комментарий