Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API

August 17, 2018 - #blog_tutorial

Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API

Sebelum melanjutkan ke sesi pembahasan, perlu pengetahuan secara terlebih dahulu mengenai Blogger JSON Feed API agar pengguna dapat retrieve informasi post atau informasi yang tersedia lainnya.

(Mungkin) link berikut bisa membantu
Menggunakan Blogger JSON Feed API

Dan juga diperlukan pengetahuan dasar soal Owl-Carousel2 ini, bisa dibuka disitusnya
owlcarousel2.github.io/OwlCarousel2

Sangat penting untuk dipahami bahwa pengetahuan pembaca atau pengembang blogger saat ini tentang dua hal di atas, yang akan menjelaskan bagaimana hal-hal tersebut bekerja. Sekaligus pengetahuan tentang jQuery, turunan dari Javascript ini untuk mengaktifkan OwlCarousel2, plugin manis yang dibangun oleh David Deutsch
Karena tujuan utama saya bukan membagi widget-widget cantik yang hanya akan sekedar di copy-paste, tapi tujuannya adalah belajar cara menggunakannya atau membangunnya sendiri. Dengan begitu, widget-widget atau konten-konten unik bisa dibuat sendiri, dengan jari-jari ketikannya sendiri dan sangat bebas.

So, how to do it?

(Kita..?) memerlukan pemahaman dasar, struktur HTML pada OwlCarousel2. Dasar strukturnya seperti ini

<div class='owl-carousel owl-theme'>
  <div class='item'>Konten1</div>
  <div class='item'>Konten2</div>
  <div class='item'>Konten3</div>
  <div class='item'>Konten4</div>
</div>

Owl-Carousel2 akan men-slide kan konten dengan banyak nama selector (id atau class) yang sama yang diapit pada satu element parent.
Pada kasusnya, saya akan membuat struktur HTML seperti berikut

<div class='owl-carousel owl-theme sldme'>
  <a href='link post' class='item'><div class='slditem'>Konten1</div></a>
  <a href='link post' class='item'><div class='slditem'>Konten2</div></a>
  <a href='link post' class='item'><div class='slditem'>Konten3</div></a>
  <a href='link post' class='item'><div class='slditem'>Konten4</div></a>
</div>

Saya memerlukan satu nama class sebagai element parent dan .owl-carousel serta .owl-theme hanya sebagai syarat struktur basis HTML dari OwlCarousel2 sendiri.

Kira-kira saya ingin tampilan akhir seperti ini

Widget yang saya buat di https://template-kw-2.blogspot.com/, template yang belum selesai pengerjaannya. (Kebanyakan promo)

Tahap 1

Saya ingin setiap slide muncul tiga item seperti ilustrasi di atas. Bayangkan ilustrasinya seperti itu, maka pembaca atau pengembang blogger template perlu menulis CSS dasar untuk setiap item

.sldme{
    width:100%;
    float:left;
    height:200px;
    position:relative;
    margin-bottom:15px
}
.sldme .slditem{
    width:100%;
    float:left;
    height:200px;
    background-color:#fff;
    background-size:cover;
    background-position:center;
    transition:opacity ease 0.4s;
    color:#fff
}

Tak perlu cemas dengan lebar 100%, karena item per slide akan tetap 3 item dengan option jQuery nantinya.

Lanjutkan dengan style lainnya, seperti pada ilustrasi sebelumnya, seperti judul, tanggal, icons dll.

.sldme .slditem:hover{
    opacity:0.85
}
.sldme .slditem .desc{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
    background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.9));background:-webkit-linear-gradient(top, transparent, rgba(0,0,0,0.9));background:-moz-linear-gradient(top, transparent, rgba(0,0,0,0.9));
    padding:30px 10px 10px;
    transition:padding ease-out 0.3s
}
.sldme .slditem:hover .desc{
    padding:30px 10px 22px
}
.sldme .slditem .desc .judul{
    font:bold 16px Arial;
    cursor:pointer;
    margin:6px 0
}
.sldme .slditem .desc .tgl{
    font:14px Arial;
    margin:6px 0;
    float:left
}
.sldme .slditem .desc .tgl:before{
    content:"\f142";
    margin-right:5px;
    font-family:FontAwesome;
    color:#66ad44
}
.sldme .slditem .desc .comnum{
    font:14px Arial;
    margin:6px 0;
    float:right;
}
.sldme .slditem .desc .comnum:before{
    content:"\f075";
    margin-right:5px;
    font-family:FontAwesome;
    color:#66ad44
}

Butuh FontAwesome v4.7.0 sebagai icon. Pasang FontAwesome jika belum ada pada templatenya, letakkan setelah tag <head> tentunya

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Style seperti ilustrasi sudah selesai, boleh dipahami sendiri, atau memakai style sendiri. Pada kasusnya, saya menunjukkan bagaimana cara saya menggunakannya.

Lanjutnya, kita memerlukan CSS inti atau dasar dari OwlCarousel2. Ditulis langsung boleh atau juga bisa menggunakan external css file dari OwlCarousel2, menggunakan base CDN dari CloudFlare (CDN gratis terbaik)

<link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' rel='stylesheet'/>

Letakkan sesudah tag <head> atau sebelum tag penutup </head> tentunya.
Dan satu core plugin nya juga perlu disertai, cukup menggunakan CDN CloudFlare saja

<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'/>

Pastinya, diletakkan di atas tag penutup </body>

Tahap 2

Setelah mengetahui bagaimana struktur HTML dan CSS nya, tahap selanjutnya membuat function callback json

<script type="text/javascript">//<![CDATA[
function sldme(json){
document.write('<div class="owl-carousel owl-theme sldme">');
    for(var i=0;i<json.feed.entry.length;i++){
        var entry=json.feed.entry[i];
        for(var j=0;j<entry.link.length;j++){
            if(entry.link[j].rel == "alternate"){
                var posturl=entry.link[j].href;break;
            }
        }
        var posttitle=entry.title.$t;
        var postdate=entry.published.$t;//hasil format postdate=2013-07-07T12:56:00.000+07:00
        var year=postdate.substring(0,4);//ambil 4 karakter pertama sebagai tahun
        var nmonth=postdate.substring(5,7);//ambil 2 karakter dari karakter 6 sebagai angka bulan
        var date=postdate.substring(8,10);//ambil 2 karakter dari karakter ke 9 sebagai tanggal
        //convert angka bulan jadi nama bulan
        if(nmonth=="01"){var month="Jan"}else if(nmonth=="02"){var month="Feb"}else if(nmonth=="03"){var month="Mar"}else if(nmonth=="04"){var month="Apr"}else if(nmonth=="05"){var month="May"}else if(nmonth=="06"){var month="Jun"}else if(nmonth=="07"){var month="Jul"}else if(nmonth=="08"){var month="Aug"}else if(nmonth=="09"){var month="Sep"}else if(nmonth=="10"){var month="Oct"}else if(nmonth=="11"){var month="Nov"}else if(nmonth=="12"){var month="Dec"}
        var comnum=entry.thr$total.$t;
        var postimg;
        //cek jika gambar kosong;
        if(entry.media$thumbnail===undefined){postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64eW57-iHwncpUp1sWoHjamDtHGqYY9B9zYTigbQC0pLvh4cLtxvDCoK-d-ij0dYHfPu-hGb-st3_42iYQ1swyvgKdy31VWUrwQ147Q22tuLnGVk7Pec0J7MqKuBYHOCtpdsVIY4Jvp4k/s1600/no-thumbnail.png"}
        //gambar no-thumbnail sesuai selera
        else{postimg=entry.media$thumbnail.url}
        //secara default gambar yg didapat hanya berukuran 72x72 pixels
        //maka perlu diganti dengan sumbernya jadi lebih besar
        //dengan url magic google image
        //serta mengganti ukuran thumbnail video(youtube) lebih besar
        var le=$(".sldme").outerWidth()/3;//(jQuery) angka lebar lebih dinamis berdasarkan lebar element .sldme dibagi 3 untuk per item (sesuai selera, boleh angka statis seperti 200, 400, 600 dst)
        var postimggede=postimg.replace("s72-c", "w"+le.toFixed()).replace("default.jpg", "sddefault.jpg");
        document.write('<a href="'+posturl+'"><div class="slditem" style="background-image:url('+postimggede+')"><div class="desc"><div class="title">'+posttitle+'</div><div class="tgl">'+month+' '+date+', '+year+'</div><div class="comnum">'+comnum+'</div></div></div></a>');
    }
document.write('</div>');
}
//]]></script>

Script tersebut ditulis sebelum tag penutup </head>

Tahap 3

Tahap terakhir ini, merupakan tahap penyelesaian (bisa jadi).
OwlCarousel2 akan dipanggil dan diaktifkan pada .sldme , dengan jQuery dan ditulis di atas atau sebelum tag penutup </body>

<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
    $('.sldme').owlCarousel({
        items:3,
        responsive:{
            480:{items:1},
            768:{items:2}
        },
        pagination:false,
        navigation:false,
        margin:20,
        loop:true,
        autoplay:true,
        autoplayTimeout:5000,
    });
});
//]]></script>

Lalu function callback sldme() dipanggil dengan javascript inline json

<script src='https://audiralog.blogspot.com/feeds/posts/default?max-results=6&alt=json-in-script&callback=sldme'/>

Script diletakkan sesuai tempat yang inginkan, pastinya sesuai struktur HTML yang dituju.

//jumlah postingan yang ingin di-retrieve
max-results=6 
//sldme sesuai nama callback function yang ditulis
callback=sldme

Serta alamat blog diganti sesuai nama / URL blog sendiri
Jika ingin retrieve post berdasarkan spesifik label maka tambah URI seperti berikut

<script src='https://audiralog.blogspot.com/feeds/posts/default/-/NAMALABEL?max-results=6&alt=json-in-script&callback=sldme'/>
//Gantilah NAMALABEL !

What's next?

Tak ada tahap yang diperlukan lagi kecuali penambahan style atau atribut lain.
Yang pastinya sesuaikan dengan kebutuhan masing-masing sekaligus penempatannya. Rumitnya, saya melakukan semua itu di dalam sebuah postingan. Dengan 2 items per slide (1 item perslide pada layar mobile atau dibawah 480 pixel lebar) karena 3 items menjadi terlalu kecil per itemnya, karena lebar element postingan
But...

WE DID IT