Cara Membuat Notifikasi Cookie Consent Responsive di Blogger

Source Code Multi Tab Streaming Blogger

Halo Semuanya, di Postingan kali ini saya akan membagikan Source code Simple untuk Multi tab Streaming di blogger, Kalian Bisa Mengembangkan Code Ini Untuk Kebutuhan Kalian.

Silahkan Kalian Salin Semua kode yang ada dibawah ini

Source Code

<div class="streaming-tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Channel 1</a></li>
        <li><a href="#tab2">Channel 2</a></li>
        <li><a href="#tab3">Channel 3</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
            <!-- Embed your streaming code for Channel 1 here -->
            <iframe src="https://www.youtube.com/embed?v=T-SZypTyl4o" frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="tab2" class="tab">
            <!-- Embed your streaming code for Channel 2 here -->
            <iframe src="https://www.youtube.com/embed?v=kqU4iVaZKPE" frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="tab3" class="tab">
            <!-- Embed your streaming code for Channel 3 here -->
            <iframe src="https://www.youtube.com/embed?v=1epXhI0tA5M" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>

<style>
.streaming-tabs {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
}

.tab-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-around;
}

.tab-links li {
    flex: 1;
    text-align: center;
    background: #4CAF50; /* Warna hijau */
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    transition: background 0.3s;
}

.tab-links li:hover {
    background: #45a049; /* Warna hijau lebih gelap saat hover */
}

.tab-links li.active {
    background: #388E3C; /* Warna hijau lebih gelap untuk tab aktif */
}

.tab-links li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #fff; /* Warna teks putih */
    font-weight: bold;
}

.tab-content .tab {
    display: none;
    padding: 20px;
    background: #f9f9f9; /* Warna latar belakang tab content */
    border: 1px solid #ddd;
    border-top: none;
}

.tab-content .tab.active {
    display: block;
}

/* Media Queries untuk Responsifitas */
@media (max-width: 600px) {
    .tab-links {
        flex-direction: column;
    }

    .tab-links li {
        margin-bottom: 5px;
        border-radius: 5px;
    }

    .tab-content .tab {
        padding: 10px;
    }
}
</style>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var tabLinks = document.querySelectorAll('.tab-links li');
    var tabs = document.querySelectorAll('.tab-content .tab');

    tabLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            // Remove active class from all links and tabs
            tabLinks.forEach(function(link) {
                link.classList.remove('active');
            });
            tabs.forEach(function(tab) {
                tab.classList.remove('active');
            });

            // Add active class to clicked link and corresponding tab
            link.classList.add('active');
            document.querySelector(link.querySelector('a').getAttribute('href')).classList.add('active');
        });
    });
});
</script>

---

Demo

Cek Demo