Tuesday, February 23, 2016

Tips Blogger: Cara Membuat Efek Hover Dalam Gambar Pada Blog


Setiap blogger pasti memiliki tujuan yang sama ketika membuat konten. Membuat pembaca blog mereka betah berlama-lama berselancar di blog mereka. Jika Anda dapat menjaga mata pembaca blog Anda terus fokus pada konten Anda sampai mereka membaca seluruh artikel sampai selesai, maka Anda telah menemukan sebuah rahasia!

Tapi tidak banyak blogger dapat mengatakan dengan percaya diri, termasuk saya sendiri. Saya masih belajar semua trik di balik menciptakan konten yang super fantastis sehingga pembaca tidak bisa menolak untuk membaca sampai selesai, tapi saya sudah mengumpulkan beberapa tips di sepanjang perjalanan saya. Yang cukup menarik adalah, salah satu kiat yang dibutuhkan adalah tidak ada hubungannya dengan kalimat atau kata-kata pada suatu halaman, namun sesuatu yang berkaitan dengan gambar yang Anda tempatkan di antara kalimat tersebut.

Jika saya ditanya mengenai tips tentang cara membuat posting agar lebih menarik adalah, saya akan selalu mengatakan jika kualitas grafis merupakan suatu keharusan. Gambar dapat membuat tampilan blog menjadi eye-catching, dan menambah rasa profesionalisme untuk blog Anda. Lantas membuat gambar-gambar tersebut dapat memperindah tampilan blog anda? Di situlah efek hover berperan.

Cara Membuat Efek Hover Pada Gambar Di Dalam Blog

Saya tidak tahu pendapat Anda, tapi saya suka ketika sebuah blog memiliki efek hover ada dimana mana. Pada link, tab kategori, tombol media sosial, dan segala sesuatu yang dapat di klik. Dan untuk beberapa alasan saya merasa lebih cenderung untuk meng-klik sesuatu jika ia memiliki efek hover. Tidak terkecuali untuk Gambar, dan itulah mengapa hari ini saya akan menulis tentang Cara Untuk Menambahkan Efek Hover Pada Gambar Blog Anda.

Saya membuat dua tutorial yang berbeda untuk membuat ini, yang pertama ditujukan pada mereka yang memiliki pengetahuan coding atau ingin belajar tentang coding, dan yang kedua adalah untuk mereka yang tidak mau repot dengan coding.


METODE #1: NON CODING

1. Dari halaman Blogger blog Anda, pergi ke Template> Sesuaikan> Tingkat Lanjut> Tambahkan CSS

2. Paste kode berikut:

.post-body img {
opacity:1.0;
}
 
.post-body img:hover {
opacity:0.7;
}

3. Tekan Terapkan ke Blog Itu saja! Jika Anda ingin mengubah intensitas efek transparansi, ubah "0,7" menjadi antara 0 dan 1. "0" berarti gambar benar-benar transparan, dan "1" berarti gambar benar-benar buram/opaque.


METODE #2: CODING

  • Dari halaman Blogger blog Anda, pergi ke Template> Edit HTML
  • Cari "post-body img". Jika Anda tidak dapat menemukannya, tambahkan ".post-body img { }" dalam bagian  "Posts" pada CSS template Anda. CSS Template Anda adalah pada daerah antara <b:skin> dan ]]></b:skin>.
  • Diantara kurung kurawal, ketik opacity:1.0; ini akan memastikan bahwa ketika pada gambar tidak ada yang sedang melayang di atas, berarti gambar akan benar-benar buram.
  • Paste kode di bawah ini:
.post-body img:hover {
opacity:0.7;
}

  • Hal ini menciptakan efek hover. Jika Anda ingin mengubah intensitas efek, hanya cukup ubah "0,7" menjadi angka antara 0 dan 1. "0" berarti gambar benar-benar transparan, dan "1" berarti gambar benar-benar buram.
  • Dan kode akhir akan terlihat seperti ini:
.post-body img {
opacity:1.0;
}
 
.post-body img:hover {
opacity:0.7;
}

Jika Anda mahir dengan coding, Anda dapat mengambil tutorial dasar ini dan membuat gaya Anda sendiri dengan beberapa editan. Mungkin menambahkan border, atau text overlay!
Luangkan beberapa detik untuk melihat-lihat blog saya dan Anda akan melihat banyak hover di mana-mana.

BONUS

Dibawah ini saya update beberapa efek hover pada gambar, caranya masih seperti diatas tetapi pada efek-efek berikut ini saya rekomendasikan untuk menggunakan cara yang kedua yaitu pada Template> Edit HTML.

Pilih efek yang Anda inginkan kemudian pastekan CSS dibawah ini tepat diatas ]]></b:skin>
  • Efek opacity dan border radius kanan
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{opacity:.8;
border-top-right-radius:70px 20px;
-webkit-border-top-right-radius:70px 20px;
}
  • Efek hover top dan border radius kanan
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{
position:relative;
top: -10px;
border-bottom-right-radius:70px 20px;
}
  • Efek mengecil
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{
-webkit-transform: scale(0.4, 0.4);
-moz-transform: scale(0.4, 0.4);
-ms-transform: scale(0.4, 0.4);
-o-transform: scale(0.4, 0.4);
transform: scale(0.4, 0.4);
}
  • Efek melingkar
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{
border-radius:50%;
border: 4px solid #ECECEC;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
  • Efek rotasi dan bayangan
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{  transition: all 2s ease-in-out;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg); 
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg); 
transform:rotate(45deg);
z-index: 999;
box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75);
}

Jika efek diatas tersebut tidak bekerja, hapus bagian .post-body img:hover dan ganti dengan salah satu kode dari kelima kode diatas.

_Eof_


Emoticon Emoticon