Tutorial Membuat Tab Episode Mirip Anoboy

Tutorial Membuat Video Ganti Episode untuk Streaming Seperti Anoboy - Sobat pecinta streaming, atau otaku yang sering nonton di situs streaming anime? terkadang kita jengkel dengan perpindahan episode yang yang mengharuskan merefresh lagi halaman situs dan lagi. Selain membuang-buang waktu hal itujuga menjengkelkan. karena banyak ditambah banyak sekali iklan.

Baca Juga : Cara Memasang Load More Post di Blogger

Jika kamu seorang yang selalu meng-update streaming atau anime di situs kamu dan memerlukan perpindahan episode agar nyaman bagi pengunjung setia. Kali ini saya akan berbagi cara atau metode supaya video yang kamu putar tidak harus berpindah halaman lagi. Hal ini karena sumberlink video hanya akan diganti saja saat mengklik tombol saja. Jika penasaran seperti inilah caranya


Cara Memasang Episode Switcher Sederhana

Langkah pertama pastikan situs kamu sudah include dengan yang namnya Jquery, jika belum kamu bisa memasangnya terlebih dahulu dengan meng-copasnya kode berikut Jquery yang di modifikasi (diload saat halaman sudah terload semua) dan taruh di atas</head>


<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Indzign/InSEO/8518cbe0/antiboomclick.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Atau kamu bisa langsung code berikut jika yang di atas tidak berhasil. caranya sama dengan copas diatas </head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Selanjutnya kamu tinggal membuat postingan atau halaman dengan menaruh kode dibawah ini


<!-- By Codepelajar.com -->
<span id='AnimeTitle'>Episode 1</span>
<div class='append-video'>
    <video id='animeshot' controls="controls" width="100%">
        <source src="https://www.blogger.com/video-play.mp4?contentId=568ed33395090bba" type="video/mp4" />
    </video>
</div>
<div id="Episode" class="tabs tabs-episode">
<!-- tombol akan muncul disini -->
</div>

<!-- CSS PEMBANTU -->
<style>
#Episode {
    display: flex;
    flex-wrap: wrap;
}
.ganti-episode {
    padding: 5px 10px;
    margin: 3px;
    background: #e1e1e1;
    color: #444;
    border-radius: 3px;
    cursor: pointer;
}
#AnimeTitle {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px;
    font-size: 18px;
    font-family: 'Custom','Oswald';
    background: #232323;
    color: #fff;
}
</style> 

<!-- JAVASCRIPTNYA -->
<script>
// Link video taruh disini (Usahakan 1 jenis link sumber)
var anime = [
 "https://www.blogger.com/video-play.mp4?contentId=568ed33395090bba",
 "https://www.blogger.com/video-play.mp4?contentId=27472a21b43a674e",
 "https://www.blogger.com/video-play.mp4?contentId=c4801a3d8a176fd2",
 "https://www.blogger.com/video-play.mp4?contentId=77904c34fd08c3ad",
 "https://www.blogger.com/video-play.mp4?contentId=1d3269c7c2ed2e15",
 "https://www.blogger.com/video-play.mp4?contentId=c44d94e10282dad4",
 "https://www.blogger.com/video-play.mp4?contentId=30245e959f9cd3b3",
 "https://www.blogger.com/video-play.mp4?contentId=a10ecd6616ac3e4a",
 "https://www.blogger.com/video-play.mp4?contentId=c51622f8e17ae30a",
 "https://www.blogger.com/video-play.mp4?contentId=7e12f1ae1549abd6",
 "https://www.blogger.com/video-play.mp4?contentId=1b32c8a8046606fa",
 "https://www.blogger.com/video-play.mp4?contentId=53c37132c30433c",
]

$(document).ready(function(){

(function(){
 // Definisikan Jumlah Episode dan lokasi appendnya
 var jumlahEpisode = anime.length
 var tabsEps = $('.tabs-episode')

 //tombol akan di lopping sesuai jumlah data Array Anime
 for (var i = 0; i < jumlahEpisode; i++) {
    tabsEps.append("<a class='ganti-episode' data-id='"+i+"' data-eps='Episode "+(i+1)+"'>'"+(i+1)+"</a>")
 }

 // Definisikan lokasi yang akan di timpakan video anime
 var videoAnime = $('.append-video')

 //saat di klik tombolnya maka elemen video akan berganti
 $('.ganti-episode').click(function(){

 //CATATAN : ini untuk yang menggunakan tag <video></video>
  videoAnime.html('<video id="animeshot" controls="controls" width="100%"><source src="'+anime[parseInt($(this).data('id'))]+'" type="video/mp4"></video>')

 //CATATAN : ini untuk yang menggunakan iframe
 //  videoAnime.html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="'+anime[parseInt($(this).data('id'))]+'" ></iframe></div>')

 // Nama Episode akan berganti
  $('#AnimeTitle').text($(this).data('eps'))
 })

}())

 
})
</script>
Perhatikan Peletakan dan Kodenya supaya hasil saat sobat test berhasil sesuai tutorial. Jika kesulitan atau kebingungan cobalah berkomentar dibawah.

Jika sudah bisa menerapkannya di blog sobat, maka hasilnya akan seperti pada demonstrasi berikut ini.


Terpopuler : Cara Membuat Chatango Melayang

Itulah bagaimana cara memasang episode switcher yang saya buat sederhana. Memang masih banyak cara yang digunakan dan ada juga yang menggunakan cara yang lebih gampang dari ini. Setidaknya cara ini bisa diterapkan oleh sobat diblogger sobat. Jika artikel ini bermanfaat jangan segan untuk membagikannya ke sosial media.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel