Blogger sitenizde kullanıcıların tıklayarak dosya indirmelerini sağlamak istiyorsanız, basit ama etkili bir çözümle indir butonu ekleyebilirsiniz.

Bu yazıda,  indir butonu oluşturmak için gerekli HTML ve CSS kodlarını nasıl kullanabileceğinizi göstereceğim. Kodun nasıl çalıştığını ve nasıl entegre edebileceğinizi adım adım anlatacağım.

Adım 1: İndir Butonu Kodu

İlk olarak, bir buton tasarlayacağız. Bu butona tıklandığında, kullanıcılar istedikleri dosyayı indirecekler. Ancak burada önemli olan, butona gizli bir link eklememiz. Bu linki tıklayarak sizden habersiz bir şekilde yönlendirilecekler.

Aşağıdaki HTML ve CSS kodunu Blogger yazı düzenleyicinize ekleyebilirsiniz:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .download-btn {
            display: inline-block;
            padding: 15px 30px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            background-color: #4CAF50;
            border-radius: 8px;
            text-decoration: none;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .download-btn:hover {
            transform: scale(1.1);
            background-color: #45a049;
        }
        .download-btn:active {
            transform: scale(1);
        }
        .download-btn img {
            width: 25px;
            margin-right: 10px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<a href="İNDİRME LİNKİNİZİ BURAYA EKLEYİN" class="download-btn" target="_blank" onclick="window.location.href='https://veysgezegen.blogspot.com';">
    <img src="https://img.icons8.com/ios/452/download.png" alt="Download Icon"> İndir
</a>

<!-- oluşturan: https://veysgezegen.blogspot.com/ -->

</body>
</html>

Adım 2: Kodun Nasıl Çalıştığını Anlamak

Yukarıdaki kod, bir buton tasarlar ve kullanıcılar butona tıkladığında, indirilecek dosyayı almak için ilgili sayfaya yönlendirilirler. İNDİRME LİNKİNİZİ BURAYA EKLEYİN" kısmını silip kendi istediğiniz linki yapıştırın.

Kod Açıklamaları:

  • a etiketi ile oluşturulan buton, "İndir" yazısı ve yanında bir indirme simgesi içerir.
  • Kullanıcı butona tıkladığında, belirlediğimiz link ziyaret edilir.
  • CSS kısmında butonun rengi, hover etkisi ve animasyonu ayarlanmıştır.

Adım 3: Kodu Kopyalamak İçin

Aşağıdaki  kodu kopyalayabilirsiniz ardından blogger yazı sayfanızda HTML görünümü sekmesini seçip yazınızın isteğiniz bölümüne yapıştırarak ekleyin.

<textarea readonly style="width:100%;height:150px;">
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .download-btn {
            display: inline-block;
            padding: 15px 30px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            background-color: #4CAF50;
            border-radius: 8px;
            text-decoration: none;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .download-btn:hover {
            transform: scale(1.1);
            background-color: #45a049;
        }
        .download-btn:active {
            transform: scale(1);
        }
        .download-btn img {
            width: 25px;
            margin-right: 10px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<a href="https://veysgezegen.blogspot.com/" class="download-btn" target="_blank" onclick="window.location.href='https://veysgezegen.blogspot.com';">
    <img src="https://img.icons8.com/ios/452/download.png" alt="Download Icon"> İndir
</a>

<!-- Oluşturan: https://veysgezegen.blogspot.com/ -->

</body>
</html>
</textarea>