Blogger'da dikkat çekici ve şık bir indirme butonu eklemek ister misiniz? Sade butonlar yerine hareketli ve göz alıcı bir tasarım kullanarak, ziyaretçilerinizin ilgisini çekebilirsiniz.

Bu yazıda, turuncu ve animasyonlu bir indirme butonu kodunu paylaşıyoruz. Bu buton, sayfanın tam ortasına yerleşir, hareketli bir bulut efekti ile dikkat çeker ve tıklayan kullanıcıyı belirlediğiniz indirme bağlantısına yönlendirir.

Neden Animasyonlu Bir Buton Kullanmalısınız?

✔ Dikkat çeker: Hareketli öğeler, kullanıcıların ilgisini artırır.
✔ Profesyonel görünüm sunar: Standart düğmelere kıyasla daha estetik durur.
✔ Tıklanma oranını artırır: Renk ve animasyon sayesinde daha fazla etkileşim alabilirsiniz.

Aşağıda Blogger için kullanabileceğiniz HTML ve CSS kodunu bulabilirsiniz. Bu kodu doğrudan Blogger yazınıza ekleyerek kullanabilirsiniz.

Turuncu ve Hareketli İndirme Butonu Kodu

Aşağıdaki kodu Blogger'da "HTML Düzenleyici" bölümüne yapıştırarak kullanabilirsiniz.

📌 Kodun içinde sizin blog bağlantınız da gizli olarak eklendi, böylece butonu kopyalayıp kullananlar farkında olmadan blogunuza referans verecektir.


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes cloudMovement {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            text-align: center;
            margin: 20px;
        }

        .content {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 50px 0;
        }

        .cloud-btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 50px;
            font-size: 22px;
            font-weight: bold;
            text-transform: uppercase;
            color: white;
            background-color: #ff6600;
            border-radius: 50px;
            text-decoration: none;
            text-align: center;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            animation: cloudMovement 2s infinite;
            transition: all 0.3s ease;
            letter-spacing: 1px;
        }

        .cloud-btn:hover {
            transform: scale(1.1);
            background-color: #e65c00;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }

        .cloud-btn img {
            width: 30px;
            margin-left: 10px;
        }

        .cloud {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 130px;
            height: 60px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            animation: cloudMovement 2s infinite;
            transform: translate(-50%, -50%);
        }

        .cloud:before {
            content: '';
            position: absolute;
            top: 5px;
            left: 10px;
            width: 50px;
            height: 35px;
            background: white;
            border-radius: 50%;
        }

        .cloud:after {
            content: '';
            position: absolute;
            top: 5px;
            right: 10px;
            width: 50px;
            height: 35px;
            background: white;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<div class="content">
    <h1>Dosyanızı Buradan İndirin</h1>
    <p>Aşağıdaki butona tıklayarak dosyanızı güvenli bir şekilde indirebilirsiniz.</p>

    <div class="button-container">
        <a href="İNDİRME LİNKİNİZİ BURAYA EKLEYİN" class="cloud-btn" target="_blank">
            <span>İNDİR</span>
            <img src="https://img.icons8.com/ios/452/download.png" alt="Download Icon">
        </a>
    </div>

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

</div>

</body>
</html>

Kodu Nasıl Kullanırım?

1️⃣ Blogger’a giriş yapın ve yeni bir yazı oluşturun.
2️⃣ "HTML Düzenleyici" moduna geçin.
3️⃣ Yukarıdaki kodu yazıya yapıştırın.
4️⃣ Yayınla butonuna basın! 🚀

Bu kadar basit! Artık blog yazınızda hareketli ve turuncu bir indirme butonu bulunuyor.

Sonuç

Bu hareketli buton sayesinde blog yazılarınıza görsel olarak daha ilgi çekici bir öğe ekleyebilirsiniz. Kullanıcılarınız hem görsellikten etkilenir hem de indirme işlemini kolayca gerçekleştirebilir.

Buton hakkında ne düşünüyorsunuz? Aşağıdaki yorumlarda bizimle paylaşabilirsiniz! 😊