дизайн гаджета статистика

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

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

В первую очередь нужно установить виджет статистики - панель управления - дизайн - добавить виджет - статистика. И установить флажок как на фото ниже. Сохранить.


Идём во вкладку Тема, находим закрывающийся тег </ head> и сразу над ним устанавливаем следующий код

<style type='text/css'>

.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:&quot;Просмотров страниц&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#DCDCDC;
color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#DCDCDC;
}
</style>  


В коде зелёным цветом я отметила цвет основного фона. Можно поменять на желаемый. Таблица цветов здесь.

Сейчас ещё один шаг. Там же во вкладке Тема нажмите на кнопку список виджетов и найдите Id гаджета статистики. Обычно это Stats 1. Нажмите на него и вас перебросит к коду виджета. Слева нажмите на чёрную стрелочку маркер, потом ещё на 2 появившееся, чтобы раскрыть весь код.


дизайн гаджета статистика

Найдите

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>Здесь будет весь код</b:widget>


 и заменить его полностью на этот. Конечно же, если вы ещё сомневаетесь в своих действиях по шаблону, лучше сделать резервную копию или потренироваться на тестовом блоге.

 <b:widget id='Stats1' locked='false' title='Статистика' type='Stats' version='1'>
    <b:widget-settings>
      <b:widget-setting name='showGraphicalCounter'>false</b:widget-setting>
      <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>
      <b:widget-setting name='showSparkline'>false</b:widget-setting>
      <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
      <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Статистика' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'>Всего сообщений &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Всего комментариев &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>


    </div>
  </div>
</b:includable>
  </b:widget>


После установки и замене кодов нажмите на функцию предварительного просмотра. Если вы видите новый вид гаджета статистики, смело нажимайте сохранить. Если вдруг что - то пошло не так, нажмите отменить изменения и проделайте эти 2 шага снова.

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

У меня всё. Спасибо всем за визит и до встречи. 

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


блоггер

Привет, друзья. Каждый раз, когда пишем сообщение и переходим в режим HTML для установки какого - то кода или поправки шаблона поста, мы видим в редакторе такой код

<div dir="ltr" style="text-align: left;" trbidi="on">

Блоггер его автоматически устанавливает ко всем сообщениям и страницам. Можете прямо сейчас посмотреть. Создайте новое сообщение и перейдите в режим HTML. Он там присутствует.

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

Этот код позволяет вашим посетителям переводить ваш блог на такие языки как арабский, сирийский иврит и другие, которые читаются справа налево. Он состоит из нескольких элементов, которые определены так

dir - форма направления в HTML
trbidi = "on" - Google Translate установлен в ON (Включено)
ltr - Слева направо
text-align  - Код CSS определяет выравнивание текста.


В настоящее время выравнивание текста установлено слева направо. Его можно вручную установить наоборот, заменив стиль = "text-align: left; to style =" text-align: right;

Для полноты картины хочу показать вам примеры

<div dir="ltr" style="text-align: left;" trbidi="on">


Текст расположен так ←

<div dir="ltr" style="text-align: right;" trbidi="on">


→Текст расположен так

<div dir="ltr" style="text-align: center;" trbidi="on">

Текст расположен так

Рассмотрим в чём его недостатки и есть ли смысл удаления этого кода

  1. Сделает  код страницы более чистым и аккуратным.
  2. Сделает сообщения более лёгко загружемыми и оптимизированными
  3. Удалит CSS code style = "text-align: left;" ,
  4. Ваши читатели могут по-прежнему переводить страницу с помощью таких инструментов, как переводчик Google.


Как просто удалить из редактора код  <div dir="ltr" style="text-align: left;" trbidi="on">

Заходим в панель администратора блога, вкладка настройки - язык форматирования - включить транслитерацию. Выбираете опцию ОТКЛЮЧЕНО. Сохраните изменения.



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

Всё. Создайте новое сообщение. Переключитесь на HTML и вы не найдете такого кода в своем блоге.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


поиск по сайту

Привет, друзья. Продолжая тему окно поиска для блога, предлагаю вам сегодня изменить внешний вид родного гаджета <<Поиск>>, чтобы сделать его более уникальным. Понятно, что сначала нужно установить этот гаджет - вкладка дизайн - добавить гаджет - поиск. И вот так выглядит это официальное окно на странице


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


Вариант 1. Без кнопки с картинкой - лупой.

поиск по блогу

table.gsc-search-box td.gsc-input{padding-right:5px!important}input.gsc-input{background-color:#fff;border-color:#CCC!important;padding:6px!important;height:17px;font-size:15px;color:#9F999D;border-radius:3px 0 0 3px;border-width:1px 0 1px 1px !important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #CCC;padding:5px;border-radius:0 3px 3px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:#fff url(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/s1600/search-icon.png) no-repeat center;border-width:1px 1px 1px 0}


Вариант 2.


input.gsc-input{background-color:#fff;border-color:#CDCDCD!important;padding:6px!important;border-radius:5px 0 0 5px!important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #ddd;padding:5px;border-radius:0 5px 5px 0;cursor:pointer}


Вариант 3.  Изменим цвет кнопки и рамки поля ввода.

поиск по блогу

input.gsc-input{background-color:#fff;border-color:#62B3EC!important;padding:6px!important;height:17px;font-size:13px}input.gsc-search-button{margin-left:-1px!important;border:1px solid #62B3EC;padding:5px;border-radius:0 5px 5px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:url(https://1.bp.blogspot.com/-ZJ9Ze0-zmMw/V5HsIRIztEI/AAAAAAAAAio/sLQreQ7dM3cnP7RsxkukoWXk9FowVN0sQCLcB/s1600/Search-icon.png) no-repeat center;background-color:#62B3EC;background-size:15px}.gsc-search-button:hover{background-color:#3B78E7;border-color:#3B78E7;border-radius:0 5px 5px 0}


Вариант 4. Окно с чёрным фоном.

поиск

table.gsc-search-box td.gsc-input{padding-right:40px!important}.gsc-search-button{display:none!important}input.gsc-input{padding:5px 0 8px 40px !important;height:22px;font-size:13px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important;box-shadow:2px 3px 3px #292929 inset;background:#fff url(https://1.bp.blogspot.com/-ZJ9Ze0-zmMw/V5HsIRIztEI/AAAAAAAAAio/sLQreQ7dM3cnP7RsxkukoWXk9FowVN0sQCLcB/s1600/Search-icon.png) no-repeat scroll 16px 12px;background-color:#444;background-size:12px;text-shadow:1px 3px 3px #0B0A0A}


Вариант 5. Красиво смотрится на разноцветном фоне за счёт прозрачности.


table.gsc-search-box td.gsc-input{padding-right:0!important}input.gsc-input{background-color:RGBA(0,0,0,0.5);padding:8px 15px!important;height:22px;font-size:15px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important}input.gsc-search-button{margin-left:-5px!important;margin-right:5px!important;padding:5px;border-radius:50%;cursor:pointer;font-size:0;height:30px;width:30px;background:#fff url(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/s1600/search-icon.png) no-repeat center;border-width:0}


А сейчас, определившись с выбором и готовым кодом, идём во вкладку Тема и перед строкой ]]></b:skin> устанавливаем код. Для начинающих советую прочитать статью как это просто сделать. Сохраните шаблон и полюбуйтесь результатом.

До встречи. 
👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Доброго времени суток, друзья. Окно поиска по блогу, это обязательный элемент любого ресурса. Позволяет пользователю найти необходимую информацию и свободно перейти на нужную страницу. Платформа BLOGGER предоставила нам гаджет окна поиска. Не знаю как сейчас, но раньше с ним были перебои. Я тогда установила у себя пользовательский поиск от Google Adsense. 


окно поиска

Если ваше старое поле поиска не работает должным образом, и вы хотите заменить его красивым и стильным, не волнуйтесь, просто выберите одно из предложенных и следуйте инструкциям ниже. Внешний вид дизайна зависит от вас, вы также можете редактировать CSS в соответствии с дизайном вашего блога.

Определю вот такие преимущества окна поиска, варианты которого предлагаю сегодня

Добавите профессиональную внешность на ваш блог.
Обеспечьте удобный поиск для читателя.
Сохраните время пользователя.
Может применяться в любом месте, например, в заголовке, боковой панели, нижнем колонтитуле и т. д.
Стильные активные, зависающие и фокусные эффекты.
Чистый CSS, без изображения.
Легкая настройка стилей CSS.
Автоматическая регулировка ширины.

Посмотрите примеры и выбирайте понравившийся вариант. В статье у меня только картинки. Все коды рабочие. Настройки рассмотрим ниже. Единственное условие -

требуется минимальная ширина боковой панели - 250 пикселей

Вариант 1..




Код
<style type="text/css">
    #hbz-searchbox {
        height: 40px;
        position: relative;
        min-width: 250px;
        max-width: 300px;
        margin: 10px auto;
    }
 
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #009bff;
        cursor: pointer;
        border-bottom: 5px solid #0276c1;
    }
 
    .hbz-buttonwrap:hover {
        border-bottom: 5px solid #bc490a;
        background: #d75813;
    }
 
    .hbz-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
 
    .hbz-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
 
    .hbz-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
 
    #hbz-input {
        height: 32px;
        width: 82%;
        position: absolute;
        padding-left: 4%;
        border: none;
        outline: none;
        right: 14%;
        border-bottom: 5px solid #bbb;
        border-left: 1px solid #eaeaea;
        background-color: #fbfbfb;
        border-top: 1px solid #eaeaea;
        box-shadow: 1px 1px 2px #e9e4e4 inset;
    }
 
    #hbz-input:focus,
    #hbz-input:active {
        background-color: #fff;
    }
</style>

<form action="/search" id="hbz-searchbox" method="get">
    <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="hbz-input" placeholder="Что искать ..." />
    <input type="hidden" name="max-results" value="8" />
</form>


Вариант 2.

поиск по блогу

Код
<style type="text/css">
    #hbz-searchbox {
        min-width: 250px;
        margin: 10px auto;
        border-radius: 3px;
        overflow: hidden;
        max-width: 300px;
    }
 
    #hbz-input {
        width: 59.2%;
        padding: 10.5px 4%;
        font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
        border: none;
        background-color: #EEE;
    }
 
    #hbz-input:focus {
        outline: none;
        background-color: #FFF;
        box-shadow: 0 0 2px #333333 inset;
    }
 
    #hbz-submit {
        overflow: visible;
        position: relative;
        float: right;
        border: none;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 32.8%;
        font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
        color: #FFF;
        text-transform: uppercase;
        background-color: #D83C3C;
    }
 
    #hbz-submit::before {
        content: "";
        position: absolute;
        border-width: 8px;
        border-style: solid solid solid none;
        border-color: transparent #D83C3C;
        top: 12px;
        left: -6px;
    }
 
    #hbz-submit:focus,
    #hbz-submit:active {
        background-color: #C42F2F;
        outline: none;
    }

    #hbz-submit:focus::before,
    #hbz-submit:active::before {
        border-color: transparent #C42F2F;
    }

    #hbz-submit:hover {
        background-color: #E54040;
    }

    #hbz-submit:hover::before {
        border-color: transparent #E54040;
}
</style>

<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Что искать..." />
    <input type="hidden" name="max-results" value="8" />
    <button id="hbz-submit" type="submit">Поиск</button>
</form>


Вариант 3.

поиск для блога

Код

<style type="text/css">
    #hbz-searchbox {
        background-color: #F5F5F5;
        border: 1px solid #EDEDED;
        padding: 5px;
        border-radius: 10px;
        margin: 10px auto;
        min-width: 238px;
        max-width: 288px;
    }
 
    #hbz-input {
        background-color: #FEFEFE;
        border: medium none;
        font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;
        margin-right: 2%;
        padding: 4%;
        box-shadow: 2px 1px 4px #999999 inset;
        border-radius: 9px;
        width: 60.33%;
    }
 
    #hbz-input:focus {
        outline: medium none;
        box-shadow: 1px 1px 4px #0D76BE inset;
    }
 
    #hbz-submit {
        background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;
        border-radius: 9px;
        border: medium none;
        color: #FFF;
        cursor: pointer;
        font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;
        padding: 4%;
        width: 28%;
    }
 
    #hbz-submit:hover {
        background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;
    }
</style>

<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Type Here..." />
    <input type="hidden" name="max-results" value="8" />
    <input id="hbz-submit" type="submit" value="Search" />
</form>


Вариант 4.


Код

<style type="text/css">
    #hbz-searchbox {
        background: transparent linear-gradient(#2C2C2C, #111);
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        border-radius: 4px;
        padding: 10px;
        z-index: 1;
        display: block;
        margin: 10px auto;
        min-width: 228px;
        max-width: 278px;
    }
 
    #hbz-input,
    .hbz-submit {
        box-shadow: 0 2px #000;
        font-family: 'Cabin', helvetica, arial, sans-serif !important;
        margin: 0px;
        padding: 0px;
    }
 
    #hbz-input {
        background: linear-gradient(#333, #222);
        border: 1px solid #444;
        color: #888;
        display: block;
        float: left;
        font-size: 13px;
        height: 30px;
        padding-left: 4%;
        padding-right: 4%;
        width: 60.2%;
        border-radius: 3px 0px 0px 3px;
    }
 
    #hbz-input:focus {
        animation: glow 800ms ease-out infinite alternate;
        border-color: #393;
        color: #efe;
        outline: none;
    }
 
    .hbz-submit {
        background: linear-gradient(#333, #222);
        box-sizing: content-box;
        border: 1px solid #444;
        border-left-color: #000;
        color: #fff;
        display: block;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        position: relative;
        width: 30%;
        cursor: pointer;
        border-radius: 0px 3px 3px 0px;
    }
 
    .hbz-submit:hover,
    .hbz-submit:focus {
        background: linear-gradient(#393939, #292929);
    }
 
    .hbz-submit:hover,
    .hbz-submit:focus {
        color: #5f5;
        outline: none;
    }
 
    .hbz-submit:active {
        top: 1px;
    }
 
    @keyframes glow {
        0% {
            border-color: #393;
            box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F;
        }
        100% {
            border-color: #6f6;
            box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F;
</style>

<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Что ищем..." />
    <input type="hidden" name="max-results" value="8" />
    <button class="hbz-submit" type="submit">Поиск</button>
</form>


Вариант 5.

поиск для блога

Код

<style type="text/css">
    #hbz-searchbox {
        height: 35px;
        margin: 10px auto;
        position: relative;
        min-width: 250px;
        max-width: 300px;
    }
 
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #444;
        cursor: pointer;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
 
    .hbz-buttonwrap:hover {
        background: #1a1a1a;
    }
 
    .hbz-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
 
    .hbz-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
 
    .hbz-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
 
    #hbz-input {
        height: 35px;
        width: 82%;
        padding: 0px;
        padding-left: 4%;
        border: none;
        outline: none;
        position: absolute;
        right: 14%;
        box-shadow: inset 0 2px 2px #080808;
        background-color: #444444;
        color: #fff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: all 0.5s;
    }
 
    #hbz-input:hover,
    #hbz-input:focus {
        box-shadow: inset 1px 1px 10px #000;
    }
</style>

<form action="/search" id="hbz-searchbox" method="get">
    <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="hbz-input" placeholder="Что ищем..." />
    <input type="hidden" name="max-results" value="8" />
</form>


Выбираете понравившийся вариант, заходите во вкладку Дизайн, выбираете гаджет HTML/JavaScript и устанавливайте код окна поиска. В каждом коде можно изменить значение  value="8"  для общего количества сообщений на странице. Например, на значение  value="12" . Поиграйтесь с цветом кнопок или поля (background: #444;), чтобы получить ещё другие эффекты. Таблица цветов здесь.

Спасибо за ваш визит и до встречи. 
👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Всем, доброго времени суток. Самый обычный слайдер для изображений в сайдбаре блога на CSS.

слайдер

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

Готовый код устанавливаем в гаджет HTML/JavaScript в сайдбаре блога. Так же можно разместить любые баннеры ваших партнёрских программ или что - то другое.


<div class="slider">

<figure>

<a href="адрес страницы"><img src="адрес картинки.jpg" alt="рамки"></a>

<a href="адрес страницы"><img src="адрес картинки.jpg" alt=""></a>

<a href="адрес страницы"><img src="адрес картинки.jpg"alt=""></a>

<a href="адрес страницы"><img src="адрес картинки.jpg"  alt=""></a>

<a href="адрес страницы"><img src="адрес картинки.jpg" alt=""></a>

</figure>

</div>



<style>

@keyframes slidy {

0% {left: 0%;}

20% {left: 0%;}

25% {left: -100%;}

45% {left: -100%;}

50% {left: -200%;}

70% {left: -200%;}

75% {left: -300%;}

95% {left: -300%;}

100% {left: -400%;}

}

.slider {overflow: hidden; margin: 0; width: 325px;}

.slider figure img {width: 20%; float: left; height: 310px;}

.slider figure {

position: relative;

width: 500%;

margin: 0;

left: 0;

text-align: left;

font-size: 0;

animation: 15s slidy infinite alternate;

}

</style>


Ширину и высоту слайдов  width: 325px; height: 310px;  можно менять на своё усмотрение. Если сделать более крупные картинки, то такой слайдер красиво смотрится если расположить его над гаджетом <<сообщения>>.

Другие варианты слайдеров вы можете посмотреть у меня на странице << все статьи >> в разделе картинки.

Спасибо всем за визит и до встречи.

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Пользовательский поиск
Foto Saya
My Photo