Membuat Tampilan Gambar Profile Blog Penuh Gaya

Askum all..!!!
Sesuai judul di atas ,b-arjem akan mencoba menjelaskan bagaimana cara membuat gambar profile blog penuh gaya , yang di maksud dengan penuh gaya adalah saat cursor berada di atas  gambar profile maka gambar akan bergeser ke kanan lalu jatuh dan berputar, begitu juga saat cursor menjauh maka gambar akan bergeser ke kiri lalu naik dan berputar, untuk lebih jelasnya arahkan cursor sobat pada gambar profile blog ini,

Bagi sobat yang ingin mencobanya silahkan ikuti tutorial berikut ini

1. Login ke blog sobat tentunya
2. Masuk dasboard klik panah kebawah pilih template lalu klik Edit HTML
3. Cari kode ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
4. Copy  kode di bawah ini & pastekan tepat di atas kode ]]></b:skin>  

.profile-img{
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
}
.profile-img:hover {
left: 100px;
top: 100px;
background: red;
-webkit-transform: rotate(360deg);
}

    5. Terahir save/simpan template & lihat hasilnya

.more.

Cara Membuat Tampilan Gambar Post Lebih Cantik

Pada kesempatan kali ini arjem akan mencoba menjelaskan bagaimana membuat tampilan gambar pada artikel/post menjadi lebih cantik dengan effect transparent sebelum di sorot kursor namun setelah kursor berada di atasnya  gambar menjadi terang  dan berlahan berubah bentuk, gimana penasan kan..?? heheheh, silahkan arahkan panah pada gambar di bawah ini:

Ok untuk menerapkannya ikuti langkah-langkah berikut ini

1. Login / sasuk ke blog sobat
2. Plih rancangan Edit HTML
3. Kemudian cari kode ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
4. Setelah ketemu copy kode di bawah ini dan pastekan tepat di atas kode ]]></:bskin>

.post img{max-width:auto;}
.post img dd{float:center;margin:0;margin-top:8px;background:none;display:block;}
.post img{border-radius:30px 0 30px 0;-moz-border-radius:30px 0 30px 0;-webkit-border-radius:30px 0 30px 0;-o-border-radius:30px 0 30px 0;float:center;opacity:0.5;filter:alpha(opacity=70);background:none;border:2px solid #000ddd;border-bottom:2px solid #444;border-right:2px solid #333;padding:3px;margin:1px;transition:all 0.5s;
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
.post img:hover{cursor:move;-moz-transform:scale(1.1) rotate(-0deg);-webkit-transform:scale(1.1) rotate(-0deg);-o-transform:scale(1.1) rotate(-0deg);-ms-transform:scale(1.1) rotate(-0deg);transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:2.2;border:2px solid #ccc;border-right:2px solid #000ddd;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);border-bottom:2px solid #0274be;box-shadow:1px 1px 5px #0274be}
.post img ul{padding:0;overflow:none;margin:0
}

1. Yang terahir save template dan klihat hasilnya ( semoga bermanfaat )

.more.