Memasang Featured Posts Content Image Slider di Blogger

Baca Juga

Cara Memasang Featured Posts Content Image Slider di Halaman Depan Blogger.

KEMBALI CB share kode widget Featured Posts Content Image Slider yang user friendly. Widget ini menampilkan beberapa gambar di halaman depan dan ngelink ke halaman posting. Bisa juga linknya ke luar blog kita.

Sebelumnya CB sudah share kode Featured Post Image User Friendly lainnya. Namun yang ini lebih simple baik tampilan maupun cara memasangnya.

Disebut user friendly karena slidernya bisa diatur autoplay dan manual. Sebaiknya manualkan saja, yakni user sendiri yang klik "Play" untuk melihat tampilan gambar berikutnya. Ini screenshotnya:

Cara Memasang Featured Posts Content Image Slider

1. Layout > Add a Gadget > Edit HTML/JavaScript
2. Copas kode berikut ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>
//<![CDATA[
(function($){$.fn.jshowoff=function(settings){var config={animatePause:true,autoPlay:false,changeSpeed:600,controls:true,controlText:{play:'Play',pause:'Pause',next:'Next',previous:'Previous'},effect:'fade',hoverPause:true,links:true,speed:3000};if(settings)$.extend(true,config,settings);if(config.speed<(config.changeSpeed+20)){alert('jShowOff: Make speed at least 20ms longer than changeSpeed; the fades aren\'t always right on time.');return this;};this.each(function(i){var $cont=$(this);var gallery=$(this).children().remove();var timer='';var counter=0;var preloadedImg=[];var howManyInstances=$('.jshowoff').length+1;var uniqueClass='jshowoff-'+howManyInstances;var cssClass=config.cssClass!=undefined?config.cssClass:'';$cont.css('position','relative').wrap('<div class="jshowoff '+uniqueClass+'" />');var $wrap=$('.'+uniqueClass);$wrap.css('position','relative').addClass(cssClass);$(gallery[0]).clone().appendTo($cont);preloadImg();if(config.controls){addControls();if(config.autoPlay==false){$('.'+uniqueClass+'-play').addClass(uniqueClass+'-paused jshowoff-paused').text(config.controlText.play);};};if(config.links){addSlideLinks();$('.'+uniqueClass+'-slidelinks a').eq(0).addClass(uniqueClass+'-active jshowoff-active');};if(config.hoverPause){$cont.hover(function(){if(isPlaying())pause('hover');},function(){if(isPlaying())play('hover');});};if(config.autoPlay&&gallery.length>1){timer=setInterval(function(){play();},config.speed);};if(gallery.length<1){$('.'+uniqueClass).append('<p>For jShowOff to work, the container element must have child elements.</p>');};function transitionTo(gallery,index){var oldCounter=counter;if((counter>=gallery.length)||(index>=gallery.length)){counter=0;var e2b=true;}
else if((counter<0)||(index<0)){counter=gallery.length-1;var b2e=true;}
else{counter=index;}
if(config.effect=='slideLeft'){var newSlideDir,oldSlideDir;function slideDir(dir){newSlideDir=dir=='right'?'left':'right';oldSlideDir=dir=='left'?'left':'right';};counter>=oldCounter?slideDir('left'):slideDir('right');$(gallery[counter]).clone().appendTo($cont).slideIt({direction:newSlideDir,changeSpeed:config.changeSpeed});if($cont.children().length>1){$cont.children().eq(0).css('position','absolute').slideIt({direction:oldSlideDir,showHide:'hide',changeSpeed:config.changeSpeed},function(){$(this).remove();});};}else if(config.effect=='fade'){$(gallery[counter]).clone().appendTo($cont).hide().fadeIn(config.changeSpeed,function(){if($.browser.msie)this.style.removeAttribute('filter');});if($cont.children().length>1){$cont.children().eq(0).css('position','absolute').fadeOut(config.changeSpeed,function(){$(this).remove();});};}else if(config.effect=='none'){$(gallery[counter]).clone().appendTo($cont);if($cont.children().length>1){$cont.children().eq(0).css('position','absolute').remove();};};if(config.links){$('.'+uniqueClass+'-active').removeClass(uniqueClass+'-active jshowoff-active');$('.'+uniqueClass+'-slidelinks a').eq(counter).addClass(uniqueClass+'-active jshowoff-active');};};function isPlaying(){return $('.'+uniqueClass+'-play').hasClass('jshowoff-paused')?false:true;};function play(src){if(!isBusy()){counter++;transitionTo(gallery,counter);if(src=='hover'||!isPlaying()){timer=setInterval(function(){play();},config.speed);}
if(!isPlaying()){$('.'+uniqueClass+'-play').text(config.controlText.pause).removeClass('jshowoff-paused '+uniqueClass+'-paused');}};};function pause(src){clearInterval(timer);if(!src||src=='playBtn')$('.'+uniqueClass+'-play').text(config.controlText.play).addClass('jshowoff-paused '+uniqueClass+'-paused');if(config.animatePause&&src=='playBtn'){$('<p class="'+uniqueClass+'-pausetext jshowoff-pausetext">'+config.controlText.pause+'</p>').css({fontSize:'62%',textAlign:'center',position:'absolute',top:'40%',lineHeight:'100%',width:'100%'}).appendTo($wrap).addClass(uniqueClass+'pauseText').animate({fontSize:'600%',top:'30%',opacity:0},{duration:500,complete:function(){$(this).remove();}});}};function next(){goToAndPause(counter+1);};function previous(){goToAndPause(counter-1);};function isBusy(){return $cont.children().length>1?true:false;};function goToAndPause(index){$cont.children().stop(true,true);if((counter!=index)||((counter==index)&&isBusy())){if(isBusy())$cont.children().eq(0).remove();transitionTo(gallery,index);pause();};};function preloadImg(){$(gallery).each(function(i){$(this).find('img').each(function(i){preloadedImg[i]=$('<img>').attr('src',$(this).attr('src'));});});};function addControls(){$wrap.append('<p class="jshowoff-controls '+uniqueClass+'-controls"><a class="jshowoff-play '+uniqueClass+'-play" href="#null">'+config.controlText.pause+'</a> <a class="jshowoff-prev '+uniqueClass+'-prev" href="#null">'+config.controlText.previous+'</a> <a class="jshowoff-next '+uniqueClass+'-next" href="#null">'+config.controlText.next+'</a></p>');$('.'+uniqueClass+'-controls a').each(function(){if($(this).hasClass('jshowoff-play'))$(this).click(function(){isPlaying()?pause('playBtn'):play();return false;});if($(this).hasClass('jshowoff-prev'))$(this).click(function(){previous();return false;});if($(this).hasClass('jshowoff-next'))$(this).click(function(){next();return false;});});};function addSlideLinks(){$wrap.append('<p class="jshowoff-slidelinks '+uniqueClass+'-slidelinks"></p>');$.each(gallery,function(i,val){var linktext=$(this).attr('title')!=''?$(this).attr('title'):i+1;$('<a class="jshowoff-slidelink-'+i+' '+uniqueClass+'-slidelink-'+i+'" href="#null">'+linktext+'</a>').bind('click',{index:i},function(e){goToAndPause(e.data.index);return false;}).appendTo('.'+uniqueClass+'-slidelinks');});};});return this;};})(jQuery);(function($){$.fn.slideIt=function(settings,callback){var config={direction:'left',showHide:'show',changeSpeed:600};if(settings)$.extend(config,settings);this.each(function(i){$(this).css({left:'auto',right:'auto',top:'auto',bottom:'auto'});var measurement=(config.direction=='left')||(config.direction=='right')?$(this).outerWidth():$(this).outerHeight();var startStyle={};startStyle['position']=$(this).css('position')=='static'?'relative':$(this).css('position');startStyle[config.direction]=(config.showHide=='show')?'-'+measurement+'px':0;var endStyle={};endStyle[config.direction]=config.showHide=='show'?0:'-'+measurement+'px';$(this).css(startStyle).animate(endStyle,config.changeSpeed,callback);});return this;};})(jQuery);
//]]>
</script>

<style type="text/css">
#bttjshowoffslider{background:#efefef; position:relative; overflow:hidden; width:450px; height:225px; font-family:Droid Serif,sans-serif; font-size:13px}
.jshowoff{width:450px; margin:0 0 20px 0}
.jshowoff div{width:450px; height:280px}
.jshowoff div, .jshowoff img, .jshowoff{}
#basicFeatures, .jshowoff.basicFeatures, .jshowoff.basicFeatures img, .jshowoff.basicFeatures div{}
.jshowoff div p, .jshowoff div h2{_background-color:#efefef}
.jshowoff h2, .jshowoff p{font-size:18px; padding:15px 20px 0px; margin:0}
.jshowoff p{font-size:13px; line-height:15px}
.float-right{float:right; padding:15px 20px 15px 20px}
.jshowoff p.jshowoff-slidelinks{position:absolute; bottom:5px; right:5px; margin:0; padding:0}
.jshowoff-slidelinks a, .jshowoff-controls a{display:block; color:#fff; padding:5px 7px 5px; margin:5px 0 0 5px; float:none; text-decoration:none; outline:none; font-size:11px; line-height:14px; display:inline-block; font-family:Droid Serif,sans-serif}
.jshowoff-slidelinks a:hover, .jshowoff-controls a:hover{color:#fff}
.jshowoff-slidelinks a.jshowoff-active, .jshowoff-slidelinks a.jshowoff-active:hover{background-color:#fff; color:#000}
p.jshowoff-controls{background:#333; overflow:auto; height:1%; padding:0 0 5px 5px; margin:0 auto; text-align:center}
.jshowoff-controls a{margin:5px 5px 0 0; font-size:12px; line-height:15px; padding:4px 8px 5px}
.jshowoff-pausetext{color:#fff}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery('#bttjshowoffslider').jshowoff({
    animatePause: true, // Whether to use 'Pause' animation text when pausing
    autoPlay: false, // Whether to start playing immediately
changeSpeed: 600, // Speed of transition in milliseconds
controls: true, // Whether to create & display controls (Play/Pause, Previous, Next)
controlText:{play:'Play',pause:'Pause',previous:'&#8249; Previous',next:'Next &#8250;'}, // Text to use for controls
cssClass: 'bttjshowoff', // Add an additional custom class to the .jshowoff wrapper
effect: 'slideLeft', // Type of transition effect: 'fade', 'slideLeft' or 'none'
hoverPause: true, // Whether to pause on hover
links: false, // Whether to create & display numeric links to each slide
speed: 3000 // Time each slide is shown in milliseconds
});
});
//]]>
</script>
<div id="bttjshowoffslider">

   <!-- Slide 1 Started -->
   <div><a href="http://www.contohblog.com/2015/04/dasar-dasar-seo-panduan-google.html" title="Dasar-Dasar SEO - Panduan Google">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAZ1TleHKdwEu4OO4WDKzjRFdv_4GZWx6NYdEcAw-_KfN7Dj5hUbBcSNqWpTN1wLb1QwAFiTc4DlCtoOQaFpYovEcjL6Fi6JpiTAo4-tf2p9Lg-dUbbDB0uHwzRUR7JwQI2AV7e8P5G74/s1600/SEO+Blog.jpg" style="width:450px"/></a>
   </div>
   <!-- Slide 1 End -->

   <!-- Slide 2 Started -->
   <div><a href="LINK POSTING DI SINI" title="JUDUL POSTING DI SINI">
  <img src="LINK GAMBAR DI SINI" style="width:450px"/></a>
  </div>

   <!-- Slide 2 End -->

   <!-- Slide 3 Started -->
   <div><a href="http://www.contohblog.com/2016/04/10-tips-seo-untuk-blogger-pemula.html" title=" 10 Tips SEO untuk Blogger Pemula Meningkatkan Jumlah Pengunjung"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6YMPc_n0AwZAd2Le_mOMleFQbG3Y9MOLGiLna5R0SuYxMidRKn1pmJxIOMap5Y7x9y0ImgEN1viyWzWSmppWYWI6mYw3GUkoDysqkUwTe2IrzjZ1PEpN39bORGGP1KuELFQjdZLIya9DO/s1600/seo-tips-for-beginners1.jpg" style="width:450px"/></a></div>
   <!-- Slide 3 End -->

   <!-- Slide 4 Started -->
   <div><a href="SLIDE-4-LINK-HERE" title="Enter Slide 4 Title Here">
   <img src="URL IMAGE HERE" style="width:450px"/></a>
   </div>
   <!-- Slide 4 End -->
   </div>

3. Ganti link posting, judul, dan link gambarnya.
4. Save!

AGAR Featured Posts Content Image Slider ini tampil di halaman depan saja, maka tambahkan kode tag kondisional di dalam template, seperti ini:

<b:widget id='HTML5' locked='false' title='' type='HTML' visible='true'>
  <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>

Beres.

Model Featured Post Image Slider lainnya bisa dicek di sumber. Good Luck and Happy Blogging! (http://www.contohblog.com).*