Halo lagi sobat Designz Chan, Setelah saya membagikan tutorial Cara membuat Anime List Otomatis berdasarkan Kategori di Blog. kali ini saya akan membagikan Cara Membuat Mirror Streaming Responsive di Blog Untuk Streaming Video selain itu tampilannya juga responsive di mobile.
Untuk demonya yuk kita lihat dulu : DEMO
Yuk langsung saja tutorialnya, sobat masuk dulu ke Template → Editor Template :
Langkah pertama sebelumnya sobat cari code ]]></b:skin> atau </style> lalu sobat masukan Code CSS di bawah ini :
.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 : Perlu di Ingat! HTML Post 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 Sedang di Tonton
</div>
<div id="Content2">
Embed Video Mirror 1
</div>
<div id="Content3">
Embed Video Mirror 2
</div>
<div id="Content4">
Embed Video Mirror 3
</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.
Baca Juga : Cara Membuat Turn On/Off the Lights Video Streaming di Blog
Selesai. Mudah bukan..? ^^
Sekian tutorial saya hari ini bagaimana Cara Membuat Mirror Video Anime di Blog. Jika sobat mempunyai masalah, silakan komentar di kotak komentar bawah.
Terima kasih.
