Blogger - улучшаем вид ярлыков при помощи CSS3 - 2019

Blogger - улучшаем вид ярлыков при помощи CSS3

Здравствуйте уважаемые блогеры и вебмастера. Сегодня мы подготовили очередной урок по улучшению сайта - блога на платформе blogger. Многие из нас знают, что собой являют ярлыки, если же нет, в таком случае вы можете ознакомиться с ними более подробней на моем канале youtube, где я рассказываю, об улучшениях для блоггеров. Итак посмотрели узнали, что же такое ярлыки и для чего они нужны? Отлично движемся дальше, как вы знаете работу сайта - блога обеспечивает шаблон написанный при помощи кодов HTML/Javascript так вот в стандартном шаблоне наши ярлыки выглядят сыровато, это с виду обычная ссылка, тогда, как в веб-дизайнерских работах они отображаются по разному, какой стиль им зададут так они и будут отображаться. Большинство старается задать им кнопочный вид где цвет меняется при наведении курсора мыши. В общем вы можете подобрать себе шаблон для blogger по своему вкусу, где уже все готово и настроено, или же понемногу самим доводит его до идеального состояния. Итак мы знаем, что ярлыки делят посты на категории и знаем, как их добавлять, теперь осталось узнать, как сделать их более стильными так, чтоб радовали глаз. Для этого нужно перейти в раздел Тема - Изменить HTML находим код ]]></b:skin> и перед ним вставляем следующий код:

.Label a { padding-left: 20px; background: #000; padding: 0 20px; color: #fff!important; border-radius: 100px; -moz-border-radius: 100px; height: 32px; line-height: 32px; text-transform: uppercase; text-decoration: none; border: none !important; -webkit-transition: all .3s ease-in-out !important; t: 30pxt: 30px; float: left; margin-left: 5px; margin-top: 5px; font-size: 14px; } .Label a:hover { color: #000 !important; background: #ff0; }

Сохраняем шаблон и радуемся своим новым стильным ярлыкам. Ну, а мы продолжаем, сейчас мы узнаем насколько хорошо вы выучили раздел ярлыки. Итак ярлыки могут отображаться списком и? ... правильно облаком. Как вы уже поняли первый вариант был для отображения ярлыков списком, если выбрать вариант облако они приобретут свой стандартный вид по-этому сейчас мы зададим несколько стильных вариантов для облака. Для этого все перед тем же кодом ]]></b:skin> вставляем следующий код:
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { background:#0dd7b4; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } .label-size:hover { background:#333333; } .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }

Сохраняем шаблон смотрим, что получилось. 
И для второго варианта (прежде чем его добавить уберите первый вариант) добавляем:


.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { border-radius:30px; background:#FA0830; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } .label-size:hover { border-radius:30px; background:#333333; } .label-count { white-space:nowrap; border-radius:30px; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }
Первый вариант добавляет зеленые кнопки, второй вариант красные кнопки. И в настройках ярлыка можете поставить галочку напротив предложения "Показывать количество сообщений для каждого ярлыка".

Новые стили для Ярлыков 2019

новые стили для гаджета ярлыков - Blogger 2019

Друзья, пришло время обновить публикацию добавив сюда еще один вариант стилей для ярлыков отображающихся в виде облака. Надеюсь вам понравится. Для установки вам нужно:

В панели управления откройте раздел Тема - Изменить/HTML и перед закрывающим тегом ]]></b:skin> вставьте код:

Для серии Тем Notable, Contempo, Emporio, Soho (сейчас уже доступно не мало тем созданных на их базе отличить их от тех, которые были созданы на стандартных можно с помощью формы комментариев, если она конечно не заменtна на Disqus.)

.widget-content.cloud-label-widget-content{display:inline-block;width:100%}.widget-content.cloud-label-widget-content{display:inline-block}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:10px}.label-count{white-space:nowrap;display:inline-block}
.sidebar-container .label-count { backface-visibility: hidden; font-weight: normal!Important; display: inline-block!important; position: absolute; top: -5px; right: -15px; background: #fff!important; color: #0ba139 !important; white-space: nowrap!important; padding: 5px!Important; width: 25px; height: 22px; line-height: 22px; border-radius: 4px!important; text-align: center; z-index: 1; transform: scale(0.0); box-shadow: 0 0 5px rgba(0,0,0,0.15); transition: all .3s;}
.sidebar-container .label-size:hover .label-count{transform:scale(1.0)}
.list-label-widget-content li{display:block;padding:4px 0;position:relative;margin:0}.list-label-widget-content li:first-child{padding:0 0 4px}.list-label-widget-content li:last-child{padding-bottom:0;border-bottom:0}.list-label-widget-content li a:before{content:'\f111';position:absolute;left:0;top:10px;font-size:8px;font-family:fontawesome;color:#ccc;transition:all .3s}.list-label-widget-content li a:hover:before{color:#e3145f}.list-label-widget-content li:first-child a:before{top:7px}.list-label-widget-content li a{padding-left:20px;font-size:14px;color:#222}.list-label-widget-content li a:hover{color:#e3145f}.list-label-widget-content li span:last-child{color:#999;font-size:12px;font-weight:400;position:absolute;top:8px;right:0}.list-label-widget-content li:first-child span:last-child{top:2px}
.cloud-label-widget-content{text-align:left;overflow:hidden}
.cloud-label-widget-content .label-count{background:#e3145f;color:#fff;margin-left:-3px;white-space:nowrap;border-radius:0;padding:1px 4px;font-size:12px;margin-right:5px}.cloud-label-widget-content .label-size{position:relative;background:#586662;display:inline-block;float:left;font-size:12px;margin:0 4px 4px 0;border-radius:3px}.cloud-label-widget-content .label-size:hover{background:#367a5b}.cloud-label-widget-content .label-size a,.cloud-label-widget-content .label-size span{color:#fff;display:inline-block;font-size:14px;font-weight:600;padding:4px 12px}.cloud-label-widget-content .label-size a:hover{color:#fff}.cloud-label-widget-content .label-size:hover a{color:#fff}.cloud-label-widget-content .label-size:hover span{background:#2f2f2f;color:#fff;cursor:pointer}.cloud-label-widget-content .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%}.label-size-1,.label-size-2{opacity:100}


Для стандартных тем используем следующий CSS код:

.widget-content.cloud-label-widget-content{display:inline-block;width:100%}.widget-content.cloud-label-widget-content{display:inline-block}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:10px}.label-count{white-space:nowrap;display:inline-block}
#sidebar-wrapper.label-count { backface-visibility: hidden; font-weight: normal!Important; display: inline-block!important; position: absolute; top: -5px; right: -15px; background: #fff!important; color: #0ba139 !important; white-space: nowrap!important; padding: 5px!Important; width: 25px; height: 22px; line-height: 22px; border-radius: 4px!important; text-align: center; z-index: 1; transform: scale(0.0); box-shadow: 0 0 5px rgba(0,0,0,0.15); transition: all .3s;}
#sidebar-wrapper.label-size:hover .label-count{transform:scale(1.0)}
.list-label-widget-content li{display:block;padding:4px 0;position:relative;margin:0}.list-label-widget-content li:first-child{padding:0 0 4px}.list-label-widget-content li:last-child{padding-bottom:0;border-bottom:0}.list-label-widget-content li a:before{content:'\f111';position:absolute;left:0;top:10px;font-size:8px;font-family:fontawesome;color:#ccc;transition:all .3s}.list-label-widget-content li a:hover:before{color:#e3145f}.list-label-widget-content li:first-child a:before{top:7px}.list-label-widget-content li a{padding-left:20px;font-size:14px;color:#222}.list-label-widget-content li a:hover{color:#e3145f}.list-label-widget-content li span:last-child{color:#999;font-size:12px;font-weight:400;position:absolute;top:8px;right:0}.list-label-widget-content li:first-child span:last-child{top:2px}
.cloud-label-widget-content{text-align:left;overflow:hidden}
.cloud-label-widget-content .label-count{background:#e3145f;color:#fff;margin-left:-3px;white-space:nowrap;border-radius:0;padding:1px 4px;font-size:12px;margin-right:5px}.cloud-label-widget-content .label-size{position:relative;background:#586662;display:inline-block;float:left;font-size:12px;margin:0 4px 4px 0;border-radius:3px}.cloud-label-widget-content .label-size:hover{background:#367a5b}.cloud-label-widget-content .label-size a,.cloud-label-widget-content .label-size span{color:#fff;display:inline-block;font-size:14px;font-weight:600;padding:4px 12px}.cloud-label-widget-content .label-size a:hover{color:#fff}.cloud-label-widget-content .label-size:hover a{color:#fff}.cloud-label-widget-content .label-size:hover span{background:#2f2f2f;color:#fff;cursor:pointer}.cloud-label-widget-content .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%}.label-size-1,.label-size-2{opacity:100}


Сохраняем Тему.

После этого проверяем, как выглядит виджет в блоге (чтобы при навидении курсора начало отображать количество сообщений по кажому из ярлыков в разделе Дизайн откройте виджет ярлыки и поставьте галочку напротив - Показывать количество сообщений для каждого ярлыка), Если ярлыки выглядят так же, как на демо, тогда ок, но если не так, как на демо, тогда делаем следующее, ищем в Теме виджет Ярлыки или Label1, если его нет, тогда создаем новый в разделе Дизайн. После возвращаемся в редактор HTML\JS вверху кликаем по кнопке Список виджетов, в списке выбираем Label1. Меняем весь код виджета начиная от открывающего тега <b:widget... до закрывающего тега </b:widget> на вот этот HTML код:

 <b:widget id='Label1' locked='false' title='Ярлыки' type='Label'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>CLOUD</b:widget-setting>
        <b:widget-setting name='selectedLabelsList'/>
        <b:widget-setting name='showType'>ALL</b:widget-setting>
        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
    </b:widget>

Сохраняем Тему.


На этом мы завершаем наш очередной урок по улучшению шаблона blogger.



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем