Cara Membuat Made With Love Berdetak di Blogger dan WordPress

Halo sobat blogging, kali ini admin anliswinter.com akan membagikan tutorial cara membuat icon love dengan efek berdetak pada template blogger atau wordpress kalian.

Footer pada blog adalah salah satu bagian yang sering dilihat oleh pengunjung. Menambahkan elemen bergerak atau animasi dapat membuat blog Anda terlihat lebih menarik dan profesional. Salah satu cara untuk menambahkan sentuhan personal adalah dengan menambahkan teks “Made with Love” yang bergerak di footer blog kalian.

Nah icon Love ini biasanya menggunakan icon SVG atau font awesome. namun karena ada beberapa template yang tidak support dengan fitur tersebut, admin akan membuatnya murni menggunakan CSS saja, jadi tidak memberatkan loading blog, berikut tutorialnya.

Cara Membuat Made With Love Berdetak di Blogger

1. Buka blogger kalian
2. Pada menu Blogger, pilih menu Teman
3. Pada SESUAIKAN pilih Edit HTML
4. Kemudian ketakkan kode CSS ini tepat diatas kode ]]></b:skin> atau </style>

   .heart {
       display: inline-block;
       width: 8px; /* Ukuran diperkecil */
       height: 8px; /* Ukuran diperkecil */
       background-color: red;
       position: relative;
       top: -1px; /* Menggeser sedikit ke atas lagi */
       margin: 0 3px; /* Menambahkan ruang di sekitar ikon hati */
       transform: rotate(45deg);
       animation: beat 1s infinite;
   }
   
   .heart::before,
   .heart::after {
       content: "";
       width: 8px; /* Ukuran diperkecil */
       height: 8px; /* Ukuran diperkecil */
       background-color: red;
       border-radius: 50%;
       position: absolute;
   }
   
   .heart::before {
       top: -4px; /* Disesuaikan dengan ukuran baru */
       left: 0;
   }
   
   .heart::after {
       top: 0;
       left: -4px; /* Disesuaikan dengan ukuran baru */
   }
   
   @keyframes beat {
       0%, 100% {
           transform: scale(1) rotate(45deg);
       }
       50% {
           transform: scale(1.2) rotate(45deg);
       }
   }

5. Jika sudah cari kode yang mengarah ke credit atau footer teks kalian, kemudian masukkan kode pemanggil ini di dalamnya

   Made with <span class="heart"></span> by AnalisWinter

6. Jika sudak pilih Simpan tema

Cara Membuat Made With Love Berdetak di WordPress

1. Buka WordPress kalian

2. Kemjudian pilih menu Tampilan, pilih CSS Tambahan, kemudian masukkan kode ini di dalamnya

.heart {
    display: inline-block;
    width: 8px; /* Ukuran diperkecil */
    height: 8px; /* Ukuran diperkecil */
    background-color: red;
    position: relative;
    top: -1px; /* Menggeser sedikit ke atas lagi */
    margin: 0 3px; /* Menambahkan ruang di sekitar ikon hati */
    transform: rotate(45deg);
    animation: beat 1s infinite;
}

.heart::before,
.heart::after {
    content: "";
    width: 8px; /* Ukuran diperkecil */
    height: 8px; /* Ukuran diperkecil */
    background-color: red;
    border-radius: 50%;
    position: absolute;
}

.heart::before {
    top: -4px; /* Disesuaikan dengan ukuran baru */
    left: 0;
}

.heart::after {
    top: 0;
    left: -4px; /* Disesuaikan dengan ukuran baru */
}

@keyframes beat {
    0%, 100% {
        transform: scale(1) rotate(45deg);
    }
    50% {
        transform: scale(1.2) rotate(45deg);
    }
}

3. Jika sudah pilih telah Terbit

4. Kemudian letakkan kode pemanggil ini pada footer Tema kalian

Made with <span class="heart"></span> by AnalisWinter

DEMO

Itulah tadi cara membuat made with dengan icon love berdetak pada blogger dan wordpress. Semoga artikel singkat dari analiswinter.com ini dapat bermanfaat untuk mempercantik tampilan website, terimakasih.