Cara Membuat Slide Show berdasarkan Label

Cara Membuat Slide Show berdasarkan Label - Cara Membuat Slideshow otomatis - Slideshow memang akan menjadi widget yang bisa memperindah layout template Anda. Pada posting sebelumnya, saya pernah membahas tengan cara membuat slideshow. Namun, slideshow yang dibuat menggunakan cara manual. Yaitu, kita memasukkan gambar dan deskripsi satu persatu.

Kali ini, kita akan membuat slideshow content yang dibuat berdasarkan kategori/label secara otomatis seperti yang saya pakek. Jadi nanti, Anda tinggal mengubah kategori untuk mengubah tampilan slide-nya. Untuk melihat DEMOnya.

Langkah-langkahnya ssebagai berikut:
Login ke blogger.
Klik Design/Tata Letak --> Edit HTML --> centang "Expand Widget Templates"
Backup dulu template anda dengan mengklik "Download Template Lengkap". Untuk berjaga-jaga bila terjadi error. Cari kode : ]]></b:skin>;
    Letakkan kode yang berwarna merah berikut di atas kode ]]></b:skin>;

     #featured{margin-bottom:8px}
    .sliderwrapper{position: relative;overflow: hidden;height: 240px}
    .sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
    .pagination{text-align: left;padding:8px 0px}
    .pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
    .pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
    .featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
    .featuredPost a{color:#fff}
    .featuredPost a:hover{color:#dedde5}
    .featuredPost h2{margin:0;font-size:12px;line-height:1}
    .featuredPost span{font-size:10px}
    .featuredPost p{font-size:11px}

    Masih dalam dalam posisi Edit HTML. Cari kode </head>
    Sekarang letakkan kode berwarna biru berikut ini di atas kode </head>

    <script>
    //<![CDATA[
    /* Script from:http://simplexdesign.blogspot.com/ */
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0bv_luhxXz5bM3HXHaunssd7rgFFMRdPe-eiVA6oDx8X8umm24Gt1wq71XRgES8xQKO5p7C2ZjeThNWp_fBMjEuEEHD3jIpvDdYGLj2-RThEIzKPN9BYdO-LLaX0Y5cMnOxP3LEj5nRY/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 100;

    numposts1 = 5;
    label1 = "Blog";

    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 showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();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=["January","February","March","April","May","Juny","July","August","September","October","November","December"];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">
<div class="sliderPostPhoto">
<a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo">
</div>
</div>
<div class="featuredPost">
<h2>
<a href="'+posturl+'">'+posttitle+'</a></h2>
<span>'+daystr+'</span><p>
'+removeHtmlTag(postcontent,summaryPost)+'...</p>
</div>
</div>
';
    document.write(trtd);
    j++;
    }}
    //]]>
    </script>

Perhatikan kode yang di beri huruf tebal label1 = "Blog". Itu adalah label atau kategori yang akan ditampilkan di slider, di sini dipilih label berita. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template Anda.

    Kemudian, cari kode </body>
    Letakkan kode berwarna ornge di bawah ini sebelum kode </body>

    <script src="http://dl.dropbox.com/u/12924430/contentslider.js">
    <script>
    //<![CDATA[
    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>

    Kemudian, cari kode <br />
<div id="main-wrapper">
, jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya :

    <b:if cond="data:blog.pageType == "index"">
    </b:if><br />
<div id="featured">
<div class="sliderwrapper" id="slider1">
<script>
    document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
    </script>
    </div>
<div class="pagination" id="paginate-slider1">
</div>
</div>

Save/simpan template.