Cara Membuat Gambar Membesar Otomatis Ketika Disentuh Mouse

Cara Membuat Gambar Membesar Otomatis Ketika Disentuh MOUSE di Blog:

1. Buka Blogger dan Login.

2. Masuk ke Option Template.

3. Pilih Edit HTML.

4. Tekan Ctrl + f lalu cari kode ]]></b:skin>.

5. Copy paste kode di bawah ini lalu letakkan di atas kode ]]></b:skin>.

.post img, table.tr-caption-container {
border:none;
max-width:auto;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

6. Klik Save dan cek blog Anda.

catatan:
"Angka (1.5) adalah angka pembesaran yang akan terjadi jika gambar di sentuh mouse. Anda bebas mengganti sesuka hati".

Read More

5 Border untuk Mempercantik Gambar Blog

Berikut Cinta Grafis berikan 5 Border untuk Mempercantik Gambar Blog. Anda masukkan salah satu kode CSS yg sudah dipilih sebelum/diatas kode ]]></b:skin>. 

Contoh:

Berikut kode CSS dan Screenshot masing-masing border...

Kode 1

.post-body img{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjj_M6W1NqiWMw63loqIwRl-di9Ju8sYLFytG8BMW7Adhyphenhyphen2YLGdXHEiQRxtULMQKPOoaW5RXJ9nU8-D-28nV6iIkPVpk1cSJydv0ffBK6JzEjjtgmbNF6RWW1EG9IEY9UGhUhudwFiwTp7/w4-h8-no/image-background.png) repeat scroll 0 0 transparent;padding: 7px;border: 1px solid #cecece;-moz-box-shadow: 0px 0px 5px #BBB;-webkit-box-shadow: 0px 0px 5px #BBB;box-shadow: 0px 0px 5px #BBB;}

Kode 2

.post-body img{border-top-width: 4px;border-bottom-width: 4px;border-top-style: double;border-bottom-style: double;border-top-color: #1ABC9C;border-bottom-color: #1ABC9C;padding: 8px 0px;} 

Kode 3

.post-body img{border: 1px solid #000000;padding: 5px;width: auto;background-color: #F389B4;}

Kode 4
.post-body img{border: 1px solid #888888;padding: 10px 10px 10px 10px;}


Kode 5

.post-body img{width: auto;padding: 0px 6px 6px 0px;background-color: #9FB2C1;border-top-width: 2px;border-right-width: 5px;border-bottom-width: 5px;border-left-width: 2px;border-style: solid;border-color: #082F70;}

Read More