Unlabelled Widget Featured Content Slider Blogger

Wednesday, September 26, 2018

Widget Featured Content Slider Blogger

Diterbitkan


Cara Pasang :
  • Tema >  Edit HTML
  • Copas kode berikut ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

//<![CDATA[ /* Title: jShowOff: a jQuery Content Rotator Plugin Author: Erik Kallevig Version: 0.1.2 Website: http://ekallevig.com/jshowoff License: Dual licensed under the MIT and GPL licenses. */ (function($){$.fn.jshowoff=function(settings){var config={animatePause:true,autoPlay:true,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"> /* jShowOff jQuery Content Slider to Blogger : www.bloggertipandtrick.net */ @import url(http://fonts.googleapis.com/css?family=Droid+Serif); #bttjshowoffslider{background:#efefef; position:relative; overflow:hidden; width:600px; height:300px; font-family:Droid Serif,sans-serif; font-size:13px} .jshowoff{width:600px; margin:10px 0} .jshowoff div{width:600px; height:300px} .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: true, // 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>

  • Lalu simpan template
  • Lalu masuk ke Layout > Add WidGet > Pilih HTML/JavaScript
  • Masukkanlah kode ini

<div id="bttjshowoffslider">
   <!-- Slide 1 Started -->
   <div><a href="SLIDE-1-LINK-HERE" title="Enter Slide 1 Title Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6Yuw4KZoJHG-0EPqnc22n_v7kV4pbrTs2LiF8p9iRnjCdKtmOviXS7zG3MnlG3Ic-l-DZxvEUU4tF-1sWzSdsSyM-3KMRmI0mqa7Vc9Bt8PqP7P5o4yBuBykL4fJiDgwodS4d49Ea_4Z/s1600/slide-image-1.jpg"/></a></div>
   <!-- Slide 1 End -->
 
   <!-- Slide 2 Started -->
   <div>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXyJM1uOQXVbGjcxdR8ZZUctb_sbq5lBrun5CY5GbtNTnk45lhyphenhyphenWA0Vg035VLMXR3O5rUO2fxrKgzqq4otwKyky8l7Ha2d9QkhhML4yc-jcgt7OinQylK5zsG_sScBT2FFfDzwH2xMf0dt/s1600/slide-image-2.jpg" class="float-right" />
      <h2>HTML Slide</h2>
      <p>Example of an HTML slide.</p>
      <p>Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p>
      <p><a href="SLIDE-2-LINK-HERE" title="Enter Slide 2 Title Here">Learn More &#8250;</a></p>
   </div>
   <!-- Slide 2 End -->
 
   <!-- Slide 3 Started -->
   <div><a href="SLIDE-3-LINK-HERE" title="Enter Slide 3 Title Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0xFPz6XKpFrtLjdGxCdxZuFCt2fkicoIVnAshr3Xm_ujvGjxFo1-42NnK9Y3FxxDRzT1pHCLvPGI4_j-ZXU94uEPB63N9enfv_q-QcBpq_CNQBYzAsI1nw7V_5gV687DTNwI87HgPkyW/s1600/slide-image-3.jpg"/></a></div>
   <!-- Slide 3 End -->
 
   <!-- Slide 4 Started -->
   <div><a href="SLIDE-4-LINK-HERE" title="Enter Slide 4 Title Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh47Qw7iwtFURAoFCuKeLxVzWDpQNwb6uQObiW68gNV9ViWXVZPVxW3WzNkqly8iL8__chq56e5t2D4CCdc-d3PDEHZ7oF62C400SRJ3xztNcLbdUq7ePWGtaTr4kBgA1ZRBLY5IJZv8g6Y/s1600/slide-image-4.jpg"/></a></div>
   <!-- Slide 4 End -->
 
</div>
INFO : Ganti situs yang tulisan berwarna merah itu menjadi situs gambar kalian

Artikel Terkait

Andrew Malsar Sianturi

Next Post
Previous Post


EmoticonEmoticon

Subscribe to: Post Comments (Atom)