Post Larger Images in Blogspot Posts

Posted on 08. Aug, 2009 by a_usman in Blogging | 0 comments

blogger hacks

This is one of the most important and wanted hack for bloggers. Many bloggers want to post the images in larger size (HQ) but they can not do so because the image is automatically converted into thumbnail after uploading irrespective to image size.

But with this trick you can post the large pictures in the blogger posts. For example look at the picture on your right side. And after applying the hack it will be larger in size as shown below. Lets see how to perform this hack.

blogger hacks

HOW TO POST LARGE SIZED IMAGES IN BLOGGER POSTS:

  • First of all see how much space you have in the post body of your blogger template. For example in our blog it is (currently) about 570px.
  • Leave some space, say 20px,  for padding etc. Now the available size for image is about 550px.
  • Now, Go to Layout » Edit html and find this:

]]></b:skin>

  • Add these below lines before the above line:

img {
max-width: 550px;
width: expression(this.width > 550 ? 550: true);
}

  • Change the value of red number according to the layout and available space in your blogger template.
  • However if you already img{ tag in your template, then only add the below lines

    • max-width: 550px;
    width: expression(this.width > 550 ? 550: true);

    • Save the changes.
    • Now, while doing your posts, upload the images normally like you did previously. Once the image is uploaded, go to Edit html tab, and the image code will look something like this:

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

    • All you have to do is Just remove that bolded text (width and height attributes) and replace s400 to s800. So, the final code looks like this:

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

    • Now the image will be in large size.

    If you like this article and want to read the similar articles on your facebook wall, join Shoutpedia Facebook Fan Page or you can subscribe to our RSS Feeds to read the whole posts in your favourite reader.

    Related Articles:

    1. How to Embed facebook Video in Wordpress Blog without Plugin
    2. 10 Best Free Blogger Templates
    3. Read More…. now for bloggers
    4. Top Wordpress Plugins for Social Media
    5. How to Add Bing Translator to Your Site (Wordpress Blog)

    Tags: ,

    Leave a Reply

    « »