blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

post titles with thumbnails on blogger

Others prefer a minimal look to browse over the posts found on blogger archive, label and search pages. It's easier and faster to scan through the posts if they're listed as titles along their corresponding thumbnails. Thus, here is a tweak to show only post titles with thumbnails on blogger archive, label and search pages.


show post title with thumbnail on blogger

Post Title With Thumbnail Demo on:
Archive Page
Label Page
Search Page - Home Page Older Posts
Search Page - Archive Year
Post Summary Demo on:
Home Page
Full Post Demo on:
Static Page



This tweak is a combination of How to Add Read More with Thumbnails WITHOUT JAVASCRIPT on Blogger and How to Show Only Post Titles on Blogger Archive, Label, and Search Pages with a lil twist. So don't forget to back up your template!


Step 1. Show Post Titles AND Thumbnails on Blogger Archive, Label and Search Pages Only.
1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Search for <b:include data='post' name='post'/>.
4. Replace it with:

<!-- start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- end -->


show post title and thumbnail on blogger archive, label and search pages

THE TRICK.

<-- show on blogger archive, label and search pages only -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.url != data:blog.homepageUrl'> <b:if cond='data:blog.pageType != &quot;item&quot;'>

<-- show thumbnail -->

<b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if>

<-- show title -->

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<-- ELSE show full post -->

<b:else/> <b:include data='post' name='post'/> </b:if>


Step 2. Add the Thumbnail Code WITHOUT Javascript.
1. Search for <data:post.body />.
2. You'll see a block of codes similar to this. Highlight them.


<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if >


3. Replace the entire block of codes above with this new one:

<!-- start -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>
      <b:else/>
      <data:post.body/>
           <b:if cond='data:post.jumpLink != data:post.hasJumpLink'> 
              <div class='jump-link'>
                <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> 
                <data:post.jumpText/></a>
              </div>
           </b:if>
      </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<!-- end -->


how to add thumbnails without javascript on blogger


THE TRICK.

<-- show thumbnail -->

<b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if>

<-- show post summary -->

<b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> <data:post.jumpText/></a> </div> </b:if>

<-- ELSE show full post -->

<b:else/> <data:post.body/> </b:if>


Step 3. Add CSS.
1. Search for </b:skin>. You'll see a line similar to this:

]]></b:skin>


2. Above it, add these lines:

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}


Quick Description.
This is to wrap the post title around the thumbnail which in turn is aligned to the left. The image has a 10 pixel margin (right and bottom) from the text.

If you'd rather have the thumbnail on the right, you can change the codes to:

.thumb img {
  float: right;
  margin: 10px 0 0 10px;
}


3. Below </b:skin>, add these lines:

     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:blog.url != data:blog.homepageUrl'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <style>
          .post-outer {
          height: 100px;
          }
          h3.post-title {
          margin-top: 20px;
          }
        </style>
    </b:if>
    </b:if>
    </b:if>


Quick Description.
This is a conditional CSS property that will adjust the height to accomodate the thumbnail and vertically center the title to the image, on specific pages (i.e. blogger archive, label and search pages). See how it looks like if there is no conditional CSS property:

center thumbnail and post title vertically

You can change the height and align the title vertically by changing the highlighted values.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:blog.url != data:blog.homepageUrl'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <style>
          .post-outer {
          height: 100px;
          }
          h3.post-title {
          margin-top: 20px;
          }
        </style>
    </b:if>
    </b:if>
    </b:if>


4. SAVE TEMPLATE.

how to align post title and thumbnail on blogger


Other "Read More" Tweaks.
3 ways to add "read more" on blogger
customize "read more" on blogger
2 ways to add read more with thumbnails on blogger
show only post titles on blogger homepage
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 22 Shared Thoughts >>


Ravi Jindal
December 23, 2011 at 10:37 AM

This is not working in my blog. Please help me out.

Anonymous
December 24, 2011 at 4:51 AM

Just tried this and it worked for me even having recently upgraded to one of the new Blogger templates. Only issue I'm having is the text is placed under the image instead of centered to the right of it. I will have to do some tweaking to see how to fix that... ~Minai

Drake Danaviir L. Cataluña
January 18, 2012 at 3:03 AM

This is not working on my blog:
http://www.drakieness.com/search/label/Hobbies%20And%20Lifestyle

Please take a look... thanks

Unknown
February 12, 2012 at 9:27 PM

Thanks for the code! I'm having a similar issue as Minai ... the text is under the image instead of beside it. Any suggestion on how to tweak it? Thanks!

Catherine Lynch
March 16, 2012 at 9:53 PM

If you do

h3.post-title {
margin-top: -45px;
margin-left: 80px; }

it should line up on the side.

Catherine Lynch
March 17, 2012 at 11:09 AM

I have already implemented another code where you are supposed to add Step 2. How can I add this in too, without it screwing up my posts?

desirockers
March 18, 2012 at 1:20 PM

i want to change my static page's images(thumbnails) links of the images to POST links, pls help me out,
funnyhitz.blogspot.com

Unknown
May 4, 2012 at 10:22 PM

amazing post.. i want to try this to my other blog. I'll notify to my feedbacks. Thanks.

Cheers,
Marky

Unknown
May 4, 2012 at 10:40 PM

A big thanks to this post. I already implemented to my testing site here

http://testplugins.blogspot.com/search/label/GANDA%20GABI%20VICE

Admin
July 27, 2012 at 6:43 AM

plz help me , how to use this code for showing only post titles and image thumbnails on blogger homepage

Unknown
February 23, 2013 at 12:55 AM

Thank you very much for this great post. how to hide right side bar and other widgets in label pages?

Anonymous
March 16, 2013 at 12:33 AM

Good day! I could have sworn I've been to this
website before but after browsing through some of the post I
realized it's new to me. Anyhow, I'm definitely
delighted I found it and I'll be bookmarking and checking back often!



Also visit my webpage: View here

Anonymous
September 22, 2013 at 9:36 PM

This is a really well written post, very good! I think this is one of that Posts that comes along very rarely. It's so unique, just awesome! Thanks for sharing this with us!
website design

Signe
November 13, 2014 at 11:33 AM
This comment has been removed by the author.
Signe
November 13, 2014 at 11:34 AM

How can you decrease the font size of the titles? They are way too large! /Signe

Anonymous
November 23, 2014 at 9:47 AM

this is not working http://www.clubsideeffects.com/

Masud Rana
February 20, 2017 at 6:42 PM
This comment has been removed by the author.
Unknown
June 19, 2017 at 3:30 AM

Really a wonderful post. It gives brief information about post titles with thumbnails on blogger

eNasyid
April 2, 2018 at 3:27 PM

how i want to make the thum image more bigger then 10x? what code should be change

Magistral699
January 25, 2022 at 12:59 AM

One of the advantages of IPTV is its capability to get easily integrated with other IP-based services such as VOIP or high-speed internet. The company iptv subscription provides you a great support with re-selling plan, compatibility, server stability and like iptv m3u subscription , many other interesting features just with a good, satisfying and reasonable price.

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.