Cara Memasang Widget Featured Content Slider Blogger

Baca Juga

Cara Memasang Widget Featured Content Slider Blogger

Berikut ini cara memasang atau menampilkan Widget Featured Content Slider Blogger seperi gambar di atas, di halaman depan blog Blogger. Fungsinya untuk menampilkan konten atau posting unggulan kepada pengunjung.

Cara Memasang Widget Featured Content Slider Blogger

1. Tema >  Edit HTML

2. 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>

3. Save! Simpan Template!

4. Klik Layout (Tata Letak)

5. Klik Add Widget > Pilih HTML/JavaScript

6. Masukkan 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/AVvXsEg697wr9HOvFkldZK9z9D_yumtPrVKSX6YxfJVDyQERqLpHy-7MG92IbROWBFpNPkHtFW4PE-Yo3SUgO2maYcN4Eru9pwjuLK1QcxL8g6f9twRmxUcoPg1GtJ9Vu5aygei_fVgzGR12vhGr/s1600/slide-image-1.jpg"/></a></div>
   <!-- Slide 1 End -->
 
   <!-- Slide 2 Started -->
   <div>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhSFTxOompyq90D3_rhxGg0cAEi3D9o8_nKzv0dXgrUH1oqgoUf5Z-w_1FC2-Mfl9-faWjdWAOkruuruSMGdvA4uUm5W2AEOl7Vfj2rRFnFafHp87jTBbatPCoiACuIUhNUjB4J_qUpsP/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/AVvXsEginsUAZnmRoKhJxU-m68wDR8Uu6gzan_Oa9IdVl4ebJ4TIy-B8s2_mmI7u0h8b06Bupjm9NQ1Klp-nwiBX-Yhw_FhV0DLaT_xeLIOpjmVCVMQPVyS4RC1mjoJKalH-8AvpKIEOrhfUFf-o/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/AVvXsEj85VRwH4s8sGu8_FdSV3wTVBWN2s6vpCLD1lrD9ARWFyQs8fuSGZjsPtiX5X_Ii21JanEqxyrsHSp_S8zQRz40B41njQzam725fseCZ9rvZy-l2SKHwKkCTBrk4LZ8p2lChT_D7qOsHUIn/s1600/slide-image-4.jpg"/></a></div>
   <!-- Slide 4 End -->
 
</div>

Ubah  link posting, gambar, dan deskripsinya

Click "Save"!

Widget Featured Content Slider Blogger Lainnya: Mootools

1. Tema > Edit HTML
2. Copas di atad kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/9414412155/mootool-slider-custom.js"></script>
<style type='text/css'>
#myGallery, #myGallerySet {width: 515px;height: 250px;z-index:0;font-family: Georgia,Tahoma,Arial,Helvetica,Sans-serif;}
.jdGallery a{outline:0;}
.jdGallery{overflow: hidden;position: relative;}
.jdGallery img{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image:url('');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 90px;background: #363636;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 0;font-size: 16px;text-decoration:none;margin: 0;margin: 2px 5px 6px 5px;font-weight: normal;color: #ff9000 !important;}
.jdGallery .slideInfoZone h2 a
{padding: 0;font-size: 16px;text-decoration:none;margin: 0;font-weight: normal;color: #ff9000 !important;}
.jdGallery .slideInfoZone p
{padding: 0;font-size: 14px;margin: 2px 5px;color: #eee;}
</style>

Sumber Kode

3. Save your template.
4. Klik  "Layout" > "Add a Gadget" > pilih 'HTML/Javascript'
5. Copas kode berikut ini:

<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
         timed: true,
         delay: 5000,
         slideInfoZoneOpacity: 0.8,
         showCarousel: false
 });
}
window.addEvent('domready', startGallery);
</script>
<div id="myGallery">
<div class="imageElement"><h3>
<a href="ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE</a></h3><p>FEATURED-POST-1-DESCRIPTION</p><a href="#" class="open"></a>
<img src="FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" /></div>
<div class="imageElement"><h3>
<a href="ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE</a></h3>
<p>FEATURED-POST-2-DESCRIPTION</p><a href="#" class="open"></a>
<img src="FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" /></div>
<div class="imageElement"><h3>
<a href="ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE</a></h3>
<p>FEATURED-POST-3-DESCRIPTION</p><a href="#" class="open"></a>
<img src="FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" /></div>
<div class="imageElement"><h3>
<a href="ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE</a></h3>
<p>FEATURED-POST-4-DESCRIPTION</p><a href="#" class="open"></a>
<img src="FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" /></div>
<div class="imageElement"><h3>
<a href="ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE</a></h3>
<p>FEATURED-POST-5-DESCRIPTION</p><a href="#" class="open"></a>
<img src="FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" /></div>
</div>

Demikian Cara Memasang Widget Featured Content Slider Blogger. Good Luck! (www.contohblog.com).*

Sumber

Sumber2