Выпадающие ярлыки для 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}

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


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

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