Post design is always the significant key to great viewers, how you add written text, pictures and video clips to your content really issues, their dimension, shades and everything relies on your imagination. So the one factor you can do is to get your pictures in high excellent so that when ever a personal comes to analysis your content he should be meets with you post design so I have posted on how you can create your picture fit to your blog’s dimension using CSS, so using this css technique you can instantly create every picture fir in your blog’s dimension so if the picture is too large than your blog’s dimension it will be still kept in the advantage while keeping its overall measurements.
But many persons asked for me that if I can offer them with some program that can instantly create every picture fit to weblog dimension even if its little dimension and size, well I just discovered a program that can do exactly what you are looking for out. With this program included to your website every newest and mature content pictures will get 100% weblogs dimension that indicates automated picture resizing to the advantage, so if you have some small pictures then they will also get extended to the 100% + every picture will get caption in their bottom with the alt written text you will add in them.
- Open Blogger > Template > Edit HTML
- Now press CTRL + F and find for and paste below code above it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[ $(document).ready(function(){ var areawidth = $('#Blog1').width();
//$('.sidebar').find('.clear').each(function(n, layer){ //var layer = $(layer);
//if (layer.css('clear') == "both") layer.css('clear','none');
//});
$('#Blog1').find('div').each(function(n, layer){ var layer = $(layer);
if (layer.css('clear') == "both") layer.css('clear','none');
});
$('.post-body').find('img').each(function(n, image){ var image = $(image);
alt = image.attr('alt');
id = image.index();
imageAltId = 'imagealt'+n;
var originalWidth = image.width();
var originalHeight = image.height();
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + 1200)});
image.attr('width',areawidth);
//var newHeight = (originalHeight/originalWidth * areawidth).toFixed(0);
image.attr('height','auto');
image.css('height','auto').css('float','none').css('margin','0');
image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
image.parent().addClass('postImage');
image.parent().parent().css('clear','none');
if (alt) {
image.after($('<div>').css('padding','5px 5px 8px 5px').css('background-color','#ffffff').css('opacity','0.6').css('filter','alpha(opacity=60)').attr('id',imageAltId).text(alt));
var divHeight = $('#'+imageAltId).height() + 13;
$('#'+imageAltId).css('margin-top','-'+divHeight+'px');
}
});
});
// the following values are in milliseconds
var speedOut = 2200;
var speedIn = 2200;
var pauseShow = 6000;
function goSlideshow(imageDestination, captionDestination, picasaEmail, picasaAlbum, picasaResults, picasaDimension){
var url = 'http://picasaweb.google.com/data/feed/api/user/' + picasaEmail + '/album/' + picasaAlbum + '?kind=photo&imgmax=' + picasaDimension + '&max-results=' + picasaResults + '&alt=json';
($.getJSON(url, 'callback=?')).success(function(data){
var slides = new Array();
var captions = new Array();
var heights = new Array();
var widths = new Array();
$(data.feed.entry).each(function(i, entry){
slides[i] = entry.content.src;
captions[i] = entry.summary.$t;
heights[i] = entry.gphoto$height.$t;
widths[i] = entry.gphoto$width.$t;
});
if(slides){
var urlValue = 'url(' + slides[0] + ')';
if (heights[0] > widths[0]){
$(imageDestination).css('background-size','auto 100%');
} else $(imageDestination).css('background-size','100% auto');
$(captionDestination).text(captions[0]);
$(imageDestination).css('background-image',urlValue);
var counter = 1;
window.setInterval(function(){
if (counter >= slides.length) counter = 0;
$(imageDestination).fadeOut(speedOut,function(){
var urlValue = 'url(' + slides[counter] + ')';
$(imageDestination).css('background-image',urlValue);
$(captionDestination).text(captions[counter]);
if (heights[counter] > widths[counter]){
$(imageDestination).css('background-size','auto 100%');
} else $(imageDestination).css('background-size','100% auto');
$(imageDestination).fadeIn(speedIn);
counter++;
}
);
},pauseShow);
}
}).error(function(data){
console.log('error getting feed data');
});
}
//]]></script>
<script type='text/javascript'>//<![CDATA[ $(document).ready(function(){ var areawidth = $('#Blog1').width();
//$('.sidebar').find('.clear').each(function(n, layer){ //var layer = $(layer);
//if (layer.css('clear') == "both") layer.css('clear','none');
//});
$('#Blog1').find('div').each(function(n, layer){ var layer = $(layer);
if (layer.css('clear') == "both") layer.css('clear','none');
});
$('.post-body').find('img').each(function(n, image){ var image = $(image);
alt = image.attr('alt');
id = image.index();
imageAltId = 'imagealt'+n;
var originalWidth = image.width();
var originalHeight = image.height();
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + 1200)});
image.attr('width',areawidth);
//var newHeight = (originalHeight/originalWidth * areawidth).toFixed(0);
image.attr('height','auto');
image.css('height','auto').css('float','none').css('margin','0');
image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
image.parent().addClass('postImage');
image.parent().parent().css('clear','none');
if (alt) {
image.after($('<div>').css('padding','5px 5px 8px 5px').css('background-color','#ffffff').css('opacity','0.6').css('filter','alpha(opacity=60)').attr('id',imageAltId).text(alt));
var divHeight = $('#'+imageAltId).height() + 13;
$('#'+imageAltId).css('margin-top','-'+divHeight+'px');
}
});
});
// the following values are in milliseconds
var speedOut = 2200;
var speedIn = 2200;
var pauseShow = 6000;
function goSlideshow(imageDestination, captionDestination, picasaEmail, picasaAlbum, picasaResults, picasaDimension){
var url = 'http://picasaweb.google.com/data/feed/api/user/' + picasaEmail + '/album/' + picasaAlbum + '?kind=photo&imgmax=' + picasaDimension + '&max-results=' + picasaResults + '&alt=json';
($.getJSON(url, 'callback=?')).success(function(data){
var slides = new Array();
var captions = new Array();
var heights = new Array();
var widths = new Array();
$(data.feed.entry).each(function(i, entry){
slides[i] = entry.content.src;
captions[i] = entry.summary.$t;
heights[i] = entry.gphoto$height.$t;
widths[i] = entry.gphoto$width.$t;
});
if(slides){
var urlValue = 'url(' + slides[0] + ')';
if (heights[0] > widths[0]){
$(imageDestination).css('background-size','auto 100%');
} else $(imageDestination).css('background-size','100% auto');
$(captionDestination).text(captions[0]);
$(imageDestination).css('background-image',urlValue);
var counter = 1;
window.setInterval(function(){
if (counter >= slides.length) counter = 0;
$(imageDestination).fadeOut(speedOut,function(){
var urlValue = 'url(' + slides[counter] + ')';
$(imageDestination).css('background-image',urlValue);
$(captionDestination).text(captions[counter]);
if (heights[counter] > widths[counter]){
$(imageDestination).css('background-size','auto 100%');
} else $(imageDestination).css('background-size','100% auto');
$(imageDestination).fadeIn(speedIn);
counter++;
}
);
},pauseShow);
}
}).error(function(data){
console.log('error getting feed data');
});
}
//]]></script>
- Now if you have the red range revealing the jquery already in your website than there is no need to add it again so you can eliminate that range and then Preserve the Design.
- Now renew your website and see that every picture in your websites will be resized to complete blog’s dimension even if it is little in dimension.
REMEMBER Using this program on your blogger weblog can create your picture unclear as resizing them looses their overall excellent but still if you need to re-size every picture in your website to 100% that this is the greatest remedy.