Pembaruan Terakhir (31-05-2023)
Mengapa contoh tampilan ngebug?

Karena admin memasang script kode komentar di dalam postingan blog sebagai contoh tampilan, menyebabkan bentrok antara script kode komentar dan script kode lainnya

Bagaimana menghapus credit ICloudice?

Credit ICloudice akan muncul saat komentar di sentuh, untuk menghilangkan nya silahkan inbox/dm admin secara pribadi

Saya ingin disertai profile?

Kami telah membuat artikel khusus mengenai cara membuat komentar custom popup menggunakan profile

Beranda
Blogger

Membuat loading animasi pada thumbnail di blogger

views

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

    Keindahanmu akan kuabadikan disetiap karyaku.

    Posting Komentar

    Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
    Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


    image video quote pre code
    © ‧ ICloudice.com . All rights reserved. Distributed by ICloudice.com
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    More Details
    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.