jQuery Auto Resize & Image Frame

Bismillah. Alhamdulillah. Berawal dari malasnya melakukan pengeditan style gambar yang disertakan pada Blogger, maka Blogger Tune-Up pun melakukan manipulasi style pada gambar yang diberikan secara default oleh Blogger. Pada saat kita mengunggah suatu file gambar pada artikel blog maka secara default Blogger memberikan style otomatis berupa lebar (width), tinggi (height), dan alamat thumbnail gambar dengan resolusi rendah. Hal ini terkadang membuat artikel justru kurang menarik dilihat dan kurang nyaman jika gambar yang ditampilkan memiliki kualitas rendah dengan ukuran tidak sesuai dengan lebar artikel. Berawal dari hal inilah kemudian Blogger Tune-Up membuat script jQuery Auto Resize & Image Frame untuk menyempurnakan style yang diberikan oleh Blogger, walaupun sebenarnya script ini bisa dipergunakan untuk pengguna non Blogger.

Demo jQuery Auto Resize & Image Frame

Fasilitas jQuery Auto Resize & Image Frame

• Otomatis mengganti link gambar berkualitas rendah (thumbnail image) dengan link gambar berkualitas tinggi sehingga gambar yang ditampilkan merupakan gambar berkualitas aslinya
• Ditambahkan frame (bingkai) otomatis pada gambar yang ditampilkan sehingga lebih menarik
• Melindungi link asli gambar dengan teknik overlay sehingga cocok bagi yang ingin melindungi gambarnya dari pembajakan
• Ukuran gambar yang ditampilkan akan selalu dalam ukuran tetap dengan lebar 572px dan tinggi 290px

Kekurangan jQuery Auto Resize & Image Frame

• Ukuran gambar tidak boleh kurang dari 572px x 290px agar frame (bingkai terisi penuh)
• Frame (bingkai) kaku, ukurannya tidak dapat berubah sesuai besar gambar sehingga bagi para blogger yang memiliki lebar area artikel kurang dari 570 bingkai ini akan keluar dari area artikel
• Bug berikutnya belum diketahui, laporkan bug pada komentar

Integrasi jQuery Auto Resize & Image Frame pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Rancangan - Edit HTML
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#boxoverlay {
margin:10px 0;
padding:0;
position:relative;
height:290px;
z-index:200;
}
#boxoverlay div {
width:572px;
height:290px;
border:1px solid #4f4f4f;
overflow:hidden;
left:8px;
position:absolute;
top:0;
z-index:209;
}
#boxoverlay span {
position:absolute;
top:-8px;
left:0;
z-index:210;
}
#boxoverlay img {
padding:0;
margin:0;
border:none;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode jQuery dibawah diatas kode pada langkah 5:

<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
//remove style and replace image with big resolution for blogger user
$('a.boxoverlay img').removeAttr('style').each(function () {
var img_src = $(this).attr('src').replace('s400', 's800');
$(this).attr('src', img_src);
});
//auto insert image box overlay
$('a.boxoverlay').each(function () {
$(this).wrap('<div id="boxoverlay"></div>');
$(this).parent().append('<span><img src="https://lh4.googleusercontent.com/-5Xi2yovn8hw/TiKoCKjBi6I/AAAAAAAABOo/BogbisWIruw/s800/overlay-image.png" alt="" /></span>');
$(this).wrap('<div></div>');
});
});
//]]></script>

Perhatian! Pastikan template anda sudah terintegrasi framework jQuery
Langkah 7
Simpan Template

Menyisipkan jQuery Auto Resize & Image Frame pada Gambar Artikel

Langkah 8
Buatlah sebuah artikel kemudian upload sebuah gambar pada artikel
Langkah 9
Pindahkan editor artikel pada mode Edit/HTML
Langkah 10
Cari kode gambar, misal seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPDQ-8bx44pTiROzj0EK9JLy_vVffjxvKJA3lAQVKjpLY11PSagTP1ZAkoklCYzaK8bIuBEBVl3hII3lIvkCJUi6wTWyTKBov3VCnG9UWXJjLr3OQ5kCLikjqbVmGELcHXwuAwHxP4d9J/s800/content_pic1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 700px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPDQ-8bx44pTiROzj0EK9JLy_vVffjxvKJA3lAQVKjpLY11PSagTP1ZAkoklCYzaK8bIuBEBVl3hII3lIvkCJUi6wTWyTKBov3VCnG9UWXJjLr3OQ5kCLikjqbVmGELcHXwuAwHxP4d9J/s800/content_pic1.jpg" border="0" alt="" />
</a>

Langkah 11
Sisipkan kode pada gambar, menjadi seperti dibawah ini (kode sisipan yang diblok):

<a class="boxoverlay" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPDQ-8bx44pTiROzj0EK9JLy_vVffjxvKJA3lAQVKjpLY11PSagTP1ZAkoklCYzaK8bIuBEBVl3hII3lIvkCJUi6wTWyTKBov3VCnG9UWXJjLr3OQ5kCLikjqbVmGELcHXwuAwHxP4d9J/s800/content_pic1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 700px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPDQ-8bx44pTiROzj0EK9JLy_vVffjxvKJA3lAQVKjpLY11PSagTP1ZAkoklCYzaK8bIuBEBVl3hII3lIvkCJUi6wTWyTKBov3VCnG9UWXJjLr3OQ5kCLikjqbVmGELcHXwuAwHxP4d9J/s800/content_pic1.jpg" border="0" alt="" />
</a>

Langkah 12
Terbitkan artikel

Unduh jQuery Auto Resize & Image Frame

Selamat mencoba dan semoga berhasil...