Posts
Normally When you upload a picture/image at Blogger, a small sized (re-sized) picture (thumbnail) is displayed in your blogger post and you and your users have to click on that picture to see full size picture. This hack/trick will let you be able to Upload full size or any fixed size picture in you blog post. Normally
when you any HQ or Large Size picture in Blogger, it will be re-sized and would look like this. .
Above Shown picture is 560px × 275px while when i uploaded that picture, blogger re-sized the picture into small picture (400px x 196px) But When you will Use this trick the above upload picture will not be re-sized and the original size of the picture will be displayed in your Blog Post..
If you want to show the original size of your Uploaded Picture as i did above, just follow these steps.
First, Calculate what size of a picture you want to display on your blog (in majority of blogs its 560px in width) here we will go with 560px width so that all uploaded pictures who are larger than 560 pixels will be re sized to 560px in width and height will be set automatically. Follow these two steps.
Step# 1
- Login to Your Blogger Account
- On Your Dashboard, Click on Layout (see below shown picture for further assistance)
- Now Click on HTML (see below shown picture for further assistance)
- Now Search Below Given Code
]]></b:skin>
- Add this (below given) code Before above given code.
img {
max-width: 560px;width: expression(this.width > 560 ? 560: true);
}
- Please Check if the img{ already exist in your template. If exists then simply add above given blue colored lines after img{
- Save Your Template
- Step# 1 is completed.
STEP 2
Now, When you Upload any picture in blogger, Just click on Edit HTML tab and you will see a code of you uploaded picture which would like this:<a onblur=”try {parent.deselectBloggerImageGracefully();} catch(e) {}” href=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZw-z2ioggMo7bZU1qt3unGjsMJAZ1IgLNm2wSc9xtTe2ILqcsvTGcEUGj_nXESHOdE8c70ofnntxx2ofO6xbJT21WBjHKbHMXVfAKqd7NZ7o_aCtmAXPlt0a3AfEqtervhvg8Po2dA-sj/s1600-h/Picture.jpg”><img style=”margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 196px;” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZw-z2ioggMo7bZU1qt3unGjsMJAZ1IgLNm2wSc9xtTe2ILqcsvTGcEUGj_nXESHOdE8c70ofnntxx2ofO6xbJT21WBjHKbHMXVfAKqd7NZ7o_aCtmAXPlt0a3AfEqtervhvg8Po2dA-sj/s400/Picture.jpg” alt=”” id=”BLOGGER_PHOTO_ID_5379789676466610018″ border=”0″ /></a>
Above shown code is a re-sized form of your originally uploaded picture. Now, Just remove the code shown in blue color (width and height size can be different in your case). and replace s400 withs800.
- Step# 2 is Completed.
- That’s It!
No comments :