Виджет вкладка для боковых панелей



Здравствуйте друзья, гости и читатели этого блога. В одном из своих постов Раскрывающее меню для блога blogspot я писала о меню аккордеоне для блога. Этот предлагаемый виджет вкладка немного отличается от такого меню. Пример скриншота Вы видите. Во всяком случае, у Вас будет выбор, что использовать в сайдбаре блога.

Рекомендую так же посмотреть вариант виджета аккордеон с прокруткой в блоге Вики Барад "Шпаргалки блогерши". По моему отличное решение экономии места в боковых колонках. 

А теперь вернемся к моему варианту. Виджет легко настраивается и устанавливается. Копируем код ниже,  вставляем к примеру в черновик созданной страницы. Пишем нужные названия вкладок и адреса ссылок.

Настройка и установка кода виджета вкладки

Оформляем под дизайн своего блога и устанавливаем в дизайн-добавить гаджет в нужное место макета блога.

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;
}

.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Blogger</a></li>        
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Название ссылки</a></li>
    <li><a  href="#">Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
                    </ul></li></ul></li>


    <li class="accoi-menu">
     
              <ul>
                <li class="title"><a href="#" >Гаджеты</a></li>

                <li class="downlistie">
                    <ul>
    <li><a href="#" >Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>            
                 </ul></li></ul></li>

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Рамки</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
         </ul></li></ul></li>

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Партнерские программы</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>              
                 </ul></li></ul></li>


 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" >Я в соц сетях</a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >Google+</a></li>
    <li><a href="#">Facebook</a></li>
     <li><a href="#">Twitter</a></li>
    <li><a href="#">ВКонтакте</a></li>
              </ul></li></ul></li>
    </ul>

В настройках ничего сложного нет, измените цвет фона, ссылок, названий вкладок, радиус закругления углов. При необходимости добавьте больше ссылок. Только хочу обратить внимание на следующее: Вот часть кода: 

 <li class="title"><a href="#" >Blogger</a></li>        
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Название ссылки</a></li>
    <li><a  href="#">Название ссылки</a></li>
    <li><a href="#">Название ссылки</a></li>
                    </ul></li></ul></li>

Если захотите использовать код виджета как простое меню, например вписать названия своих ярлыков, то удалите выделенное светло серым. Где решетка, вставьте адрес ссылки на ярлык (Blogger). Раскрываться виджет не будет, при нажатии переход по ссылке ярлыка. При использовании кода в первом варианте адрес ссылки не вставляйте.

И на сегодня вся информация, пишите отзывы, поделитесь со своими друзьями. Всем пока и до новых встреч.

Почитайте другие статьи:  Восстановление заблокированного блога blogspot; Гаджет прокрутки сообщений блога в виде изображенийСлайдер для фото видео изображенийГаджет вкладка со страничками социальных сетей для blogger;


Автор статьи ✎ Olga Protasova Выпуск ✹ 3/04/2015 Ярлыки ►


Открыть комментарии →

4 коммент. :

  1. Ольга, ты не поверишь. Только сегодня такой же состряпала..

    ОтветитьУдалить
    Ответы
    1. Вика, надо же как совпало. Я этот код с трудом нашла в своих черновиках. Вычитала информацию, что гаджет "список ссылок", который у меня установлен в обоих блогах, сильно тормозит загрузку блога. И, чтобы код не затерялся, решила опубликовать пост. Теперь осталось найти время, настроить его и установить.

      Удалить
  2. Оля, привет! Интересный виджет. Может и себе такой установить? Если надумаю, то обязательно к тебе на консультацию запишусь. :)
    Оля с праздником нашим Женским тебя поздравляю! Счастья , любви , тепла и заботы близких , весеннего настроения !

    ОтветитьУдалить
    Ответы
    1. Ирина привет. Спасибо за поздравление, я тоже тебя поздравляю с нашим Женским праздником. А виджет конечно устанавливай, много чего туда впихнуть можно. Вопросы по установке и настройке конечно задавай.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *