Fotoğraftaki gibi şeyi blogger siteme nasıl eklerim?

Bunun gibi bir şey istiyorum.Yardımcı olur musunuz?

SemihDeniz adlı üyeden alıntı

Bunun gibi bir şey istiyorum.Yardımcı olur musunuz?

Aslında çok basit  temel kodlama bilgisiyle yapabilirsin blogger tab menü nasıl yapılır dersen anlatan bir çok yer var. 

SemihDeniz adlı üyeden alıntı

Bunun gibi bir şey istiyorum.Yardımcı olur musunuz?

<div class="tab-menu">
  <ul class="tabs">
    <li class="active" data-tab="tab1">Örnek Flim 1</li>
    <li data-tab="tab2">Örnek Flim 2</li>
  </ul>

  <div class="tab-content active" id="tab1">
  <div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
  <div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
<div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
  </div>
  <div class="tab-content" id="tab2">
<div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div><div class="bolum-listesi">
  <a href="https://ornek-link.com/monster-1" class="bolum" target="_blank">
    <div class="bilgi">
      <strong>Monster - 1. Bölüm</strong><br>
      Boyut: 56 MB | Kalite: 480p | Ses: Japonca/İngilizce
    </div>
    <div class="indir">
      <img src="https://img.icons8.com/ios-glyphs/30/4caf50/download--v1.png" alt="İndir">
    </div>
  </a>
</div>
  </div>
</div>

<style>
.tab-menu {
  font-family: Arial, sans-serif;
}
.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  border-bottom: 2px solid #ccc;
}
.tabs li {
  padding: 10px 20px;
  cursor: pointer;
  background: #eee;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
}
.tabs li.active {
  background: #fff;
  border-bottom: 2px solid white;
  font-weight: bold;
}
.tab-content {
  display: none;
  padding: 20px;
  background: #fff;
  border: 2px solid #ccc;
  border-top: none;
}
.tab-content.active {
  display: block;
}
.bolum-listesi {
  width: 100%;
  font-family: Arial, sans-serif;
}
.bolum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: #000;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s ease;
}
.bolum:hover {
  background-color: #f9f9f9;
}
.bilgi {
  font-size: 14px;
}
.indir img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.bolum:hover .indir img {
  transform: scale(1.2);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const tabs = document.querySelectorAll(".tabs li");
  const contents = document.querySelectorAll(".tab-content");

  tabs.forEach(tab => {
    tab.addEventListener("click", function() {
      tabs.forEach(t => t.classList.remove("active"));
      contents.forEach(c => c.classList.remove("active"));

      this.classList.add("active");
      const tabId = this.getAttribute("data-tab");
      document.getElementById(tabId).classList.add("active");
    });
  });
});
</script>

SemihDeniz adlı üyeden alıntı

Bunun gibi bir şey istiyorum.Yardımcı olur musunuz?

@wmai 

@esskmk