Cara Membuat Recent Posts Slider Image Otomatis

Saya pernah share beberapa cara membuat slider konten, namun kesemuanya itu hanya dapat berjalan secara manual. Artinya sipengguna harus memasang beberapa foto atau link dengan script tertentu untuk membuatnya berjalan.

Saya kira hal tersebut tidak efektif dan cukup melelahkan kalau kita harus bolak balik mengedit script yang telah dipasang. Sekarang kita akan sedikit lega, karena slider konten dapat kita pasang secara otomatis, baik itu kita arahkan untuk posting atau label tertentu pada situs kita. Baiklah...sekarang mari kita bahas cara membuat slider konten otomatis. Ikuti langkah berikut:

1. Log in ke blogger
2. Klik Ranangan Klik Edit HTML.
3. Masukkan kode berikut di atas kode ]]></b:skin>

/*Carousel*/
#carousel{border-radius:5px;width:960px;height:330px;border-bottom:1px solid #222;position:relative;display:block;background-image:url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Menu-Navigation-Effect/pattern_40.gif)}
#carousel .container{position:absolute;left:23px;width:99%;height:330px;overflow:hidden}
#carousel #previous_button{position:absolute;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2BH8A8TSac_PiQEVw8Sa-KRBT_igRo5iFW1Ho6kLWClid1lcm5YlfJ-hyodmwFjzFgv3GHnMd7pg2W8djNgLN8Dfaaap37IYVO0a0YRz1BHRhnfYt1aOR_qbUg2UcnBPuDspVxHd2PU/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:330px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiutly9025w4cNlsWHxwpgy0B-Ox70S-XZeWHuX_qEXpVA3DZbZeb4BNs_-24JaeRsTV5zHI5Lze0EUdVNYJCkthawZg2g0KIPvw8SNCWDG9kxqq8-rS-_GpfrQMVa8C7bhb82rlxryEMQ/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{cursor:move;filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRn6te6lRYedFVcofkCAmxj9nQBPAyjpiEbxjJNCW3zLxNsAF6RKH3WwjjHIb-wH_M-5Olj9VgZtuYdmsdMzgd8BiU4bbn5Mk18r5rcFJgLbq_sc3uLkKb3xlQhk-oNpgsElbzBDSKGjQ/s1600/sliderbg.png) repeat-x top;display:inline;float:left;text-align:center;font-family:arial;font-weight:700;font-size:.9em;line-height:1.2em;width:200px;height:300px;margin:0 1px 20px 12px;padding:6px}
#carousel ul li a.slider_title{text-shadow: 0px 0px 1px #000;color:#555;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#2FC9FF}

4. Selanjutnya masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/carouselakaUTta.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBoS1A-pzbATlK6Qwo3zr0w2SaCRABZyqFMhf5bJ2qoPNC22dh4jbmbHCvBksl-X8W8WkJ_jV3IFE0nn9leMaQY4R6gZqyirD455zMB1jhax2wNG3e2eV2yg8ZSRbun_lcwHwDO2L0_fu/s1600/no-video.gif";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;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 showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;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;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="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>

Keterangan:

- Bila kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> sudah terdapat pada template anda, maka kode ini tidak usah dipasang. Karna bila ada dua kode tersebut, slider konten tidak akan berjalan.
- Silahkan edit kode berikut dari kod di atas untuk menyetel opsi tampilan slider.
SummaryPost = 200; panjang pengantar artikel yang ditampilkan pada slider konten
SummaryTitle = 20; panjang dari judul yang ditampilkan pada slider konten
Numposts1 = 12; jumlah posting yang terlihat dari slider konten.
- Bila ingin merubah ukuran image, silahkan edit
img width="200" untuk ukuran tinggi widget
height="250" untuk ukuran tinggi widget

5. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>document.write(&quot; &lt;script src=\&quot;http://ta-movie87.blogspot.com/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,   
visible: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)   
</script>
</b:if>

- Silahkan ganti teks yang berwarna MERAH diatas,dengan URL Blog sobat.
- Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.


6. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Image itu akan muncul di blog Anda.

Demikian tutorial Cara Membuat Recent Posts Slider Image Otomatis. Selamat mencoba dan semoga bermanfaat bagi semua. Amin...

(ut2a-4down/Berbagai-Sumber-Lain/ABNS)