Advertisement
Tutorial Cara Membuat Gambar Otomatis Membesar Saat Diarahkan Cursor di blog sobat. Tutorial ini bisa langsung sobat praktekkan di blog sobat dimana tutorial ini memiliki 2 mamfaat bagi pengunjung blog sobat, yaitu :
=================================================================================
- Membuat Pengunjung jadi betah :)
- Visitor tidak perlu meng-klik gambar untuk memperbesar gambarnya.
tapi, pasti ada sisi kekurangannya yang mungkin sobat bisa memperbaiki dan membantu saya dalam hal ini..hehehe... sudah 2 hari saya mencari informasi kesalahan ini tapi belum menemukan titik terang. kekurangannya adalah tampilan gambar atau foto di Read More tidak memiliki ukuran yang sama baik itu ukuran lebar maupun ukuran tinggi.
Untuk memasang fitur ini, sobat blogger tidak membutuhkan kode JavaScript tapi yang dibutuhkan adalah kode CSS. Apakah harus edit template untuk memasang fitur ini? Tidak, sobat blogger cukup memasukkan kode CSS yang sudah saya siapkan melalui Blogger Designer Template.
Cara Membuat Gambar Membesar Otomatis Saat Diarahkan Cursor
- Sign In di blogger.com
- Pada Menu drop down, pilih template
- Klik tombol Costumize untuk menuju laman Blogger Designer Template
- Klik Advance dan copy paste kode berikut pada kolom yang tersedia
.post img, table.tr-caption-container { border:none; max-width:560px; 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: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
- Klik tombol Apply to blog.
Untuk melihat hasilnya silahkan refresh blog sobat, bagaimana hasilnya? semoga bermamfaat ya tutorialsnya.
Salam Bloggers,
Found an article helpful? Donate via Paypal
Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
<strong></strong>
or<b></b>
.<em></em>
or<i></i>
.<u></u>
.<strike></strike>
.<code></code>
or<pre></pre>
or<pre><code></code></pre>
, and please parse the code in the parser box below.