Rabu, 12 Juni 2013

Cara Membuat Slide Show Otomatis Pada Blog

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.
dan ini Step By Step Nya :D

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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 == &quot;index&quot;">
    </b:if><br />
<div id="featured">
<div class="sliderwrapper" id="slider1">
<script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    </div>
<div class="pagination" id="paginate-slider1">
</div>
</div>

0 komentar: