For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat loading animasi pada thumbnail di blogger

Hello sobat IcloudZer Pada kesempatan kali ini pula saya akan memberikan Informasi Mengenai bagaiman Cara membuat Preloader atau Loading Animasi Keren Pada Thumbnail gambar Terbaru

Nah bagi kamu yang sedang mencari informasi seperti Judul diatas, maka anda memasuki Laman page yang tepat, sebelum kita masuk ke tahap pemasangan saya akan menjelaskan tentang Preloader Animasi pada Thumbnail gambar pada situs blog

Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Penjelasan

Maka ketika anda menerapkan nya, maka tampilan utama dari situs blog anda yaitu ketika sebelum menampilkan gambar Thumbnail nya maka Preloader Animasi nya akan muncul

Notif : Artikel saya Kali ini dibuat ketika saya menjumpai sebuah situs blog dengan Thumbnail gambar pada situs blog tersebut bisa menampilkan preloader Animasi bergerak ketika belum sepenuhnya memuat gambar

Contoh Tampilan

Maka saya pun mencari informasi mengenai Preloader, saya gak tahu apa nama Fitur yang satu ini Tetapi saya mencari di pencarian google dengan kata kunci " Cara membuat Preloader Animasi pada Thumnail blog " saya pun belum menemukan Informasi yang benar benar work 100%

Apabila anda menerapkan script kode berikut pada situs blog anda, maka pada tampilan Mobile cara berikut benar benar work 100%, tetapi ketika menggunakan tampilan desktop thumbnail gambar berada pada posisi yang tidak seharusnya

Cara Penerapan

Tetapi untuk menambah pengetahuan kita semuanya kali ini saya akan memberikan informasi mengenai Bagaimana cara membuat Animasi preloader pada thumbnail tampilan Keren

  1. Login ke akun blogger anda
  2. Pergi ke Template dan kemudian pilih edit HTML
  3. Cari kode ]]></b:skin> kemudian letakkan kode CSS berikut tepat diatas nya

    .cssload-thecube {
     width: 80px;
     height: 80px;
     margin: 0 auto;
     margin-top: 50px;
     position: relative;
     transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    }
    .cssload-thecube .cssload-cube {
     position: relative;
     transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    }
    .cssload-thecube .cssload-cube {
     float: left;
     width: 50%;
     height: 50%;
     position: relative;
     transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    }
    .cssload-thecube .cssload-cube:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgb(26,115,232);
     animation: cssload-fold-thecube 2.76s infinite linear both;
    -o-animation: cssload-fold-thecube 2.76s infinite linear both;
    -ms-animation: cssload-fold-thecube 2.76s infinite linear both;
    -webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
    -moz-animation: cssload-fold-thecube 2.76s infinite linear both;
     transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    }
    .cssload-thecube .cssload-c2 {
     transform: scale(1.1) rotateZ(90deg);
    -o-transform: scale(1.1) rotateZ(90deg);
    -ms-transform: scale(1.1) rotateZ(90deg);
    -webkit-transform: scale(1.1) rotateZ(90deg);
    -moz-transform: scale(1.1) rotateZ(90deg);
    }
    .cssload-thecube .cssload-c3 {
     transform: scale(1.1) rotateZ(180deg);
    -o-transform: scale(1.1) rotateZ(180deg);
    -ms-transform: scale(1.1) rotateZ(180deg);
    -webkit-transform: scale(1.1) rotateZ(180deg);
    -moz-transform: scale(1.1) rotateZ(180deg);
    }
    .cssload-thecube .cssload-c4 {
     transform: scale(1.1) rotateZ(270deg);
    -o-transform: scale(1.1) rotateZ(270deg);
    -ms-transform: scale(1.1) rotateZ(270deg);
    -webkit-transform: scale(1.1) rotateZ(270deg);
    -moz-transform: scale(1.1) rotateZ(270deg);
    }
    .cssload-thecube .cssload-c2:before {
     animation-delay: 0.35s;
    -o-animation-delay: 0.35s;
    -ms-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
    -moz-animation-delay: 0.35s;
    }
    .cssload-thecube .cssload-c3:before {
     animation-delay: 0.69s;
    -o-animation-delay: 0.69s;
    -ms-animation-delay: 0.69s;
    -webkit-animation-delay: 0.69s;
    -moz-animation-delay: 0.69s;
    }
    .cssload-thecube .cssload-c4:before {
     animation-delay: 1.04s;
    -o-animation-delay: 1.04s;
    -ms-animation-delay: 1.04s;
    -webkit-animation-delay: 1.04s;
    -moz-animation-delay: 1.04s;
    }
    @keyframes cssload-fold-thecube {
     0%, 10% {
    transform: perspective(136px) rotateX(-180deg);
    opacity: 0;
     }
     25%,
    75% {
    transform: perspective(136px) rotateX(0deg);
    opacity: 1;
     }
     90%,
    100% {
    transform: perspective(136px) rotateY(180deg);
    opacity: 0;
     }
    }
    @-o-keyframes cssload-fold-thecube {
     0%, 10% {
    -o-transform: perspective(136px) rotateX(-180deg);
    opacity: 0;
     }
     25%,
    75% {
    -o-transform: perspective(136px) rotateX(0deg);
    opacity: 1;
     }
     90%,
    100% {
    -o-transform: perspective(136px) rotateY(180deg);
    opacity: 0;
     }
    }
    @-ms-keyframes cssload-fold-thecube {
     0%, 10% {
    -ms-transform: perspective(136px) rotateX(-180deg);
    opacity: 0;
     }
     25%,
    75% {
    -ms-transform: perspective(136px) rotateX(0deg);
    opacity: 1;
     }
     90%,
    100% {
    -ms-transform: perspective(136px) rotateY(180deg);
    opacity: 0;
     }
    }
    @-webkit-keyframes cssload-fold-thecube {
     0%, 10% {
    -webkit-transform: perspective(136px) rotateX(-180deg);
    opacity: 0;
     }
     25%,
    75% {
    -webkit-transform: perspective(136px) rotateX(0deg);
    opacity: 1;
     }
     90%,
    100% {
    -webkit-transform: perspective(136px) rotateY(180deg);
    opacity: 0;
     }
    }
    @-moz-keyframes cssload-fold-thecube {
     0%, 10% {
    -moz-transform: perspective(136px) rotateX(-180deg);
    opacity: 0;
     }
     25%,
    75% {
    -moz-transform: perspective(136px) rotateX(0deg);
    opacity: 1;
     }
     90%,
    100% {
    -moz-transform: perspective(136px) rotateY(180deg);
    opacity: 0;
     }
    }
  4. Kemudian cari lagi kode seperti dibawah ini
<div class='img-thumbnail'> <!-- thumbnail -->
<b:if cond='data:post.firstImageUrl'>
 <a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
 </a>
<b:elseif cond='data:post.thumbnailUrl'/>
 <a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
 </a>
<b:else/>
 <a expr:href='data:post.url'><img class='lazy' data-src='' expr:alt='data:post.title' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
 </a>
</b:if>
</div>

Karena setiap Template berbeda beda, kamu bisa mencari kode yang serupa atau menyerupai kode diatas

  • Jika sudah ganti kode diatas dengan kode dibawah ini
  • <div class='img-thumbnail'> <!-- thumbnail -->
    <b:if cond='data:post.firstImageUrl'><div class='cssload-thecube'>
     <div class='cssload-cube cssload-c1'/>
     <div class='cssload-cube cssload-c2'/>
     <div class='cssload-cube cssload-c4'/>
     <div class='cssload-cube cssload-c3'/>
    </div>
     <a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
     </a>
    <b:elseif cond='data:post.thumbnailUrl'/>
     <a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
     </a>
    <b:else/>
    <a expr:href='data:post.url'><img class='lazy' data-src='' expr:alt='data:post.title' expr:title='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
     </a>
    </b:if>
    </div>

    Info: Jika sudah simpan template dan lihat bagaimana hasilnya

    Begitulah sobat jika saya menemukan cara baru untuk memperbagus lagi tampilan pada mode desktop saya akan terus mengupdate nya untuk anda, Terimakasih atas perhatiannya

    About the Author

    Keindahanmu akan kuabadikan disetiap karyaku.

    Post a Comment

    Menghasilkan uang melalui survei berbayar
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.