Paa kabar sobat bloggers, pada kesempatan kali ini AM akan share script pamungkas untuk resize image gambar blogger secara otomatis.
Mungkin ada yang bertanya, apa manfaat script resize image ini?
Manfaatnya cukup banyak, diantaranya:
- Meresize seluruh gambar postingan secara otomatis.
- Gambar tidak akan berubah kualitas, alias tidak kabur.
- Sangat cocok untuk blog SEO Friendly
- Sangat baik untuk Blog Gallery foto.
- Gambar blog post jadi teratur dan enak dilihat.
Letakkan script dibawah ini tepat diatas code </head>
Tekan (Crrl+f) untuk mencari codenya.
Silahkan ganti code berwarna merah sesuai ukuran lebar gambar yang anda inginkan.
<!-- Script Andi AM - Resize Img Src Thumb V.2a -->
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
// the dimension of your content within the columns
var areawidth = $('#Blog1').width();
$('.post-body').find('img').each(function(n, image){
var image = $(image);
var height = image.attr('height');
var width = image.attr('width');
var newHeight = (height/width * areawidth).toFixed(0);
image.attr('width',480).attr('height',newHeight);
var greater = Math.max(480,newHeight);
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});
});
});
//]]></script>
<!-- Script Andi AM - Resize Img Src Thumb V.2a -->
Coba save template agan, apakah suda berhasil atau belum, kalau belum, silahkan tambahkan code script berikutnya dibawah ini dan letakkan di atas code </body>
Silahkan ganti code berwarna merah sesuai ukuran lebar gambar yang anda inginkan.
<!-- Script Andi AM - Resize Img Src Thumb V.2b -->
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" +
size + "-c");
image[i].width = size;
image[i].height = size;
}
} resizeThumb('Blog1', 480);
//]]>
</script>
<!-- Script Andi AM - Resize Img Src Thumb V.2b -->
Silahkan save template agan, dan coba lihat lagi asilnya, kalau masih belum berhasil maka ada beberapa kemungkinan kesalahan diantaranya:
- Script jquery template blog agan belum tersedia, solusinya copy script jquery dibawa ini (berwarna merah) tepat diatas code </head> seperti diatas.
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> - Kesalahan kedua bisajadi kedua script Resize image Andi AM V.2 diatas tidak dikenali oleh template blog agan, solusinya silahkan coba script resize image Andi AM V.3 atau V.4
- Jika masih belum ada perubahan, maka kemungkinan lainnya disebabkan oleh desain template agan yang didesain khusus oleh empunya, kejadian ini biasanya diderita oleh blog-blog yang dominan menggunakan CC3.
- Saran kami, sebaiknya anda tidak menggnakan template gratisan yang ada premiumnya, maksudnya template premium tapi juga tersedia versi free, tempalate macam ini biasanya sangat berantakan dan css tidak beraturan, bahkan banyak ecode dan script terselubungnya.
Salam.
Andi AM
Artikel Terbaru!
Recent Posts Widget
