Please follow the steps
1. Go to your Google+ account settings. Scroll down to Photos & Videos and tick “Upload my photos at full size”.
2. In Blogger go to Template > Customize. Then head to Advanced and scroll down to Add CSS. Add this code:
A. If you want to post full size image use this code
B. If you want to Post in particular pixel use this code .
Click Apply to Blog and then go to << Back to Blogger.
3. Next go to Template > Edit HTML. Find </head> and above it add this code:
But it will be bang on when you view it on your site as the code is referencing the original image
1. Go to your Google+ account settings. Scroll down to Photos & Videos and tick “Upload my photos at full size”.
2. In Blogger go to Template > Customize. Then head to Advanced and scroll down to Add CSS. Add this code:
A. If you want to post full size image use this code
.post-body img {width:100%;height:100%;display: block;}
B. If you want to Post in particular pixel use this code .
.post-body img {
width: 500px;
height: auto;
}
.post table.tr-caption-container img {
width: 500px;
height: auto;
}
Click Apply to Blog and then go to << Back to Blogger.
3. Next go to Template > Edit HTML. Find </head> and above it add this code:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
$('div[class="post-body entry-content"]').find('img').each(function(n,image){
// rewrite the source url to use BlogStomp’s original size.
$(image).attr({src : $(image).attr('src').replace(/s\B\d{3,4}/,'s0')});
// remove any hard set width or height setting
$(image).attr('width',null);
$(image).attr('height',null);
});
});
//]]>
</script>
4. Click Save Template. Now you’re good to go!!
FYI, when you do a post from BlogStomp it will turn out looking not right when you look at the post in Edit mode.
Thanks. Hope you will enjoy it
PS. Thanks very much to stompsoftware
No comments:
Post a Comment