Javascript ile Linki Yeni Sekmede Açma Yardım

08-05-2023, 00:14:59

Merhaba blogger için indirme butonu kodu buldum. fakat linki yeni sekmede açmak istiyorum yardımcı olurmusunuz?

<!------CSS------>
<style>
.download-button-container {
  width: 100%;
  max-width: 600px;
  background: #eee;
  margin: 24px auto;
  padding: 16px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  border-radius: 10px;
  box-shadow: inset 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-button-container .download-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #ef233c;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #fff;
}

.download-button-container .download-button.active .download-icon {
  animation: bounceAnim 700ms infinite alternate;
}

.download-button-container .download-icon {
  width: 16px;
}

.download-info h3 {
  color: #023047;
  margin-bottom: 12px;
}

.download-info {
  height: 0;
  overflow: hidden;
  transition: all 400ms ease;
}

.download-button-container .download-button.active + .download-info {
  height: 90px;
}

.download-info .download-link {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
  color: #023047;
  letter-spacing: 4px;
  text-decoration: underline;
  text-underline-offset: 5px;
}

@keyframes bounceAnim {
  to {
    transform: translateY(4px);
  }
}  
</style>
<!------/CSS------>

<!------HTML------>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
      rel="stylesheet"
    />
  
    <div class="download-button-container">
      <button class="download-button">
        Download
        <span class="download-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M19 14l-7 7m0 0l-7-7m7 7V3"
            />
          </svg>
        </span>
      </button>

      <div class="download-info">
        <h3>Your download link will appear in 10 seconds.</h3>
      </div>
    </div>
<!------HTML------>

<!------JavaScript------>
<script>
  const downloadButton = document.querySelector(
  ".download-button-container .download-button"
);
const downloadHeading = document.querySelector(".download-info h3");
const downloadInfo = document.querySelector(".download-info");

let downloadTimer;
let remainingTime = 10;
let linkDisplayed = false;

const showDownloadLink = () => {
  if (!linkDisplayed) {
    const downloadLink = document.createElement("a");
    downloadLink.href = "https://disk.yandex.com.tr/d/mqO8rLHij1rwVg";
    downloadLink.innerHTML = "Click Here";
    downloadLink.classList.add("download-link");
    downloadInfo.appendChild(downloadLink);
  }
  linkDisplayed = true;
};

downloadButton.addEventListener("click", () => {
  downloadButton.classList.add("active");

  downloadTimer = setInterval(() => {
    remainingTime--;

    if (remainingTime <= 0) {
      clearInterval(downloadTimer);
      showDownloadLink();
      downloadHeading.innerHTML = "Here is the download link.";
    } else {
      downloadHeading.innerHTML = `Your download link will appear in ${remainingTime} seconds.`;
    }
  }, 1000);
});
  </script>
<!------/JavaScript------>

DEMO

08-05-2023, 00:17:29

#2

Turtle

HTML'de "target" özelliğine "_blank" değerini atamamız gerekiyor. Bunun için aşağıdaki kodu kullanabilirsiniz:

<a href="https://www.example.com" target="_blank">Örnek Link</a>
Yukarıdaki kodda, "https://www.example.com" URL'si yerine açmak istediğiniz linkin URL'sini yazmalısınız. "Örnek Link" ise, kullanıcılara göstermek istediğiniz metindir. "_blank" ise, linkin yeni sekmede açılmasını sağlayan hedef özelliğidir.

08-05-2023, 00:23:32

thealiyasar

VorteXx adlı üyeden alıntı: mesajı görüntüle

Merhaba blogger için indirme butonu kodu buldum. fakat linki yeni sekmede açmak istiyorum yardımcı olurmusunuz?

<!------CSS------>
<style>
.download-button-container {
  width: 100%;
  max-width: 600px;
  background: #eee;
  margin: 24px auto;
  padding: 16px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  border-radius: 10px;
  box-shadow: inset 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-button-container .download-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #ef233c;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #fff;
}

.download-button-container .download-button.active .download-icon {
  animation: bounceAnim 700ms infinite alternate;
}

.download-button-container .download-icon {
  width: 16px;
}

.download-info h3 {
  color: #023047;
  margin-bottom: 12px;
}

.download-info {
  height: 0;
  overflow: hidden;
  transition: all 400ms ease;
}

.download-button-container .download-button.active + .download-info {
  height: 90px;
}

.download-info .download-link {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
  color: #023047;
  letter-spacing: 4px;
  text-decoration: underline;
  text-underline-offset: 5px;
}

@keyframes bounceAnim {
  to {
    transform: translateY(4px);
  }
}  
</style>
<!------/CSS------>

<!------HTML------>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
      rel="stylesheet"
    />
  
    <div class="download-button-container">
      <button class="download-button">
        Download
        <span class="download-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M19 14l-7 7m0 0l-7-7m7 7V3"
            />
          </svg>
        </span>
      </button>

      <div class="download-info">
        <h3>Your download link will appear in 10 seconds.</h3>
      </div>
    </div>
<!------HTML------>

<!------JavaScript------>
<script>
  const downloadButton = document.querySelector(
  ".download-button-container .download-button"
);
const downloadHeading = document.querySelector(".download-info h3");
const downloadInfo = document.querySelector(".download-info");

let downloadTimer;
let remainingTime = 10;
let linkDisplayed = false;

const showDownloadLink = () => {
  if (!linkDisplayed) {
    const downloadLink = document.createElement("a");
    downloadLink.href = "https://disk.yandex.com.tr/d/mqO8rLHij1rwVg";
    downloadLink.innerHTML = "Click Here";
    downloadLink.classList.add("download-link");
    downloadInfo.appendChild(downloadLink);
  }
  linkDisplayed = true;
};

downloadButton.addEventListener("click", () => {
  downloadButton.classList.add("active");

  downloadTimer = setInterval(() => {
    remainingTime--;

    if (remainingTime <= 0) {
      clearInterval(downloadTimer);
      showDownloadLink();
      downloadHeading.innerHTML = "Here is the download link.";
    } else {
      downloadHeading.innerHTML = `Your download link will appear in ${remainingTime} seconds.`;
    }
  }, 1000);
});
  </script>
<!------/JavaScript------>

DEMO

Şundan sonra;

downloadLink.href = "https://disk.yandex.com.tr/d/mqO8rLHij1rwVg";

şunu ekle ;

downloadLink.target  = '_blank';

08-05-2023, 00:38:37

#4

VorteXx
thealiyasar adlı üyeden alıntı: mesajı görüntüle
Şundan sonra;

downloadLink.href = "https://disk.yandex.com.tr/d/mqO8rLHij1rwVg";
şunu ekle ;

downloadLink.target = '_blank';
Çok teşekkürler oldu.
08-05-2023, 05:40:08

#5

mehmetkul

<button onclick="openDownloadLink()">İndirme Butonu</button>

<script>
function openDownloadLink() {
var downloadLink = "https://www.indirme-linki.com";
window.open(downloadLink, "_blank");
}
</script>