CARA MEMBUAT THUMBNAIL BERGERAK
CARA MEMBUAT THUMBNAIL BERGERAK – Bagaimana cara menampilkan animasi thumbnail bergerak ketika mouse diarahkan pada gambar tersebut. Sangat mudah sekali kamu hanya perlu menambahkan beberapa baris script css transform pada image tersebut. Tambahkan atribut itu pada .divclass img { css transform}. Pada bagian divclass bisa diganti dengan apa saja menyesuaikan template blogger kamu.
 |
| cara membuat thumbnail bergerak |
CARA MEMBUAT THUMBNAIL POPULAR POST BERGERAK
Mungkin tampilan seperti ini sudah umum dipasang pada thumbnail polular post terbaru yang menampilkan gambar image memutar. Langsung saja berikut ini script cssnya
.guling {float:left;
padding:0px 10px 5px 0px;}
.guling img{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
transition:all .3s ease;
border:2px solid #fff;
padding:0}
.guling img:hover{
border:2px solid #fff;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg)}
TUTORIAL MEMBUAT THUMBNAIL BERGERAK
1. Masuk dashboard > Template > Edit HTML > Proceed
2. Masukkan kode css diatas bersama css template blogger lainnya
3. Sebagai pilihan kamu bisa mengedit waktu transform .3s dan rotasi -360deg sesuai selera
4. Kamu langsung bisa memakai css tersebut dengan menggunakan tag html
<div class='guling'><img src='url_image'/></div>
atau memasang kode css ini didekat div yang tertempel gambar tersebut, tinggal mengganti .guling menjadi .sidebar atau #sidebar (cuma sebagai contoh)
Cukup sekian tutorial CARA MEMBUAT THUMBNAIL BERGERAK ini semoga bisa berguna untuk mempercantik tampilan blog kamu. Kalo yang masih bingung bisa bertanya di kolom komentar dibawah ini. Demo bisa dilihat pada menu related post diatas.
