share isyarat 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.
. Namun yang ini lebih simple baik tampilan maupun cara memasangnya.
Disebut user friendly alasannya yakni slidernya dapat diatur autoplay dan manual. Sebaiknya manualkan saja, yakni user sendiri yang klik "Play" untuk melihat tampilan gambar berikutnya. Ini screenshotnya:
1. Layout > Add a Gadget > Edit HTML/JavaScript
2. Copas isyarat 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:'‹ Previous',next:'Next ›'}, // 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="
https://duniainformasisemasa321.blogspot.com//search?q=memasang-featured-post-image-user-friendly" title="Memasang Featured Posts Content Image Slider di Blogger"color: red;">Dasar-Dasar SEO - Panduan Google">
<img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95fTjMkDB3BSICsiAIri9YKzPSWBA0RQBSGyjsWgq7Obq-y3rfHlRSEOzdDdG21cUaaY83XXyReWOpuerD5b5RO-o23e_dQC2V8v75pY-4UGdl16-P-R30VXJDUTUke-FMg_31upDUOw/s1600/SEO+Blog.jpg" style="width:450px"/></a>
</div>
<!-- Slide 1 End -->
<!-- Slide 2 Started -->
<div><a href="
LINK POSTING DI SINI" title="Memasang Featured Posts Content Image Slider di Blogger"color: red;">JUDUL POSTING DI SINI">
<img src="
LINK GAMBAR DI SINI" style="width:450px"/></a>
</div>
<!-- Slide 2 End -->
<!-- Slide 3 Started -->
<div><a href="
https://duniainformasisemasa321.blogspot.com//search?q=memasang-featured-post-image-user-friendly" title="Memasang Featured Posts Content Image Slider di Blogger"color: red;"> 10 Tips SEO untuk Blogger Pemula Meningkatkan Jumlah Pengunjung"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYkThRCQ_yYLFa76fCN5nSXoQWYj2itD2fLVOw9q40on-KAomY_24AcqiYGd3v9zY0l3dBX5b8pTrRmVVGTO0pjTxyTWUYl2v51hl3uuIxl_V4ZZrvhPmsaJWSbvtBwaY-LJzk9HmX_41/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="Memasang Featured Posts Content Image Slider di Blogger"color: red;">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!
Featured Posts Content Image Slider ini tampil di halaman depan saja, maka tambahkan isyarat
Beres.
. Good Luck and Happy Blogging! (http://www.contohblog.com).*
