Pengertian & Karakteristik Generasi Milenial

Pengertian & Karakteristik Generasi Milenial

Pengertian & Karakteristik Generasi Milenial

SETELAH menyimpan data tentang pengertin cyberquatter, kali ini CB akan simpan tentang pengertian generasi milenial (millennial).

Pengertin Generasi Milenial ini CB posting gegara mantengin berita politik seputar Pilpres 2019.

Istilah generasi milenial berulang-ulang disebutkan presenter dan narasumber (pengamat dan politisi). Katanya, kedua pasangan capres-cawapres harus mampu merebut suara generasi milenial agar menang.

Pengertian Generasi Milenial

Apa dan siapa generasi milenial? Pengertian praktisnya, generasi milenial adalah generasi muda atau mereka yang lahir dan dibersarkan di era milenium.

Menurut Wikipedia, milenium adalah bilangan untuk tiap jangka waktu seribu tahun dalam kalender. Istilah alaf yang berasal dari bahasa Arab banyak dipakai di Malaysia. Tahun 2000 disebut sebagai awal dari alaf baru dalam memasuki alaf ketiga (tahun 2000 sampai tahun 2999).

Jadi, secara bahasa, generasi milenial adalah orang-orang yang lahir tahun 2000 ke atas. Para pemain Timnas U-16 adalah generasi milineal.

Namun, Wikipedia juga menyimpan data tentang pengertian milenial. Disebutkan, milenial (juga dikenal sebagai Generasi Y) adalah kelompok demografi setelah Generasi X (Gen-X).

Tidak ada batas waktu yang pasti untuk awal dan akhir dari kelompok milenial. Peneliti sosial sering mengelompokkan generasi yang lahir diantara tahun 1980 an sampai 2000 an sebagai generasi millennial.

Jadi bisa dikatakan generasi milenial adalah generasi muda masa kini yang saat ini berusia sekitar 15 – 34 tahun.

Milenial pada umumnya adalah anak-anak dari generasi Baby Boomers dan Gen-X yang tua. Milenial kadang-kadang disebut sebagai "Echo Boomers" karena adanya 'booming' (peningkatan besar) tingkat kelahiran di tahun 1980-an dan 1990-an. 

Generasi milenial umumnya ditandai oleh peningkatan penggunaan dan keakraban dengan komunikasi, media, dan teknologi digital.

Tentang karakteristik generasi milenial ini, pada tahun 2015, Pewresearch (pewresearch.org) pernah melansir sebuah laporan tentang generasi milenial atau Gen Y ini.

Karakteristik Generasi Milenial 

Karakteristik generasi milenial antara lain dilansir laman USA Today. Sebuah studi menunjukkan, generasi millenial lebih terkesan individual, cukup mengabaikan masalah politik, fokus pada nilai-nilai materialistis, dan kurang peduli untuk membantu sesama jika dibandingkan dengan generasi X dan generasi baby boom pada saat usia yang sama. 

Studi ini sendiri berdasarkan analisa terhadap dua database dari 9 juta orang yang duduk di bangku SMA atau yang baru masuk kuliah.

Generasi ini bila dilihat dari sisi negatifnya, merupakan pribadi yang pemalas, narsis, dan suka sekali melompat dari satu pekerjaan ke pekerjaan yang lain.

Generasi millenial juga merupakan pribadi yang pikirannya terbuka, pendukung kesetaraan hak, memiliki rasa percaya diri yang bagus, mampu mengekspresikan perasaannya, pribadi liberal, optimis, dan menerima ide-ide dan cara-cara hidup.

Majalah Time sempat mengadakan polling yang hasilnya menunjukkan bahwa generasi Milenial menginginkan jadwal kerja yang fleksibel, lebih banyak memiliki 'me time' dalam pekerjaan, dan terbuka pada saran dan kritik, termasuk nasihat karier dari pimpinannya.

Generasi milenial juga sering ditujukan kepada pengguna aktif internet (netizen) dan media sosial serta gadget.

Demikian Pengertian & Karakteristik Generasi Milenial. (www.contohblog.com).*

Pengertian Cybersquatter

Pengertian Cybersquatter

Pengertian Cybersquatter - Cybersquatting - Jual Beli Nama Domain.

ISTILAH cybersquatter sedang trending setelah seorang cybersquatter dikabarkan memasang tarif Rp 1 Miliar bagi domain prabowosandi.com dan prabowosandi.id.

Apa sih Cybersquatter? Secara bahasa, Cybersquatter artinya penyerobot, dalam hal ini menyerobot atau merebut nama domain yang seharusnya dibeli pihak lain.

Jadi, cybersquatter adalah pelaku atau orang yang melakukan cybersquatting.

Mengutip laman Wikipedia, cybersquatting (penyerobotan domain name) adalah kejahatan yang dilakukan dengan cara mendaftarkan domain nama perusahaan orang lain dan kemudian berusaha menjualnya kepada perusahaan tersebut dengan harga yang lebih mahal.

Lebih jelasnya, cybersquatting adalah mendaftar, menjual, atau menggunakan nama domain dengan maksud mengambil keuntungan dari merek dagang atau nama orang lain.

Menurut laman hukumonline, biasanya mereka yang melakukan pendaftaran domain itu memiliki niat untuk menjual nama domain yang sudah dimiliki tersebut dengan harga jauh lebih tinggi daripada harga seharusnya. 

Di luar negeri, praktek cybersquatting ini bisa dibilang cukup lumrah, karena tidak sedikit pengusaha yang melihat celah untuk mengambil manfaat ekonomis dari nama yang telah dikenal sebelumnya. Bahkan, praktek ini kemudian berkembang menjadi satu komoditi yang kemudian dikenal dengan "brooker" nama domain.

Secara hukum, di dunia termasuk Indonesia tidak ada satu peraturan yang dengan tegas mengatur tindakan cybersquatting. Namun, secara eksplisit persoalan cybersquatting ini diatur dalam di UDRP (Uniform Domain Name Dispute Resolution Policy) yang dikeluarkan oleh ICANN.

Demikian ulasan ringkas tentang Pengertian Cybersquatter. (www.contohblog.com).*

Blogger Sudah Masuk Kamus Besar Bahasa Indonesia, Tapi Istilahnya Bloger

Blogger Sudah Masuk Kamus Besar Bahasa Indonesia, Tapi Istilahnya Bloger

Istilah Bloger sudah masuk dalam Kamus Besar Bahasa Indonesia (KBBI). Namun, kata atau istilah bakunya BLOGER, dengan satu "G", bukan BLOGGER (dengan dua "G").

blo.ger /blogêr/n cak sebutan untuk orang yang mengeblog; pengeblog; narablog

Demikian tertuang dalam KBBI. Kesimpulannya, kata baku blogger dalam bahasa Indonesia adalah bloger, bukan blogger, jika yang dimaksudkan adalah orang yang ngeblog.

Jika kita memasukkan kata "blogger", maka hasilnya... blogger. Entri tidak ditemukan.

CB baru tahu ketika melihat judul sebuah disertasi (karya ilmiah S3) yang meneliti tentang blogger. Kok judulnya BLOGER, bukan BLOGGER. Ternyata, karya ilmiah itu mengacu pada istilah baku dalam kamus.

Bagi para blogger, yang sudah terbiasa dengan tulisan bloger dengan double g (blogger), tentu akan terasa janggal.

Apalagi, Google juga belum mengakui istilah bloger dengn satu "g". Misalnya, ketika aja kata bloger di Google, yang muncul ini: Menampilkan hasil untuk BLOGGER. Atau telusuri BLOGER

Jika kita klik menu "Berita" di Google itu, maka tidak ada berita terberu yang menggunakan istilah bloger, karena "semua" media berita juga menggunakan istilah blogger. Happy Blogging! (www.contohblog.com).*

Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

Berikut ini Cara Mengganti Next Post Home Older Post dengan Judul Posting atau Judul Tulisan di halaman dalam postingan Blogger, khususnya untuk template bawaan blogger.

Biasanya template yang bukan bawaan blogger sudah menggunakannya.

Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

1. Tema > Edit HTML
2. Copas kode CSS Next Post Home Older Post dengan Judul Posting berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.halaman{padding:5px 0;background:#fff;border-bottom:1px solid #f1f1f1;margin:10px 0 0}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#48d;}
.pager-title-left,.pager-title-right{font-family:'Oswald',sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}
</style>
</b:if>

3. Copas kode HTML Next Post Home Older Post dengan Judul Posting berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

Bisa juga disimpan di atas kode <div id='related post'> (kode posting terkait) atau di atas kode <div id='comments'> (kode kotak komentar)

<!-- Blog Pager New Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Previous</span><br/>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
You are reading the newest post
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Next</span><br/>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
You are reading the latest post
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>
<!-- Blog Pager New End -->

4. Copas kode JavaScript Next Post Home Older Post dengan Judul Posting berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if>

5. Cari dan ganti kode berikut ini:

    <!-- navigation -->
    <b:include name='nextprev'/>

dengan kode ini:

    <!-- navigation -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:include name='nextprev'/>
      </b:if>
      </b:if>

Jika kode  <b:include name='nextprev'/> tidak ditemukan, cari kode berikut ini yang ada di bawah kode <b:includable id='nextprev'>

  <div class='blog-pager' id='blog-pager'> ... </div>

Tambahkan kode tag kondisional di awal dan akhir kode tersebut, yaitu kode warna merah di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'>  <div class='blog-pager' id='blog-pager'> ... </div>
</b:if> </b:if>

6. Simpan Template!

Demikian Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger. Good Luck and Happy Blogging! (www.contohblog.com).*

Header Blog Responsive - Nama Blog plus Navigasi Menu

Header Blog Responsive - Nama Blog plus Navigasi Menu

Cara Membuat Header Blog Responsive - Nama Blog plus Navigasi Menu.

HEADER blog atau website ini lagi ngetrend. Simple, responsive, static header. Bisa disebut Header All in One karena navigasi menu sekaligus terpasang di samping header. Penampakannya di HP (mobile) seperti gambar ini.

CSS Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di atas kode ]]></b:skin>

.container {
position: relative;
margin: 0 auto;
width:100%;
max-width: 880px;
}
.content {position: relative;}
.content p {
margin-bottom: 10px;
}
#header {
z-index: 2;
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
color: white;
}
#header h1 {
/* position: absolute; */
top: 0px;
/* left: 0; */
margin: 0px;
text-transform: uppercase;
font-size: 1.2em;
}
#nav {
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
@media (max-width: 599px) {
#header .container {
width: 100%;
}
#header h1 {
padding-left: 3%;
}
#nav {
width: 100%;
top: 60px;
}
#nav:before {
content: '\2630';
display: block;
position: absolute;
right: 3%;
top: -50px;
line-height: 40px;
font-size: 1.4em;
cursor: pointer;
}
#nav ul {
background: #222;
width: 100%;
margin: 0px;
}
#nav ul li {
float: none;
}
#nav ul li a {
padding: 10px 3%;
line-height: 20px;
border-top: 1px solid #333;
}
#nav ul {
transition: 350ms;
-moz-transition: 350ms;
-webkit-transition: 350ms;
transform: perspective(600) rotate3d(0, 0, 0, 0);
-moz-transform: perspective(600) rotate3d(0, 0, 0, 0);
-webkit-transform: perspective(600) rotate3d(1, 0, 0, -90deg);
transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-webkit-transform-origin: 50% 0;
}
#nav.open ul {
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: perspective(600) rotate3d(0, 0, 0, 0);
}
}

HTML Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di bawah kode <body>

<header id='header'>
  <div class='container'>
    <h1>Header Demo</h1>
    <nav id='nav'>
      <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Services</a></li>
        <li><a href='#'>History</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

JS Header Blog Responsive - Nama Blog plus Navigasi Menu
Simpan di atas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
 $(function(){
   $('#nav').click(function() {
     $(this).toggleClass('open');
   });
 });
//]]>
</script>

Save! Simpan Template!
Demikian Header Blog Responsive - Nama Blog plus Navigasi Menu dan cara memasangnya. Good Luck and happy blogging! (www.contohblog.com).*

See the Pen Header plus Menu Blogger by CB Blogger (@cbblogger) on CodePen.

Cara Memasang Widget Featured Content Slider Blogger

Cara Memasang Widget Featured Content Slider Blogger

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="http://2.bp.blogspot.com/-ulJH_fzUjsA/U1cvTCYFnII/AAAAAAAAIgw/yP_p7Nwkk0s/s1600/slide-image-1.jpg"/></a></div>
   <!-- Slide 1 End -->
 
   <!-- Slide 2 Started -->
   <div>
      <img src="http://2.bp.blogspot.com/-aGtNHQQmZHw/U1czbdsZR8I/AAAAAAAAIhE/xA7mEHa7IQg/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="http://1.bp.blogspot.com/-9kaEeWmMii8/U1cvTJnsqzI/AAAAAAAAIgo/yRYms2nwYo0/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="http://1.bp.blogspot.com/-n_pKyFa46go/U1cvVJ9xwUI/AAAAAAAAIg4/QzLE_EjTK-k/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

Cara Memasang Featured Post Slider Simple untuk Blogger

Cara Memasang Featured Post Slider Simple untuk Blogger

Berikut ini cara memasang Featured Post Slider Simple untuk halaman depan Blog Blogger, sebagaimana penampakan gambar di atas.

Sebelumnya CB sudah share cara membuat featured image carousel.

Cara Memasang Featured Post Slider Simple untuk Blogger

1. Tema > Edit HTML
2. Copas kode CSS Featured Post Slider Simple untuk Blogger berikut ini di atas kode ]]></b:skin>

#feature{background:#EFEFEF;border:1px solid #fff;width:508px;height:204px;padding:10px;margin-top:15px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px}
.slider{margin:0;padding:0}
.sliderwrapper{background:#F9F9F9;position:relative;overflow:hidden;width:100%;height:178px}
.thumb{float:left;margin:0;padding:15px 10px 10px 10px}
.thumb img{width:200px!important;height:150px!important;border:2px solid #F9F9F9;outline:1px solid #ddd}
.contentdiv{overflow:hidden;height:210px!important}
.pagination{width:498px;text-align:right;padding:0 0 0 10px;font-size:12px;height:20px;margin-top:11px}
.pagination a{background:#000 url(http://2.bp.blogspot.com/-uVKt7qE-J2c/T1oBYhM7WoI/AAAAAAAACZ8/aQd1p3HMopU/s1600/nav_black.jpg) repeat-x;padding:2px 7px;text-decoration:none;color:#fff;border:1px solid #BEBEBE}
.pagination a:hover,.pagination a.selected{background:#F9F9F9;color:#222;text-decoration:none;border:1px solid #BEBEBE}
.desc{overflow:hidden;font-size:12px;padding:0 10px 10px 0;margin:0}
.desc p{margin:10px 0 0 0;padding:0}
.desc h3 a{color:#084B8A;font:20px "Ropa Sans",arial}

3. Copas kode HTML Featured Post Slider Simple untuk Blogger berikut ini  setelah kode <div id='main-wrapper'> atau yang mirip dengannya.

<div id='feature'>
<div class='sliderwrapper' id='slider1'>
<div class='contentdiv'>
<div class='thumb'>
<img src='http://2.bp.blogspot.com/-jA_JcKy7X-o/T1taR3jfzVI/AAAAAAAAAFg/3Upc_9D2dQw/s1600/samsung_galaxy_tab.jpg'/>
</div>
<div class='desc'>
<h3><a href='#'>Featured 1</a></h3>
<p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class='contentdiv'>
<div class='thumb'>
<img src='http://2.bp.blogspot.com/-3a9bwXWm7nU/T1tdO2HzVKI/AAAAAAAAAFo/XRePB-UV9ps/s1600/motorola.jpg'/>
</div>
<div class='desc'>
<h3><a href='#'>Featured 2</a></h3>
<p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class='contentdiv'>
<div class='thumb'>
<img src='http://1.bp.blogspot.com/-u5YhTN2spP4/T1tUoZ5O_-I/AAAAAAAAAFI/JChUr_3kwGA/s1600/galaxy_note.jpeg'/>
</div>
<div class='desc'>
<h3><a href='#'>Featured 3</a></h3>
<p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class='contentdiv'>
<div class='thumb'>
<img src='http://1.bp.blogspot.com/-QttXaKIMyyA/T1tT9zuH9UI/AAAAAAAAAFA/dXTLwpKhdxk/s1600/blackberry_dakota.jpg'/>
</div>
<div class='desc'>
<h3><a href='#'>Featured 4</a></h3>
<p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class='contentdiv'>
<div class='thumb'>
<img src='http://4.bp.blogspot.com/-9LpPyOY08ug/T1tSDOKExBI/AAAAAAAAAE4/J9n5XI4nGGI/s1600/apple-iphone.jpg'/>
</div>
<div class='desc'>
<h3><a href='#'>Featured 5</a></h3>
<p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
<div class='pagination' id='paginate-slider1'></div>
</div>

Silakan ubah judul posting, link, dan deskripsinya.

4. Copas kode JS berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.
//** July 11th, 08'- Script updated to v 2.4:
//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.
var featuredcontentslider={
//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?
settingcaches: {}, //object to cache "setting" object of each script instance
jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},
ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},
ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},
buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},
buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
pdivlinks[i].style.display="none" //hide this toc link
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
 this.autorotate(setting)
}
},
urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},
turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},
setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},
fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},
cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},
autorotate:function(setting){
 window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"="+value
},

init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}
}
//]]>
</script>
<script type='text/javascript'>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</b:if>

5. Simpan Template!

Demikian Cara Memasang Featured Post Slider Simple untuk Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber

Cara Membuat Featured Image Galeri Gambar Carousel di Halaman Depan Blog

Cara Membuat Featured Image Galeri Gambar Carousel di Halaman Depan Blog

Berikut ini Cara Membuat Featured Image berupa Galeri Gambar Carousel di Halaman Depan Blog.  Bisa juga ditampilkan di tiap halaman.

Yang CB maksud Featured Image Galeri Gambar Carousel seperti gambar berikut ini yang biasa ada di template magazine style. Ini juga kodenya diambil dari template gaya majalah.

Cara Membuatnya

1. Tema > Edit HTML
2. Copas kode berikut ini di atas </head>

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

<!-- Mediabar Started-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
/* Carousel */
#mediabar { width:100%; position: relative; float: left; margin:0;height:170px;border-top:1px solid #c5c5c5; overflow:hidden;}
#mediabar .container {position: absolute;left: 0px;width: 610px;overflow:hidden;margin-top: 7px;}
#mediabar h2 {background: #f8f8f8;padding: 5px;}
#mediabar ul{width:10000px;position: relative;overflow:hidden;margin-top:5px;}
#mediabar li p{float: left;width: 195px; }
#mediabar ul li { display: inline; float: left; margin: 0; padding: 0 5px 0 0; width: 210px; overflow: hidden;height:170px;}
#mediabar .thumb { margin-bottom: 4px; height:130px;width: 210px;}
#mediabar  #previous_button { position: absolute; top: 7px; right: 29px; width: 25px; height: 22px; cursor: pointer; background: url(http://1.bp.blogspot.com/-iC7eN7FL7bw/URNkCNZbr7I/AAAAAAAACd0/Ex83HY5D-d4/s1600/arrow_feat.png) no-repeat; background-position: 0 0; }
#mediabar #next_button { position: absolute; top: 7px; right: 0; width: 25px; height: 22px; cursor: pointer; background: url(http://1.bp.blogspot.com/-iC7eN7FL7bw/URNkCNZbr7I/AAAAAAAACd0/Ex83HY5D-d4/s1600/arrow_feat.png) no-repeat; background-position: -27px 0; }
#mediabar #next_button:hover, #previous_button:hover { -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=80)&quot;; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
</style>
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "http://1.bp.blogspot.com/-QwlK2Rb-nns/TvhNDtJ4RnI/AAAAAAAACak/TgSjOqStaNc/s1600/empty_thumb.gif";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts = 9;
numposts9 = 9;
label6 = "Galeri";
Title6 = "Galeri";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s =  s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts2a(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
        postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
     
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="195" height="120" class="Thumbnail thumbnail carousel " src="'+img[i]+'"/></a></div><p><a href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
}
 //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {                                          // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
    o = $.extend({
        btnPrev: null,
        btnNext: null,
        btnGo: null,
        mouseWheel: false,
        auto: null,
        speed: 200,
        easing: null,
        vertical: false,
        circular: true,
        visible: 3,
        start: 0,
        scroll: 1,
        beforeStart: null,
        afterEnd: null
    }, o || {});
    return this.each(function() {                           // Returns the element collection. Chainable.
        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
        var div = $(this), ul = $("ul:first", div), tLi = $(".car", ul), tl = tLi.size(), v = o.visible;
        if(o.circular) {
            ul.prepend(tLi.slice(tl-v-1+1).clone())
              .append(tLi.slice(0,v).clone());
            o.start += v;
        }
        var li = $(".car", ul), itemLength = li.size(), curr = o.start;
        div.css("visibility", "visible");
        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
        ul.css({ padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        //div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "29px"});
div.css({overflow: "hidden", "z-index": "2"});
        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)
        li.css({width: li.width()});
        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images
        if(o.btnPrev)
            $(o.btnPrev).click(function() {
                return go(curr-o.scroll);
            });
        if(o.btnNext)
            $(o.btnNext).click(function() {
                return go(curr+o.scroll);
            });
        if(o.btnGo)
            $.each(o.btnGo, function(i, val) {
                $(val).click(function() {
                    return go(o.circular ? o.visible+i : i);
                });
            });
        if(o.mouseWheel && div.mousewheel)
            div.mousewheel(function(e, d) {
                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
            });
        if(o.auto)
            setInterval(function() {
                go(curr+o.scroll);
            }, o.auto+o.speed);
        function vis() {
            return li.slice(curr).slice(0,v);
        };
        function go(to) {
            if(!running) {
                if(o.beforeStart)
                    o.beforeStart.call(this, vis());
                if(o.circular) {            // If circular we are in first or last, then goto the other end
                    if(to<=o.start-v-1) {           // If first, then goto last
                        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
                        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
                    } else if(to>=itemLength-v+1) { // If last, then goto first
                        ul.css(animCss, -( (v) * liSize ) + "px" );
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
                        curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
                    } else curr = to;
                } else {                    // If non-circular and to points to first or last, we just return.
                    if(to<0 || to>itemLength-v) return;
                    else curr = to;
                }                           // If neither overrides it, the curr will still be "to" and we can proceed.
                running = true;
                ul.animate(
                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
                    function() {
                        if(o.afterEnd)
                            o.afterEnd.call(this, vis());
                        running = false;
                    }
                );
                // Disable buttons when the carousel reaches the last/first, and enable when not
                if(!o.circular) {
                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
                    $( (curr-o.scroll<0 && o.btnPrev)
                        ||
                       (curr+o.scroll > itemLength-v && o.btnNext)
                        ||
                       []
                     ).addClass("disabled");
                }
            }
            return false;
        };
    });
};
function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};
})(jQuery);
//]]>
</script>
</b:if>
<!-- Mediabar End-->

Ubah nama judul dan label warna merah.

3. Copas kode HTML dan JS Featured Image Galeri Gambar Carousel berikut ini di bawah kode <div id='main-content'> atau <div class='main-wrapper'> atau kode yang semisalnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mediabar'>
<h2>Galeri</h2>
 <div id='previous_button'/>
<div id='next_button'/>
<div class='container'>
  <ul>
<script>   
          document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label6+&quot;?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2a\&quot;&gt;&lt;\/script&gt;&quot;);
        </script>
</ul><div class='clear'/>
</div>
<div class='clear'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#mediabar .container&quot;).jCarouselLite({
auto:0,
scroll: 1,
speed: 400, visible: 3,
start: 0,
circular: false,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery) </script>
<!-- /.mediabar -->
<div class='clear'/>
  </b:if>

Ubah nama judul dan label warna merah.

4. Save! Simpan template. Beres.

Featured Post Carousel ala CB Magazine

Jika ingin menampilkan featured post carousel ala CB Magazine yang ada di bagian paling atas atau di bawah menu, berikut ini kodenya:

CSS & JS
Simpan di atas </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#main-home {float: left;margin-bottom: 20px;width: 640px;}
.home-widget {float: left;margin: 0 0 10px 0;width: 100%;}
.es-carousel-wrapper{position:relative;clear:both;width:100%}
.es-carousel{margin:0;overflow:hidden}
.es-carousel ul{display:none;padding:0;margin:0}
.es-carousel ul li{height:100%;float:left;display:block;position:relative}
.es-carousel ul li a{display:block}
.es-carousel ul li a img{display:block;border:0;max-height:100%;max-width:100%;padding:0;margin:0}
.es-nav span{position:absolute;text-indent:-9000px;cursor:pointer;top:0;right:0}
.es-nav span.es-nav-next{right:0;width:23px;height:20px;background:transparent url(http://1.bp.blogspot.com/-CuPN472QJJ8/UXwxAi5EAZI/AAAAAAAAC34/yoDJ9amuiZo/s1600/nextbn.gif) 0 0}
.es-nav span.es-nav-prev{right:25px;width:23px;height:20px;background:transparent url(http://1.bp.blogspot.com/-h5GRbC4AAdc/UXwv3y5jN9I/AAAAAAAAC3o/jEFsn78KVuA/s1600/prevbn.gif) 0 0}
.carousel{float:left;margin:0;overflow:hidden;width:100%;height:134px}
.carousel ul{display:inline;float:left;width:100%}
.carousel ul li{display:inline;float:left;width:24%;margin-right:2%}
.carousel ul li:last-child{margin-right:0}
.carousel-image{float:left;position:relative;width:100%;height:134px}
.carousel-image img{-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;width:100%;height:134px}
.carousel-image img:hover{opacity:.85}
.carousel-text{background:url(http://4.bp.blogspot.com/-PpOJ-vHwxvc/T5mGXWpHVCI/AAAAAAAAAqQ/Y1VmLDvoeHI/s1600/uj-opacity-40.png);float:left;padding:2%;position:absolute;bottom:0;width:96%}
.carousel-text a{color:#fff;font:700 12px/16px 'Open Sans Condensed',sans-serif;text-transform:none}
.carousel-text a:visited{color:#fff}
</style>
<script type='text/javascript'>
//<![CDATA[
(function(window,$,undefined){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener('touchmove',onTouchMove);startX=null;isMoving=false;}
function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault();}
if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX- x;var dy=startY- y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft();}
else{config.wipeRight();}}
else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown();}
else{config.wipeUp();}}}}
function onTouchStart(e)
{if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false);}}
if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false);}});return this;};$.elastislide=function(options,element){this.$el=$(element);this._init(options);};$.elastislide.defaults={speed:450,easing:'',imageW:190,margin:0,border:0,minItems:1,current:0,onClick:function(){return false;}};$.elastislide.prototype={_init:function(options){this.options=$.extend(true,{},$.elastislide.defaults,options);this.$slider=this.$el.find('ul');this.$items=this.$slider.children('li');this.itemsCount=this.$items.length;this.$esCarousel=this.$slider.parent();this._validateOptions();this._configure();this._addControls();this._initEvents();this.$slider.show();this._slideToCurrent(false);},_validateOptions:function(){if(this.options.speed<0)
this.options.speed=450;if(this.options.margin<0)
this.options.margin=4;if(this.options.border<0)
this.options.border=1;if(this.options.minItems<1||this.options.minItems>this.itemsCount)
this.options.minItems=1;if(this.options.current>this.itemsCount- 1)
this.options.current=0;},_configure:function(){this.current=this.options.current;this.visibleWidth=this.$esCarousel.width();if(this.visibleWidth<this.options.minItems*(this.options.imageW+ 2*this.options.border)+(this.options.minItems- 1)*this.options.margin){this._setDim((this.visibleWidth-(this.options.minItems- 1)*this.options.margin)/ this.options.minItems );
this._setCurrentValues();this.fitCount=this.options.minItems;}
else{this._setDim();this._setCurrentValues();}
this.$slider.css({width:this.sliderW});},_setDim:function(elW){this.$items.css({marginRight:this.options.margin,width:(elW)?elW:this.options.imageW+ 2*this.options.border}).children('a').css({borderWidth:this.options.border});},_setCurrentValues:function(){this.itemW=this.$items.outerWidth(true);this.sliderW=this.itemW*this.itemsCount;this.visibleWidth=this.$esCarousel.width();this.fitCount=Math.floor(this.visibleWidth/this.itemW);},_addControls:function(){this.$navNext=$('<span class="es-nav-next">Next</span>');this.$navPrev=$('<span class="es-nav-prev">Previous</span>');$('<div class="es-nav"/>').append(this.$navPrev).append(this.$navNext).appendTo(this.$el);},_toggleControls:function(dir,status){if(dir&&status){if(status===1)
(dir==='right')?this.$navNext.show():this.$navPrev.show();else
(dir==='right')?this.$navNext.hide():this.$navPrev.show();}
else if(this.current===this.itemsCount- 1||this.fitCount>=this.itemsCount)
this.$navNext.show();},_initEvents:function(){var instance=this;$(window).bind('resize.elastislide',function(event){instance._setCurrentValues();if(instance.visibleWidth<instance.options.minItems*(instance.options.imageW+ 2*instance.options.border)+(instance.options.minItems- 1)*instance.options.margin){instance._setDim((instance.visibleWidth-(instance.options.minItems- 1)*instance.options.margin)/ instance.options.minItems );
instance._setCurrentValues();instance.fitCount=instance.options.minItems;}
else{instance._setDim();instance._setCurrentValues();}
instance.$slider.css({width:instance.sliderW+ 10});clearTimeout(instance.resetTimeout);instance.resetTimeout=setTimeout(function(){instance._slideToCurrent();},200);});this.$navNext.bind('click.elastislide',function(event){instance._slide('right');});this.$navPrev.bind('click.elastislide',function(event){instance._slide('left');});this.$items.bind('click.elastislide',function(event){instance.options.onClick($(this));});instance.$slider.touchwipe({wipeLeft:function(){instance._slide('right');},wipeRight:function(){instance._slide('left');}});},_slide:function(dir,val,anim,callback){if(this.$slider.is(':animated'))
return false;var ml=parseFloat(this.$slider.css('margin-left'));if(val===undefined){var amount=this.fitCount*this.itemW,val;if(amount<0)return false;if(dir==='right'&&this.sliderW-(Math.abs(ml)+ amount)<this.visibleWidth){amount=this.sliderW-(Math.abs(ml)+ this.visibleWidth)- this.options.margin;this._toggleControls('right',-1);this._toggleControls('left',1);}
else if(dir==='left'&&Math.abs(ml)- amount<0){amount=Math.abs(ml);this._toggleControls('left',-1);this._toggleControls('right',1);}
else{var fml;(dir==='right')?fml=Math.abs(ml)+ this.options.margin+ Math.abs(amount):fml=Math.abs(ml)- this.options.margin- Math.abs(amount);if(fml>0)
this._toggleControls('left',1);else
this._toggleControls('left',-1);if(fml<this.sliderW- this.visibleWidth)
this._toggleControls('right',1);else
this._toggleControls('right',-1);}
(dir==='right')?val='-='+ amount:val='+='+ amount}
else{var fml=Math.abs(val);if(Math.max(this.sliderW,this.visibleWidth)- fml<this.visibleWidth){val=-(Math.max(this.sliderW,this.visibleWidth)- this.visibleWidth);if(val!==0)
val+=this.options.margin;this._toggleControls('right',-1);fml=Math.abs(val);}
if(fml>0)
this._toggleControls('left',1);else
this._toggleControls('left',-1);if(Math.max(this.sliderW,this.visibleWidth)- this.visibleWidth>fml+ this.options.margin)
this._toggleControls('right',1);else
this._toggleControls('right',-1);}
$.fn.applyStyle=(anim===undefined)?$.fn.animate:$.fn.css;var sliderCSS={marginLeft:val};var instance=this;this.$slider.applyStyle(sliderCSS,$.extend(true,[],{duration:this.options.speed,easing:this.options.easing,complete:function(){if(callback)callback.call();}}));},_slideToCurrent:function(anim){var amount=this.current*this.itemW;this._slide('',-amount,anim);},add:function($newelems,callback){this.$items=this.$items.add($newelems);this.itemsCount=this.$items.length;this._setDim();this._setCurrentValues();this.$slider.css({width:this.sliderW});this._slideToCurrent();if(callback)callback.call($newelems);},destroy:function(callback){this._destroy(callback);},_destroy:function(callback){this.$el.unbind('.elastislide').removeData('elastislide');$(window).unbind('.elastislide');if(callback)callback.call();}};var logError=function(message){if(this.console){console.error(message);}};$.fn.elastislide=function(options){if(typeof options==='string'){var args=Array.prototype.slice.call(arguments,1);this.each(function(){var instance=$.data(this,'elastislide');if(!instance){logError("cannot call methods on elastislide prior to initialization; "+"attempted to call method '"+ options+"'");return;}
if(!$.isFunction(instance[options])||options.charAt(0)==="_"){logError("no such method '"+ options+"' for elastislide instance");return;}
instance[options].apply(instance,args);});}
else{this.each(function(){var instance=$.data(this,'elastislide');if(!instance){$.data(this,'elastislide',new $.elastislide(options,this));}});}
return this;};})(window,jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.UjScrollPause=function(o){o=$.extend({bPrev:null,bNext:null,bGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,pauseOnHover:false,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul",div),tLi=$("li",ul),tl=tLi.size(),v=o.visible,paused=0;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}o.pauseOnHover?ul.hover(function(){paused=1},function(){paused=0}):"";var li=$("li",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden","float":o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width(),height:li.height()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.bPrev){$(o.bPrev).click(function(){return go(curr-o.scroll)})}if(o.bNext){$(o.bNext).click(function(){return go(curr+o.scroll)})}if(o.bGo){$.each(o.bGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})})}if(o.mouseWheel&&div.mousewheel){div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)})}if(o.auto){setInterval(function(){go(curr+o.scroll)},o.auto+o.speed)}function vis(){return li.slice(curr).slice(0,v)}function go(to){if(!running&&!paused){if(o.beforeStart){o.beforeStart.call(this,vis())}if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else{if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else{curr=to}}}else{if(to<0||to>itemLength-v){return}else{curr=to}}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd){o.afterEnd.call(this,vis())}running=false});if(!o.circular){$(o.bPrev+","+o.bNext).removeClass("disabled");$((curr-o.scroll<0&&o.bPrev)||(curr+o.scroll>itemLength-v&&o.bNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0}function width(el){return el[0].offsetWidth+css(el,"marginLeft")+css(el,"marginRight")}function height(el){return el[0].offsetHeight+css(el,"marginTop")+css(el,"marginBottom")}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-RFdFqW5Klsc/UitLuFMcVxI/AAAAAAAADpM/y5UnpsxUSrc/s1600/noimgs.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 65;
summaryTitle = 30;
summaryPost2 = 150;
summaryPosta = 220;
numposts = 9;

numposts10 = 15;
label2 = "Pemain";
Title2 = "Pemain";

function removeHtmlTag(strx,chop){
 var s = strx.split("<");
 for(var i=0;i<s.length;i++){
  if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
  }
 }
 s =  s.join("");
 s = s.substring(0,chop-1);
 return s;
}

function showrecentposts4a(z){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
document.write("<ul>");
for(var o=0;
o<numposts10;
o++){var w=z.feed.entry[o];
var g=w.title.$t;
var f;
var p;
if(o==z.feed.entry.length){break
}for(var l=0;
l<w.link.length;
l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;
break
}}for(var l=0;
l<w.link.length;
l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];
break
}}if("content" in w){var r=w.content.$t
}else{if("summary" in w){var r=w.summary.$t
}else{var r=""
}}postdate=w.published.$t;
if(j>imgr.length-1){j=0
}img[o]=imgr[j];
s=r;
a=s.indexOf("<img");
b=s.indexOf('src="',a);
c=s.indexOf('"',b+5);
d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d
}var q=[1,2,3,4,5,6,7,8,9,10,11,12];
var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var u=postdate.split("-")[2].substring(0,2);
var h=postdate.split("-")[1];
var t=postdate.split("-")[0];
for(var e=0;
e<q.length;
e++){if(parseInt(h)==q[e]){h=x[e];
break
}}var n=u+" "+h+" "+t;
var v='<li><div class="carousel-image"><a href="'+p+'"><img width="191" height="100" class="" src="'+img[o]+'"/></a><div class="carousel-text"><a href="'+p+'">'+g+"</a></div></div></li>";
document.write(v);
}};
 //]]>
</script>
</b:if>

HTML
Simpan di bawah akhir kode menu template Anda.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='main-home'>
<div class='clear'/>
<div class='home-widget'>
<h3 class='widget-title fix'><span><script>
document.write(&#39;&lt;a href=&quot;/search/label/&#39;+label2+&#39;?max-results=10&quot;&gt;&#39;+Title2+&#39;&lt;/a&gt;&#39;);   </script></span></h3>
<div class='carousel small-cat-story es-carousel-wrapper'>
<div class='es-carousel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label2+&quot;?max-results=&quot;+numposts10+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4a\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div><!--es-carousel-->
</div><!--carousel-->
</div><!--home-widget-->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
$('.carousel').elastislide({
imageW : 155,
minItems : 2,
margin : 10
});
});
//]]>
</script>
</div><!--mainhome-->
</b:if>

Demikian Cara Membuat Featured Image Galeri Gambar Carousel di Halaman Depan Blog. Good Luck & Happy Blogging! (www.contohblog.com).*