Cara Membuat Content Slider Image Otomatis di Blog

Content slider image otomatis salah satu dari sekian banyak content slider image otomatis yang ada di internet. Content slider ini cukup mudah untuk diterapkan. 


Berikut cara pembuatannya:

1. Login ke Blogger
2. Pilih blog yang ingin kita tambah content slider image otomatis
3. Masuk ke "template" >> edit "html" >> centang "Expand Widget Templates"
4. Jika perlu di "backup" dulu, untuk jaga-jaga apabila ada kesalahan edit html.
5. Selanjutnya cari kode: ]]></b:skin>, letakkan kode berikut ini diatas kode tersebut.
#featuredContent{float:left;width:360px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:360px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:360px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7voA5N8SxXHG2Wk41nfAipmkECXJwTslySkaldFrP3B6Qr6bKUslcA9OI0Tv3ButEGaLexJA85993uKCYWNohyLPbSHNDkiP8jJiatu3aBZqR8FvKe77NGzXqhdIPTXf7FwKb6ncWGHxY/s1600/transparant.png);padding:5px 5px 0 5px}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding-right:5px}
#featured-slider .featuredTitle a{color:#ff9900;font:bold 14px Tahoma;text-transform:none;}
#featured-slider .featuredTitle a:hover{color:#fff}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#ebe8e1;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:368px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:84px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#ebe8e1}
#paginate-featured-slider a img{border-top:4px solid #ebe8e1}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #554931}


6. Kemudian masih di dalam edit html, cari kode: </head>, letakkan kode berikut diatas nya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/contentslider.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHIqmaIonpT_D7sK5whJA-QpdCSzKaf8eGuGHWWohnxriGi9vJsbPQoIl0fuvn8YdLABMGva2jTrMj8GnG6hMoAABIokF6c2H2A8ZXD5ADTC0DjDnlwLboUl79pe3LrCMZLQCqQpmVec/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;

    //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 = '<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++;
}

}

function showrecentposts4(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;

    //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><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>
';
    document.write(trtd);

    j++;
}

}

//]]>
</script>


7. Setelah langkah diatas, save template terlebih dulu, kemudian buka Tata Letak / Layout, add gadgethtml, masukkan kode berikut 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'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'>
</div>
</div>
<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: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[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>

8. Selesai.

Catatan:
Jika didalam template sudah ada script "min.js", cukup dipasang satu kode saja.
Jika ingin merubah isi slider berdasarkan "label/kategori", cari kode: script src=\"/feeds/posts/default?max-results (ada dua), ganti dengan kode: script src=\"/feeds/posts/default/-/LABEL?max-results
Share on Google Plus

About Unknown

0 komentar:

Post a Comment