Cara Membuat Mirror Video Streaming Anime di Blog





Setelah Kmaren saya berniat membuat blog Streaming anime Nakamanime akhirnya saya berniat membagikan tutorial sekaligus catatan bagi saya, tentang bagaimana cara membuat mirror video ..
siapa tau ada dari anda yang membutuhkan.. :D


Lalu bagaimana cara buatannya..?

Langkah pertama seperti biasa, masukan kode CSS. Blogger > Template > Edit Template, cara kode ]]></b:skin> atau </style> (ctrl+f untuk mempercepat)
 dan sobat masukan Code CSS ini tepat diatasnya :

.all-button {
    position: relative;
    background: gray;
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
    width: 100%;
}

#NakamanimeMirror {
    text-align: center;
    float: left;
    background: gray;
    cursor: pointer;
    width: 23.77%;
    height: 27px;
    line-height: 27px;
    color: #fff;
    font-size: 14px;
    padding: 3px;
    font-weight: 700;
    border-right: 1px solid #CCC;
}

#Content1 {
    display: block;
    width: 100%;
    height: 400px;
    padding: 0;
    text-align: center;
    background: #000;
}

#Content2, #Content3, #Content4 {
    display: none;
    width: 100%;
    height: 400px;
    padding: 0;
    text-align: center;
    background: #000;
}

*kode yg ditandai warna kuning adalah kode warna, sobat bebas menggantinya sesuai Selera :)


Selanjutnya masuk pos.
silahkan isi post sobat dengan format HTML di bawah ini :
NB : Ingat! HTML bukan Compose.


<div class="all-button">
<div id="NakamanimeMirror" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';Content4.style.display='none';">
Sedang Tonton!</div>
<div id="NakamanimeMirror" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';Content4.style.display='none';">
Mirror 1</div>
<div id="NakamanimeMirror" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';Content4.style.display='none';">
Mirror 2</div>
<div id="NakamanimeMirror" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='none';Content4.style.display='block';">
Mirror 3</div>
</div>
<div id="Content1">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/lsV5qyzrZFo" frameborder="0" allowfullscreen></iframe> 
</div>
<div id="Content2">
<iframe allowfullscreen='true' frameborder='0' height='100%' marginheight='0' marginwidth='0' scrolling='NO' src='http://www.mp4upload.com/embed-9xsafatlzidn.html' width='100%'/>
</div>
<div id="Content3">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/lsV5qyzrZFo" frameborder="0" allowfullscreen></iframe> 
</div>
<div id="Content4">
<iframe allowfullscreen='true' frameborder='0' height='100%' marginheight='0' marginwidth='0' scrolling='NO' src='http://www.mp4upload.com/embed-9xsafatlzidn.html' width='100%'/> 
</div>
</div>

NOTE :

  • Embed Video Mirror 1 - 4 isikan dengan embed atau iframe video mirror milik sobat.
  • Slalu buat Video Iframe , widthnya 100% dan height 100% agar lebih rapih.

Selesai. gampang bukan? ^_^


DEMO : Nakamanime  




Sedang Tonton!
Mirror 1
Mirror 2
Mirror 3

7 Responses to "Cara Membuat Mirror Video Streaming Anime di Blog"

  1. gan kok videonya muter semua,,, kalo bikin salah satu berhenti saat diputar
    gimana?

    ReplyDelete
  2. gk bisa gan, gak bisa kotak-kotak, gimana nih.

    ReplyDelete
  3. gk bisa gan, gak bisa kotak-kotak, gimana nih.

    ReplyDelete
  4. Bagi yang mau membuat video google drive player bisa kunjungi situs ini http://free-embed.com
    Fitur:
    Subtitle
    Link Download
    Link Player
    Manage Video
    Custom Slug
    Image Custom

    Silahkan Kunjungi http://free-embed.com

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel