Friday, November 2, 2012

Fit Post Titles in Snapshot Thumbnails in Blogger Dynamic View

Before
After
Lots of photo bloggers are annoyed by the fact that the post-tiles in Snapshot view are often clipped at the side. By default, only the first 4-5 words are visible, and the rest of them are kept hidden. Moreover, the titles need to share the space with the comment bubbles, which certainly isn't a encouraging factor for anyone who wants to use Snapshot view. Let's change this, shall we?

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.snapshot .item.comments .title {
left: 5px;
right: 5px;
font-size: 14px;
text-wrap: normal !important;
white-space: normal !important;
overflow: visible !important;
}
.snapshot #content .item h3.title{
bottom: 5px;
height: auto;
}
  
.snapshot .item .comments-count {
bottom: 220px;
}
This tweak should allow titles within 10-12 words to be visible. If your average titles are longer than this, feel free to bring the title font-size down to fit in more words, by adjusting line 4.
You might also like:



Posted by at
Labels:
Location: United Kingdom

3 comments:

  1. MaritzaJuly 8, 2014 at 9:16 PM

    This comment has been removed by the author.

    ReplyDelete
  2. RachelNovember 8, 2017 at 2:40 PM

    Awesome! Thanks!

    I made a couple of changes to vertically center the text, so that one-line titles still look the same as they did before this tweak was applied, and so that three-line titles don't run off the bottom of the thumbnail:

    .snapshot .item.comments .title {
    left: 5px;
    right: 5px;
    white-space: normal !important;
    }
    .snapshot #content .item h3.title{
    bottom: 5px;
    height: auto;
    max-height: 2.25em;
    overflow: hidden;
    padding-bottom: .5em;
    }
    .snapshot .item .comments-count {
    bottom: 220px;
    }

    ReplyDelete
  3. Servant of Srila PrabhupadaMarch 11, 2019 at 11:27 PM

    Hey Sneha, can you help me bring the Header Bar a bit lower in Dynamic Template of Blogger and fit the Blogger Description between the blog title and header bar? Also, I want to add share buttons beside the blog title.

    ReplyDelete

Subscribe to: Post Comments (Atom)