Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
пятница, 18 мая 2018 г.

Добавлям Slider с рекомендуемыми сообщениями

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

Идём- Шаблон - Изменить HTLM ищем строчку </head> пользуемся клавишей CTRL+F и вставьте этот код перед </head>  .
<script src='[url]http://bnote.googlecode.com/files/jquery-1.2.6.min.js'[/url] type='text/javascript'></script>
<script src='[url]http://bnote.googlecode.com/files/jquery.jcarousel.pack.js'[/url] type='text/javascript'></script>
<script src='[url]http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js'[/url] 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([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieP_drZtY6x2KdSt0RhkTknY6cAwQmgLPFMBoZY5_Oq0jnuhFyid-lnaeZ8KHK-kUu29MU8dYFa_JX_5OJEUgrG2ZOD_uAbUMgWv1ENVsivKk9Rz6GiNWtw78pCZ0tbGLbjietcApJvQHv/s1600/image-slider-button.png[/url]) 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([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieP_drZtY6x2KdSt0RhkTknY6cAwQmgLPFMBoZY5_Oq0jnuhFyid-lnaeZ8KHK-kUu29MU8dYFa_JX_5OJEUgrG2ZOD_uAbUMgWv1ENVsivKk9Rz6GiNWtw78pCZ0tbGLbjietcApJvQHv/s1600/image-slider-button.png[/url]) 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 изображениями.
источник:https://forbloggerhelp.blogspot.ru/2011/11/kak-dobavit-slider-s-rekomenduemymi.html



0 коммент.:

Отправить комментарий