Membuat Effect Gambar di Blog

Agar sebuah blog tidak sepi pengunjung, maka diperlukan sesuatu yang baru dan lebih atraktif! kira-kira jika yang saya maksudkan demikian, apakah anda setuju ?

Jika anda menjawab BELUM TENTU, silahkan click spoiler dibawah ini.

Answer

100% SALAH

Jika jawaban anda SEPAKAT, click spoiler dibawah ini

Answer

Karena jawaban anda, SEPAKAT maka untuk membuat blog lebih menarik, ada tips bagus tentang MENAMBAHKAN EFFECT PADA GAMBAR POSTINGAN DI BLOG

Menambahkan effect pada gambar di blog menurut pendapat saya cukup menarik perhatian para pengunjung. Hal ini memang belum terbukti di blog saya heheehehe.... tapi yang terpenting adalah Thema blog saya ini bertujuan untuk saling sharing dan berbagi inspirasi seputar dunia blogging.

Now, kita langsung saja ke Tempat Kejadian Perkara.
Di weblog saya ini, beberapa tampilan gambar postingan menggunakan 2 (dua) effect & untuk mengetahuinya silahkan anda cari beberapa posts artikel saya di blog ini atau lihat yang dibawah ini :

Sekarang Metode Pembuatannya

EFFECT GAMBAR PERTAMA (Zoom Effect)

Masuk ke editor HTML Template, click Expand Template Widget, lalu cari kode  ]]></b:skin>
Letakan kode dibawah ini diatas kode ]]></b:skin>

.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}

.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Simpan Template Sobat!

Selanjutnya masuk, ke ruang Posts (tempat pembuatan postingan), upload gambar postingan sobat kemudian letakkan kode berikut ini diantara kode gambar yang sudah di upload tersebut

<div style="text-align: center;">
<div class="MBT-CSS3">

DATA GAMBAR YANG DI UPLOAD TADI

</div>

simpan postingan anda. tips pertama selesai.

EFFECT GAMBAR KEDUA (UP DOWN)

Masuk ke editor HTML Template, click Expand Template Widget, lalu cari kode  ]]></b:skin>
Letakan kode dibawah ini diatas kode ]]></b:skin>

.gobump img{
border: 5px solid #EC1414;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}

.gobump img:hover {
margin-top: 2px;
}

Simpan Template Sobat!

Selanjutnya masuk, ke ruang Posts (tempat pembuatan postingan), upload gambar postingan sobat kemudian letakkan kode berikut ini diantara kode gambar yang sudah di upload tersebut.

class="gobump"

contoh kode gambar yang di upload pada postingan anda

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-j8joIJcfqI8/TcaknpS_AjI/AAAAAAAAAIE/R-J1OleuTJE/s1600/fb+2.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-j8joIJcfqI8/TcaknpS_AjI/AAAAAAAAAIE/R-J1OleuTJE/s1600/fb+2.JPG" /></a></div>

Hasil setelah di masukan kode class="gobump"

<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="http://4.bp.blogspot.com/-j8joIJcfqI8/TcaknpS_AjI/AAAAAAAAAIE/R-J1OleuTJE/s1600/fb+2.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-j8joIJcfqI8/TcaknpS_AjI/AAAAAAAAAIE/R-J1OleuTJE/s1600/fb+2.JPG" /></a></div>

Selesai dan lihat hasil tampilan effect gambar di blog anda.!


Untuk effect seperti gambar dibawah ini, kapan-kapan akan saya tulis di blog ini