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
- Login ke akun blogger anda
- Pergi ke Template dan kemudian pilih edit HTML
- 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; } } - 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, "300:200")' 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, "300:200")' 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
<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, "300:200")' 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, "300:200")' 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
