Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel blog_tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API
link : 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.
(Kita..?) memerlukan pemahaman dasar, struktur HTML pada OwlCarousel2. Dasar strukturnya seperti ini
Pada kasusnya, saya akan membuat struktur HTML seperti berikut
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)
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.
Butuh FontAwesome v4.7.0 sebagai icon. Pasang FontAwesome jika belum ada pada templatenya, letakkan setelah tag <head> tentunya
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)
Letakkan sesudah tag <head> atau sebelum tag penutup </head> tentunya.
Dan satu core plugin nya juga perlu disertai, cukup menggunakan CDN CloudFlare saja
Pastinya, diletakkan di atas tag penutup </body>
Script tersebut ditulis sebelum tag penutup </head>
OwlCarousel2 akan dipanggil dan diaktifkan pada .sldme , dengan jQuery dan ditulis di atas atau sebelum tag penutup </body>
Lalu function callback sldme() dipanggil dengan javascript inline json
Script diletakkan sesuai tempat yang inginkan, pastinya sesuai struktur HTML yang dituju.
Serta alamat blog diganti sesuai nama / URL blog sendiri
Jika ingin retrieve post berdasarkan spesifik label maka tambah URI seperti berikut
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...
Anda sekarang membaca artikel Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API dengan alamat link https://dev-create.blogspot.com/2018/08/membuat-slide-owl-carousel2-di-blogger.html
Judul : Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API
link : Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API
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>
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
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="http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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
Demikianlah Artikel Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API
Sekianlah artikel Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Slide Owl-Carousel2 di Blogger dengan Blogger JSON Feed API dengan alamat link https://dev-create.blogspot.com/2018/08/membuat-slide-owl-carousel2-di-blogger.html
