Membuat Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentang membuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

image slider otomatis


Di blog demo ada slider image Carousel otomatis, jika Anda tertarik silahkan baca tutorialnya pada Membuat Slider Carousel Otomatis Berdasarkan Label.

Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :
  1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
  2. Pilih blog yang ingin anda tambahkan slider image ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Langkah berikutnya, letakkan kode berikut ini 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/AVvXsEhWDBCdZm0fJ2XfIAwDo42LnBYrtpSWOtUNpz2LwCXNt8G8ElzZMYdlTs8Absj3008M3kOzhjZ0AFsTik4oZUSUo5u6KHAPgRk5qwSdD34weciVREGvYFEVkUORtEnSG58D0lYU9OzGEJpP/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}
    Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
  6. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-Wcf8ZCrg80d6UvnV7shYnw96QY0xG2p-Ax24j1cRLDMG7N5AHoMCTGsikPhxEXwaq-6k4TC_VUhJfsM4UDaqegfG-tbfGUJ0dWlSZGCQQF_d-Vh_MUB72RdflwWwTto68n2KEk6hWA/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 script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Warna biru : Jumlah post yang ditampilkan dalam slider
    Warna hijau : Panjang dan lebar image besar
    Warna merah tua : Panjang dan lebar image kecil
  7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :

    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?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/-/sport?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>
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
    Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
    script src=\"/feeds/posts/default/-/sport?max-results
    dengan kode berikut :
    script src=\"/feeds/posts/default?max-results
  8. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></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;}
  9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. 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>
    slider otomatis
Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat

Comments

Post a Comment

Popular posts from this blog

Membuat Teks Berkedip (Blink Text) di Blog

S atu lagi tutorial blog yang gampang sekali untuk  teman-teman praktikkan di blog masing-masing. Yaitu membuat tulisan berkedip atau blink text. Ini bukan sulap atau trik yang luar biasa, tapi saya sangat tertarik dengan blog yang ada tulisan berkedip-kedip di dalamnya. Setelah mempelajari triknya, saya pun posting artikel cara membuat teks berkedip atau bahasa inggris bilang blink text . Sebenarnya ada gunanya juga membuat blink text ini. Yang pasti, pengunjung blog akan terbawa dan terpancing untuk mengklik teks tersebut. Atau paling tidak semakin terfokus ke arah tulisan yang berkedip itu. Di bawah ini adalah contoh dari blink text : "Jangan diklik, karena ini sangat berbahaya bagi kesehatan anda" Jika temen-temen tertarik ingin membuatnya, atau mungkin ada yang sudah tahu malah. Baiklah bagi teman-teman yang belum tahu dapat mengikuti cara ini. Saya bilang ini sangat gampang tidak perlu edit HTML <blink> Tulis kalimat temen-temen di sini </blink> Nan...
Read more

Solusi Seo Agar Blog Selalu Update

Image
Tips Seo Untuk Blogger. Solusi Seo Agar Blog Selalu Update - Pada saat kita mengalami stuck atau hilang ide menulis kita masih punya beberapa pilihan untuk tetap mengupdate blog. Bagi yang blognya cuman satu sih kaga apa tapi kalau blognya lebih dari satu itu yang membuat terkadang kita kehabisan ide menulis. Contohnya saya yang memiliki lebih dari satu blog jadi harus pintar-pintarlah dalam mencari ide menulis. Kalau saya pribadi biasanya sering baca buku atau melihat-lihat tayangan televisi atau membaca berita di media sosial kesemuannya tersebut bisa kita bikin ide untuk menulis. Nah lalu Bagaimana Cara Agar Blog Selalu Update ? atau Bagaimana Mengatasi Kekurangan Ide Menulis Pada Blogger ?. Berikut ini adalah beberapa alternatif yang bisa kita gunakan untuk mengatasi kejenuhan dalam ngeblog karena kekurangan ide menulis atau faktor kesibukan.Sebelumnya kalian semua bisa membuka artikel-artikel saya terdahulu sebagai sarana perbandingan: Apa Manfaat Blog Dummy Bagi S...
Read more

Membuat Tampilan Author Berbeda Pada Kotak Komentar

Image
S etelah kita membuat reply pada kotak komentar , langkah selanjutnya adalah membedakan komentar pemilik blog dengan komentar pengunjung. Untuk membedakan komentar pemilik blog dengan komentar pengunjung bisa dengan latar belakang warna, latar belakang gambar, garis pembatas komentar, membedakan jenis huruf atau kotak komentar yang dibuat agak menjorok ke dalam. Istilah yang sering dipakai oleh orang Inggris sana adalah Highlight author comments , artinya menyorot komentar pemilik blog, kalau orang Indonesia bilang membedakan tampilan komentar pemilik blog , kira-kira begitulah. Manfaatnya tentu saja ada, membedakan komentar pemilik blog dan pengunjung pasti membantu pembaca mengetahui bahwa anda telah memberi tanggapan atas komentar yang masuk dari pengunjung blog anda. Secara default pada template blogger kita tidak dapat melihat perbedaan antara komentar pengunjung serta tanggapan dari yang punya blog. Semuanya disama ratakan oleh blogger. Agar lebih jelas apa itu Highlig...
Read more