Cara Membuat Gambar Tumbnail di Home Page Blog Tidak Blur


Gambar ngeblur pada Tumbnail di halaman beranda blog tentu sudah tidak asing lagi bagi kalian yang masih pemula. Seperti biasanya cara mengatasi gambar halaman beranda blog tentu harus menggunakan javascrift dan jQuery. Memang menggunakan javascrift sangatlah mudah dan bisa otomatis membuat gambar tidak blur antara gambar tumbnail di halaman beranda dan postingan.

Membuat Gambar Tumbnail di Home Page Blog Tidak Blur
Cara Buat Tumbnail Blur dan Atur Resolusinya

Seperti contoh pada gambar di bawah ini, anda biasanya menyisipkan javascrift nya sebelum tag penutup (HEAD) :

Contoh Penerapan Javascrift Tumbnail di Head
Contoh Penerapan Javascrift di Head
Akan tetapi beberapa orang juga mengeluh karena menggunakan javascrift memang bisa membuat halaman blog lambat dalam memuat. Hal itu karena dengan menggunakan javascrift pada blog tentu bisa menambah kapasitas size template blog tersebut.

Umumnya blog anda pasti menggunakan fitur tumbnail gambar pada halaman beranda, dan juga pada halaman postingan blog. Cara ini sangat cocok untuk blog anda yang memang dengan cara di bawah ini kita bisa sedikit menyisipkan kode html juga bisa mengatur ukuran gambar nya sendiri sesuai kebutuhan atau selera.

Baca juga : Pengertian Metadata dan Kegunaannya.

Seperti pada umumnya, template blog anda pasti menggunakan kode html tumbnail halaman depan seperti di bawah :
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
</b:if>

Atau seperti berikut :
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>
</b:if>

Jika sudah anda cari di html template blog anda, silahkan ubahlah kode tersebut menjadi seperti di bawah ini :
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 300)'/></a>
</b:if>

Untuk mengatur sendiri ukuran atau resolusi gambar tumbnail, silahkan ubahlah angka 300 menjadi sesuai selera anda masing-masing. Dengan mengatur ukuran gambar di atas, anda tidak perlu mengatur ukuran widht dan height, karena akan secara otomatis gambar ukuran itu akan menerapkan pada kedua ukuran widht dan height.

Dan bukan masalah pada ukuran gambar tumbnail saja, akan tetapi pada kualitas ketajaman gambar atau resolusi nya juga akan secara otomatis di terapkan dengan baik (tidak ngeblur).

Demikian Cara Membuat Gambar Tumbnail di Home Page blog Tidak Blur. Semoga bermanfaat bagi anda yang sedang belajar dalam membuat blog. Sekian dan terima kasih.

No comments:

Sebelum menuliskan komentar, Anda harus baca syarat dibawah ini :
1. Tidak diperbolehkan menaruh link aktif,
2. Tidak boleh ada unsur huru hara dan pornograpi,
3. Jika membuat spam, komentar Anda akan dihapus, dan
4. Silahkan bertanya dan berbagi pikiran dengan kalimat yang baik dan membangun.

AK NEW SITE. Powered by Blogger.