Cara Memasang Fitur Content Slider Image Otomatis Di blog

Cara Memasang Fitur Content Siler Image Otomatis Di blog - Sambil menunggu waktu sholat jumat tiba, Master Chef akan berbagi resep dulu mengenai Content Slider Otomatis. Content Slider atau banyak disebut orang "slide show postingan" merupakan fitur yang bisa kita tambahkan kehalaman blog. banyak para master tutorial blog yang membahas mengenai hal ini sehingga begitu mudah ditemukan dan dipelajari. Cotent slider yang akan kita pasang kurang lebih seperti berikut :

DEMO

Pastinya anda sudah sering menemui blog-blog yang mengunakan fitur seperti tersebut. buat sobat blogger Dapur Tutorial Blogspot yang merasa tertarik untuk memasang fitur tersebut, master chef sudah sediakan resepnya dibawah ini.

Ok Langsung saja, berikut langkah-langkah untuk memasang fitur conten slider atau slide show diblog.

1. Login terlebih dahulu kehalaman blog
2. Silahkan Masuk ke halaman Edit HTML ( yang bingung bagaimana Masuk ke halaman Edit HTML, Baca Tutorial Cara Mengakses Atau Masuk ke Edit HTML Pada Tampilan Baru Blogspot)
3. Centang  expand widget templates
4. jangan Lupa Backup dulu template anda untuk antisipasi terjadiya kesalahan dalam Editing HTML (Baca Cara Upload dan Back-Up Template pada Tampilan Baru Blogspot)
5. Setalah anda berada pada halaman Edit HTML Cari Kode  ]]></b:skin> 
6. Sudah ketemu Copas kode berikut dan letakanan diatas kode  ]]></b:skin> 

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyBQFyge0W8E2xNJD86scaOMQXmEub0Bd1PmKsDSVNtwblqDt5E8b1MR1UdX3vIznwvXRAleqP5tWIW9b1MmylXaPFX3ezDl96EvGxFjTRZO1m2NxdJiEIlRBJ_lqz53xuTHXiVLW62U1_/s1600/transparant.png)}
#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}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

Keterangan : Kode yang berwarna biru dan merah adalah kode untuk ukuran slider silahkan disesuaikan.


7. Selanjudnya cari kode </head>
8. Sudah ketemu copas kode berikut dan letakan diatasnya kode </head>

<script src='http://dapurtutorial.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://dapurtutorial.googlecode.com/files/Content-slider.js' type='text/javascript'/>

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

Keterangan : Kode Berwarna hijau adalah jumpal yang ditampilkan dalam slide sedangkan kode berwarna merah dan pink adalah panjang dan tinggi image slider kecil.


9. Langkah berikutnya adalah Menambah elemen halaman diatas eleman halaman Posting. Cari kode berikut ini ]]></b:skin> Sudah ketemu Copas kode berikut dan letakan diatas kode ]]></b:skin>

/* Slide Content
----------------------------------------------- */
.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;}  

10. Selanjutnya cari kode <div id='main-wrapper'> dan tambahkan 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>  

11. Klik Save dan lihat pada bagian Tata Letak Atau Layout diatas element postingan sudah terdapat Elemant Halaman yang tadi anda tambahkan.

12. Untuk menampilkan Fitur Slider Tambahkan kode berikut kedalam Kolom HTML/JavaScrip dibagian Eleman Halaman Yang tadi anda tambahkan.

<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>

13. Klik Simpan Dan lihat Hasilnya

Nah...itu dia tutorial blog Cara Memasang Fitur Content Slider Image Otomatis Di blog yang lumayan membuat bingung dan berputar-putar. semoga tutorial bisa dipahami. selamat mencoba.