Cara Membuat Mirror Streaming Anime di Blog

ADSENSE HERE! 

Halo lagi sobat Kuro Labs, Setelah saya membagikan tutorial Cara Membuat Widget Popular Post Keren di Blog kali ini kuro-san akan membagikan Cara Membuat Mirror Streaming Anime di Blog Untuk Streaming Video.

Sebelumnya yuk kita lihat dulu demonya
Klik Disini

Lalu bagaimana prosses pembuatannya..?

Langkah pertama  sebelumnya sobat cari code ]]></b:skin> atau </style> dan sobat masukan Code CSS di bawah ini sebelum 2 code tersebut :

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

#Kuro-Mirror {
    text-align: center;
    float: left;
    background: #1a77d0;
    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;
}

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

<div class="all-button">
<div id="Kuro-Mirror" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';Content4.style.display='none';">
Sedang Tonton!</div>
<div id="Kuro-Mirror" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';Content4.style.display='none';">
Mirror 1</div>
<div id="Kuro-Mirror" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';Content4.style.display='none';">
Mirror 2</div>
<div id="Kuro-Mirror" 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">
Embed Video Mirror 1
</div>
<div id="Content2">
Embed Video Mirror 2
</div>
<div id="Content3">
Embed Video Mirror 3
</div>
<div id="Content4">
Embed Video Mirror 4
</div>

NOTE :

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

Selesai. Mudah bukan..? ^^

Jika sobat mempunyai masalah, silakan komentar di kotak komentar bawah.
Terima kasih.

ADSENSE HERE !