• Translate
  • Translate
Please Wait...

3/05/2015

Cara Membuat Gambar Membesar Otomatis Saat Diarahkan Cursor

Tutorial Blogspot

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 :

=================================================================================
  1. Membuat Pengunjung jadi betah :)
  2. 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
Template Blogger
  • Klik tombol Costumize untuk menuju laman Blogger Designer Template
 customize template blogger
  •  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,

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments with live links & not appropriate topic will sign SPAM.

 
Loading...