Привет друзья! Многие из Вас видели блоги зарубежных коллег. Что в первую очередь бросается в глаза? Это  Slider с рекомендуемыми сообщениями. У нас Slider ещё мало можно увидеть в блогах. Но постепенно мы начинаем понимать,что это очень удобно для наших посетителей.Кому не захочется нажать на картинку?Думаю таких мало найдётся.Я не буду описывать все прелести этого виджета, так как мы знаем из законов блогосферы посты должны быть по возможности короткими. Давайте приступим:

Добавление рекомендуемые сообщения Slider (смарт Jquery) для Blogger


Идём- Шаблон - Изменить HTLM ищем строчку </head> пользуемся клавишей CTRL+F и вставьте этот код перед </head>  .

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function() {
          jQuery('#mycarousel').jcarousel({
          wrap:"both",
          scroll:2,
          animation:"slow"
  });
          function mycarousel_initCallback(carousel) {
          jQuery('#featured-next-button').bind('click', function() {
                  carousel.next();
                  return false;
          });
          jQuery('#featured-prev-button').bind('click', function() {
                  carousel.prev();
                  return false;
          });
          jQuery('.button-nav span').bind('click', function() {
                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                  return false;
          });
  };
          jQuery('#feature-carousel').jcarousel({
          wrap:"both",
          scroll:1,
          auto:10,
          initCallback: mycarousel_initCallback,
          buttonNextHTML: null,
          buttonPrevHTML: null
  });
});
</script>
<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

Сохраните шаблон. Далее - Дизайн. Нажмите добавить гаджет HTML/Javascript и вставьте код:

 <div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-адрес-поста'><img src='SLIDE-1-изобр-ADDRESS-здесь'/></a></li>
<li><a href='SLIDE-2-адрес-поста'><img src='SLIDE-2-изобр-ADDRESS-здесь'/></a></li>

<li><a href='SLIDE-3-адрес-поста'><img src='SLIDE-3-изобр-ADDRESS-здесь'/></a></li>
<li><a href='SLIDE-4-адрес-поста'><img src='SLIDE-4-изобр-ADDRESS-здесь'/></a></li>

<li><a href='SLIDE-5-адрес-поста'><img src='SLIDE-5-изобр-ADDRESS-здесь'/></a></li>
</ul>
</div>

Примечание: заменить "SLIDE-1-адрес-поста" с вашим реальным URL на пост.
 заменить  " SLIDE-5-изобр-ADDRESS-здесь"с реальными URL изображениями.

Пример слайдера:


Вот и всё. Надеюсь у Вас всё получилось. Всего доброго. Желаю удачи.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


8 коммент. :

  1. Никак не разберусь куда что и на что менять!Появляется пустой слайдер!

    ОтветитьУдалить
  2. URL адрес картинки и URL адрес поста указывал?Дайте ссылку на свой блог,я посмотрю.

    ОтветитьУдалить
  3. Влад Гридус12 июля 2012 г., 14:35

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

    ОтветитьУдалить
  4. Точно не знаю может в этой строчке:
    jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}

    ОтветитьУдалить
  5. все делаю по вашим указаниям, а получается огромная рамка с огромными фотографиями(
    помогите пожалуйста

    ОтветитьУдалить
  6. Картинки должны быть маленькими, из поста.

    ОтветитьУдалить
  7. я ничего туда не вставлял, она просто при вставке кода выдает вот это
    https://ivanalekseevichbunin.blogspot.com

    ОтветитьУдалить
  8. Нужно указывать ссылки на пост и на картинку из поста,тогда всё получится.

    ОтветитьУдалить