Slider Image Otomatis Posting Terbaru Versi 2

Setelah beberapa waktu lalu membuat postingan cara membuat slider image otomatis posting terbaru dengan thumbnail mini dibawahnya, kali ini saya coba membuat slider image otomatis posting terbaru versi 2 dengan pagination di bawahnya, seperti gambar demo di bawah ini.

Slider image otomatis selain menarik juga sangat bermanfaat karena memudahkan pengunjung untuk melihat content terbaru pada blog/website.

Berminat? Silahkan anda coba!

Langsung saja pada langkah-langkah Cara Membuat Content Slider Image otomatis ini : 

1. Langkah pertama, login ke akun blogger anda. 
2. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates 
3. Demi keamanan dan kenyamanan anda backup dulu template anda. 
4. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin>

#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:rgba(0, 0, 0, 0.62);}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
.featuredTitle a:hover {color: rgb(220, 222, 224);}
#paginate-featured-slider{text-align: left;padding:8px 0px;font-size: 11px;}
#paginate-featured-slider a{background-color: #2C2C2C;border: 1px solid #292929;border-radius: 4px;-webkit-border-radius: 4px;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);color:#fff;text-decoration:none;padding:2px 5px}
#paginate-featured-slider a:hover,#paginate-featured-slider a.selected{background-color: #D53C13;background-image: -webkit-linear-gradient(#F6653E, #F6653E 25%, #D53C13);background-repeat: no-repeat;border: 1px solid #D53C13;text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);cursor: pointer;color:#fff;padding:2px 5px;border-radius: 4px}#949493;background:#F60;color:#fff;padding:2px 5px}
.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}

5.Cari Kode </head> lalu letakan javascript di bawah ini tepat diatasnya!

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> 
<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryTitle = 25;
numposts3 = 5;
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 showrecentposts3(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts3;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='<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';document.write(trtd);j++}}
//]]>

</script>

7. Kemudian cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
</div>
</b:if>

8. Setelah langkah diatas, save templates. Kemudian klick layout >> add gadget yang berada di atas (yang baru saja dibuat) posting blog masukkan kode ini pada kotak HTML/Javascript

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");</script></div>
<div id='paginate-featured-slider'>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //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></div></div>
7. Simpan

<div class="catatan">sesuaikan semuanya sesuai dengan template anda, termasuk lebar, tinggi, dll. Pasang satu Jquery saja jangan lebih dari satu.</div>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel