Cara Membuat Featured Post plus Gambar dan Slider di Blogger

Baca Juga

Featured Post adalah widget Blogger untuk menampilkan posting atau tulisan unggulan di blog. Blogger sudah menyediakan widgetnya.

Kita juga bisa pasang Featured Post lebih keren berupa Featured Image Widget- jShowOff jQuery Content Slider.

Featured Post ini disebut juga Content Image Carousel atau Slider. Sebenarnya slider tidak bagus buat blog karena hanya bikin berat dan bikin pusing mata pengunjung. Namun, banyak juga yang mau memasangnya untuk memperindah penampilan blog.

Berikut ini Featured Image Widget: jShowOff jQuery Content Slider for Blogger yang keren punya dari BTT. Ini penampakannya.

Cara Membuat Featured Post plus Gambar dan Slider

Berikut ini Cara Membuat Featured Post plus Gambar dan Slider di halaman depan blog. Login ke akun Blogger Anda, lalu ikuti langkah berikut ini:

1. Klik Tema > Edit HTML.
2. Simpan 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>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.2.1.min.js' type='text/javascript'></script>
<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!

Langkah berikutnya adalah memasang widgetnya.

4. Klik Layout > Pilih HTML/JavaScript
5. Copas kode berikut ini di kolom konten. Judul widget kosongkan.

<!-- jShowOff Slider Started -->
<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>

6. Ganti tulisan warna merah di Slide 1 dan seterusnya dengan link postingan, judul slide, dan link gambar.

Demikian Cara Membuat Featured Post plus Gambar dan Slider di Blogger. Ukuran lebar dan tinggi bisa diatur di kode pertama (CSS), yaitu kode:

.jshowoff div{width:600px; height:300px}

Good Luck & Happy Blogging! (www.contohblog.com).*