Выпадающие ярлыки для blogger - blogspot

Выпадающий список ярлыков для blogger - blogspot

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

Как все мы знаем ярлыки на blogger можно отобразить, либо списком, либо же облаком. Не так давно у нас была тема о том, как улучшить вид ярлыков при помощи CSS3. Сегодня же мы будем преобразовывать ярлыки из обычного списка в выпадающий список. Выглядит это куда более красиво и аккуратно да и к тому же позволяет блогеру и вебмастеру сэкономить больше места в сайдбаре. Посмотреть, как это выглядит и работает можно на созданном конструкторе.

Итак, для установки выпадающих ярлыков нужно перейти в раздел Шаблон - Изменить HTML  в редакторе ищем код:

<ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
        <b:else/>
        <a expr:href='data:label.url'>
          <data:label.name/>
        </a>
      </b:if>
      (
      <data:label.count/>)
    </li>
  </b:loop>
</ul>

Их может быть несколько вам нужно изменить все те которые имеют в себе символы <ul> ...</ul> на следующий код:

<div class="dropmedown">
<select  class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
  <option> Показать категории сайта </option>
  <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'>
      <data:label.name/> (
      <data:label.count/>)
    </option>
  </b:loop>
</select>
</div>

Затем находим код ]]></b:skin> и перед ним выкладываем:

/* Dropdown Label */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:none}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}

Теперь сохраняете шаблон, если нужно добавляете виджет ярлыки и проверяете, какой вид они приобрели.


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Выпадающие ярлыки для blogger - blogspot
Выпадающие ярлыки для blogger - blogspot
Blogger - blogspot - меняем обычный список ярлыков на выпадающий список.
https://4.bp.blogspot.com/-AKNuzfeS868/Vl6m-Nd2yxI/AAAAAAAAiKI/UKeJZ9Equj0/s640/%25D0%2592%25D1%258B%25D0%25BF%25D0%25B0%25D0%25B4%25D0%25B0%25D1%258E%25D1%2589%25D0%25B8%25D0%25B5%2B%25D1%258F%25D1%2580%25D0%25BB%25D1%258B%25D0%25BA%25D0%25B8%2B%25D0%25B4%25D0%25BB%25D1%258F%2Bblogger%2B-%2Bblogspot.jpg
https://4.bp.blogspot.com/-AKNuzfeS868/Vl6m-Nd2yxI/AAAAAAAAiKI/UKeJZ9Equj0/s72-c/%25D0%2592%25D1%258B%25D0%25BF%25D0%25B0%25D0%25B4%25D0%25B0%25D1%258E%25D1%2589%25D0%25B8%25D0%25B5%2B%25D1%258F%25D1%2580%25D0%25BB%25D1%258B%25D0%25BA%25D0%25B8%2B%25D0%25B4%25D0%25BB%25D1%258F%2Bblogger%2B-%2Bblogspot.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/12/vypadajushhie-jarlyki-dlja-blogger-blogspot.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/12/vypadajushhie-jarlyki-dlja-blogger-blogspot.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy