Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, June 19, 2012

Justify Post Summary in Blogger Dynamic Views

Before
After

Post summaries are dynamically fetched and displayed in the front page in Magazine and Timeslide views. However, they are left-aligned by default, creating a rather messy effect. Here's how you can justify them and make them neat in one simple step.

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.
.entry-summary{
text-align: justify !important;
}

92 comments:

  1. Hey thanks for this!

    I would really like to make the space between of my photos smaller. I use Dynamic View classic

    janinastyle.blogspot.com

    ReplyDelete
    Replies
    1. Try this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .separator img{
      margin-bottom: -10px !important;
      }

      Cheers :)

      Delete
  2. wow! another one useful and simply awesome tutorial! thank you so much!

    ReplyDelete
  3. Perfect !
    Is there any way to define the number of characters in the post summary ?

    In my case, the whole post is coming !

    Thanks

    ReplyDelete
    Replies
    1. Hi Benji,

      We can't limit the number of characters, but I think I've tried setting a default height to the post-summary.. It went well but it wasn't very adaptive/dynamic - as in when a new post is published, the code needed to be adjusted..

      In any case, what's your blog's address?

      Delete
    2. Thx Yoga,

      This is a private travel blog and I'm keeping it out of Google search & Co.
      I am using the magazine template.

      I've add this to the CSS :

      .entry-summary{
      text-align: justify !important;
      height: 100px ;
      }

      But it only takes the text into account (the picture size is not changing). So I think I'm maybe looking for a way to determine the size of the different parts of the blog ie: the first with one post, the second with 4 posts, etc.)

      Thanks !
      Benji

      Delete
    3. Benji,

      It is not designed to change the picture size. It does what it says - justify the summary, nothing more. What kinda size are we talking about here? Gonna need a little more context, like what you're trying to do and so on.

      Delete
  4. Today we all are having problem with dynamic views template that is when we go to our dynamic view blog from opera browser without signing into blogger as a visitor. Our all the setting like baackground are rest . If i am wrong then please reply. I have browsed many blog

    ReplyDelete
    Replies
    1. What's your blog's address? And how does it look in other browsers?

      Delete
  5. How about the reverse, and making the posts themselves left aligned instead of justified?

    ReplyDelete
    Replies
    1. Hi Adam,

      The summaries in magazine view is left-aligned by default.

      Cheers :)

      Delete
    2. Sorry, maybe I wasn't clear - I mean the WHOLE post, after it's been opened in its lightbox.

      Delete
    3. Ah, I've got it!

      .article .article-content {
      text-align: left;
      }

      Delete
    4. Glad you're getting the hang of it :)

      Delete
  6. Me again ;) How can I make the Magazine page centred...

    ReplyDelete
    Replies
    1. Hi Birgitta,

      Gonna need a little more context. Centered as in, the font in the home page, or the whole blog, or something else in particular?

      Delete
  7. Ok, on the Magazine page the middle background is to much to the right. ... Sorry about my English...I am not so good to explain...

    ReplyDelete
    Replies
    1. Hi Birgitta,

      I see what you mean. Remove the following code from your 'Add CSS' box:

      .sidebar #content .article, .magazine #content{
      margin-right: 40px !important;
      }

      Remove these lines carefully. Remove just this, not a character more, not a character less :)

      Let me know if you'd like me to check and see if you've removed the code right.

      Delete
  8. Yes! You did it again Yoga :) I think you are fantastic! Thank you!

    ReplyDelete
  9. Thank you!
    Is there any way to place a flash player on the body? Or in some other part?

    ReplyDelete
    Replies
    1. Doubt it.. My previous attempt were unsuccessful. You could try to place your code in the HTML section of your post (Dashboard - Post - New Post - HTML), but usually it won't work.

      Cheers :)

      Delete
  10. Hello Yoga! First of all let me say your blog and its tips and tutorials has become my 'go to' source for all things Blogger DV related :o) I've actually opted to center the text for the summaries, as opposed to justifying it, but was hoping to do the same for the title otherwise it just looks odd... is there a way to do this? Many thanks, have a lovely Sunday and wishing you continued good luck in your post-grad dissertation :o)

    ReplyDelete
    Replies
    1. Hi Maria,

      I've graduated recently, faculty-top :) Thanks for your wishes..

      As for centering your text, try this, see if this is what you're looking for. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .magazine .title, .magazine .summary{
      text-align: center !important;
      }

      Cheers :)

      Delete
  11. You are an absolute star Yoga and I can confirm that this code works perfectly :o) Huge congrats on your academic success, I wish you even greater success in all your future endeavours, and many, many thanks for all the help you give so freely on your blog...

    ReplyDelete
    Replies
    1. That's sweet of you :) Thanks Maria, appreciate it :)

      Delete
  12. If I have the Simple Templet on Blogger how do I get a Post Summary on my blog besides using Jump Break? Is there a CSS?

    ReplyDelete
    Replies
    1. Simple template doesn't come with auto post summary. But you can easily install it. Here, refer to this link:

      http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html

      Delete
  13. Hi Yoga.
    Is there any way to remove the post summary ?
    Thanks.
    DM

    ReplyDelete
    Replies
    1. Hi DM,

      Are you referring to a Dynamic View template? If you remove the post summary, your post will be pretty much empty. Is that what you're going after? What's your blog's address anyway?

      Delete
  14. Hi Yoga,
    Is there any way to control the amount of characters/text shown in the post summary of a dynamic view? I'd like the text to fill up as much of the space next to the picture as possible or to put a "Read More" jump break in there to let readers know there is still more to the post. Currently, my post summaries seems to get cut off randomly.

    Thanks!

    ReplyDelete
    Replies
    1. Hi Kim,

      Unfortunately, there isn't a way to show the full text, as the template dynamically fetch this summary, and we have no way of controlling the parameters of the fetch.. However, we can add a 'Read More' text to the end of summary.. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .magazine .summary:after{
      content: ".. (Read More)" !important;
      color: red !important;
      }

      Cheers :)

      Delete
    2. Thanks so much! Worked like a charm :-)

      Delete
    3. It works nice! Thanks Yoga!

      Delete
  15. I have a list in my blog post and in the post summary, it appears side by side and jumbled. How can I get it to appear as a bulleted list in the post summary (vertical and one item below another) instead of right next to each other? Also when I applied to code to justify...it did not work.

    ReplyDelete
    Replies
    1. Hi EE,

      Let me have a look.. What's your blog's address?

      Delete
    2. My blog address is nightstandnovels.blogspot.com.

      Thanks for taking a look! of I changed my name from erotic escapism lol

      Delete
    3. Hi Kissyface,

      You're not using a Dynamic View template. The tutorial above is meant for dynamic view templates alone. You're using a non-dynamic template with a third party auto-summary widget. It appears that the author of your blog's template has made it to ignore any list in post text. That is why you're not seeing a list in your post summary. I'm afraid there isn't much I can do to tweak this third party feature. It is best to contact the author of your template and see if a possible fix is available. I'm sorry I couldn't be much more of a help.

      Cheers :)

      Delete
    4. Thanks do much for trying and responding!!! ;)

      Delete
  16. Hi !
    I'm creating a website to display my photography portfolio on blogger. I'm using magazine and I would like to know if there's a way to remove the summary to allow the picture of the most recent post to be centered.

    Thanks :) You're doing an excellent job here. I've already used many of your tutorials !

    ReplyDelete
    Replies
    1. Hi Anouk,

      Thanks! And here's the custom code that you asked for. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .magazine #lead .story {
      display: none !important;
      }
      .magazine #lead .item img.thumbnail{
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      Let me know how it goes...
      Cheers :)

      Delete
  17. is there a way to add a 'read more' type button or link in the post summaries in magazine view. sometimes it isnt obvious to visitors that there is more text after the summary text.

    The alternative would be to not have a summary but the whole post


    take a look at takingpartinaclinicaltrial.blogspot.com


    ReplyDelete
    Replies
    1. Hi there,

      You're the second person to ask this same question for this week. I've already decided to publish a tutorial on it. Will be up in a couple of hours..

      Cheers :)

      Delete
  18. Hello and thank you for this tip. Unfortunately this not work for me. Can you help me?


    ReplyDelete
    Replies
    1. Hi catch,

      Your entries appear justified to me. See screenshot:

      http://i.imgur.com/n3cM5.png

      Delete
  19. Hi Yoga,

    I found you tips very useful. I'm specially impressed by the elegant solution you provide for creating a default homepage.

    One question. Is there a way to center vertically the picture on the entry summary of the dynamic view (magazine)
    Thanks!

    ReplyDelete
    Replies
    1. Hi pecenete,

      Sorry for the late reply. See if this is what you're looking for:

      .item .thumbnail{
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }
      .story{
      display: block !important;
      margin-top: 5px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      Cheers :)

      Delete
  20. Hi Buddy,

    Very good blog here, and like the others I have used some of the tutorials. Top job.

    One question, in Magazine View, the summary is justified but is there any way of the text covering the full width of the post background. The big space on the right could do with the text across it.

    Any help would be much appreciated.

    ReplyDelete
  21. Sorry forgot my link:

    http://www.radford-semele-sports-and-social-club.co.uk/

    In Magazine view the big space is on the right.

    ReplyDelete
    Replies
    1. Hi Justin,

      Sorry for the late reply. Here, use this code. Add it to your 'Add CSS' box:

      .magazine #lead .has-thumbnail .story{
      width: auto !important;
      }

      Cheers :)

      Delete
  22. Hi,
    Thank you for producing such an informative blog,I used your tip about shortening the number of flipcards in blogger dynamic view. However, I was wondering but once you put your cursor over a flipcard and the title/comment views show up, is there any way I can get rid of that little comment graphic/comment number?

    Thanks,
    Salina

    ReplyDelete
    Replies
    1. Hi Salina,

      Yeap, it is possible. Add this code to your 'Add CSS' box:

      .flipcard .overlay .comments-count{
      display: none !important;
      }

      Cheers :)

      Delete
  23. YOUR TUTORIAL IS OPENED MY EYES, HOW GREAT TO APPLY CSS CODE. some case that make me stuck on customizing my template is done nicely. I'd like to thanks you. you are really helpful. thx a lot friend... now my template looks in order brow :D

    ReplyDelete
    Replies
    1. Hi Rifqi,

      I'm glad you find the tutorials helpful. Glad to be of help.

      Cheers and God bless :)

      Delete
  24. Hi Yoga,

    Thank you for all your tips, they are great.

    Is there a way to make the summary respect line breaks? I have a listing and when it shows up in the summary, they are all on a row... Can I change that?

    ReplyDelete
    Replies
    1. Hi Victoria,

      Let's have a look at your blog. What's your blog's address?

      Delete
  25. Hi Yoga,

    I've just discovered your blog and it's just fantastic. Thank-you so much for this incredible work.

    I'm trying to modify my dynamic view and I've been able to modify the CSS to hide the search field:
    .header-bar #search{ display: none !important; }

    However, I now want to add
    .entry-summary{ text-align: justify !important; }

    but am not able to apply it to the blog. I had problems with the Apply button earlier, so I removed the dynamic view, went back to a simple template, re-added the dynamic view and was able to change the css. But that can't be right, right?

    When I view the blog, I am not seeing the home icon on the page list bar - can't quite figure out where that went either. Could the two be related?

    My blog is http://vizcandy.blogspot.ca/

    Thanks,
    Kelly

    ReplyDelete
    Replies
    1. Hi Kelly,

      There has been a problem with the Template Designer forever, and it seems like it has just been fixed (like 9 hours ago to be exact).. And nope, if you've changed your template, you're essentially changing from one set of template to another - which means you mods will go with the old one, and newer mods will disappear when you change your template again.

      Anyway, now that the Template Designer has been fixed, could you give it another whirl?

      Delete
  26. Hi, Yogaratnam
    Congratulations for your webpage!
    I am new with dinamic views and the newest post in Magazine mode appears too long:
    http://ua-destinoatenas.blogspot.com.es

    How can I fix the height of the post? I would like it to be like the associated image.
    Thanks,
    javier

    ReplyDelete
    Replies
    1. Hi Javier,

      The height of the summary is an entity that is hard to control. The following is the best that we can do for now:

      .magazine #main.hfeed div#content div#lead div.item{
      height: 270px !important;
      }

      Do note that this is a manual fix for your current post. When you publish a newer post with a different image height, you're gonna have to modify the value 270px in the code above.

      Cheers..
      -Yoga-

      Delete
  27. Hey Yoga,

    Nice post buddy! I need a small help though for my case. On my blog http://officialandreascy.blogspot.com i want to have justified alignment on the post summary of homepage..any ideas?

    Cheers..

    ReplyDelete
    Replies
    1. Hey Andreas,

      Here, use this:

      .post-body{
      text-align: justify !important;
      }

      Cheers :)

      Delete
  28. Hi Yoga, wow super nice job on helping everyone ;] I was wondering if you could help me a little bit. I have two problems.
    1. i use simple template for my web blog but using dynamic views for mobile just because i like that it opens pictures on the first page ( aka you don't have to press anything to see home page pictures ) but i don't like the gaps between them. maybe there is a way to change that? also a background to black? or maybe there is a way to just make home page to appear instantly with simple or custom template for mobile? ( hope it makes sense ) I guess i just want exactly same look as my web page to be on mobile.
    2. maybe there is a code for uploading pictures so they always resize to original size and center alignment and small gaps between them? so i could avoid pressing those buttons then you upload a picture.
    thank you for your help in advance ;]

    dkconcept.blogspot.com

    ReplyDelete
    Replies
    1. Seems like there's a lot of things to tackle. Let's take our discussion to the official Blogger forum, and handle one thing at a time, as it'll be a better platform for a discussions like this - especially when it is extremely like for follow-ups. Go to the link below - post a question, and get back to me with its link.

      https://productforums.google.com/forum/#!categories/blogger

      See you in the forum :)

      Delete
    2. Hi,
      thank for your help. I hoep this is the link https://productforums.google.com/forum/#!category-topic/blogger/how-do-i/WEJSFC_a7zQ

      Delete
  29. Hi Yoga!

    I have a little problem, I have to add a promotional icon on my blog, something like that http://www.sheinside.com/get_vip_icon.html but it doesn't work if it put the code on the dashboard. How can I do?
    Oh and the code to justify post summary doesn't work as well ...

    Please let me know,

    www.therussiancode.com

    ReplyDelete
    Replies
    1. Hi Elvira,

      Sorry for this ridiculously late reply. The justify code is working, as your posts contents are all justified now (remove the code to see the difference)..

      As for a banner/button/icon, unfortunately, Dynamic View templates lack the ability to add one unlike non-dynamic templates. The only way you can add an icon is by using the picture gadget, or you could create a dedicated page and dump all your banners in there (but the there's no guarantee your readers will open the page)..

      Delete
  30. Hi Yoga,

    I could use some help. I have an automatic post summary included with the blogger theme that I have (which I'm fine with), but when the post summary shows up on my homepage, the image in it is warped and flattened. But if I click "continue reading" and actually read the whole post, the images are fine. Do you know how to fix this?

    Thanks in advance!
    www.aspirationapparel.blogspot.com

    ReplyDelete
    Replies
    1. Theoretically, I think I know what is going on. The script is written in a non-dynamic way, and thus, it doesn't care about the actual dimension of your pictures. It's displaying your pictures according to the dimension set in the script.

      That said, I wouldn't know how to fix it technically though, since this is a third-party script written by someone else. It'll be best if you could contact the maker of this script and point this bug out.

      Delete
  31. Hello Yoga!
    I have already used a lot of your wonderful tips and now i'm facing another problem with my blog. I use magazine dynamic views and I have posted 7 diferrent posts in my blog. My screen seems a little weird: right down the newest post, there is one row with the three previous posts as thumbnails (that's the normal). But, instead of another row with my two first post, i get each thumbnail alone, in one row each. Any idea how to fix it? Thanx in advance.

    Here's my blog to get the idea of what i'm meaning
    http://omadaasty.blogspot.gr

    ReplyDelete
    Replies
    1. Your blog appears normal to me:
      http://i.imgur.com/5IUM6kj.jpg

      Could you upload a screenshot of what you're seeing?

      Delete
  32. Hello Yoga,

    I need your help with my blog, with the Magazine view the first line of text gets indented and the subsequent lines are to the left, is there a way to have all aligned to the left? My blog is www.panamawinereview.blogspot.com

    Thanks

    ReplyDelete
    Replies
    1. Hi Gobin,

      Just so that we're on the same page, are you referring to, for example, the line 'Pieve Santa Restituta Rennina 2008' from your first post on your summary page?

      Delete
  33. Yoga,

    Is there a way to fix that the dynamic view cuts words in half mid sentence? I like the view but it makes it hard to read. Especially, where I am using my blog as a more professional means of communication I would like it to look a little nicer. Any advices.
    Here is a screen shot of what I am talking about.
    https://plus.google.com/u/0/photos/search/screenshot?pid=5948029942830552834&oid=108115115888026497619

    ReplyDelete
  34. Yoga,

    Just wondering if you know how to get your post article not to cut words in half as they progress to the following line? It is really annoying and makes it hard to read.

    ReplyDelete
    Replies
    1. Hi JDMathis,

      I couldn't view the screenshot you shared. But see if this solves it:

      .article .article-content {
      word-break: normal !important;
      }

      Cheers.

      Delete
  35. Hi!
    I don't know why that is, but recently the DV has started to cut off my text. When you click on a post to see it in full size... the words are ridiculously bisected sometimes leaving only one letter to the next line.
    I have googled it and read your blog, but cannot seem to find the answer. Could you know anything about it?

    Kaisa

    ReplyDelete
    Replies
    1. Kaisa,

      See if this solves it:

      .article .article-content {
      word-break: normal !important;
      }

      Delete
  36. You're work is really awesome. You helped so very much!

    ReplyDelete
  37. Hi, thanks for the great work. However, I was able to justify only the summary or my post description and not the post title on the main page. Here's the link - http://lifestyleplusblog.blogspot.in/. Can you please help me out? Thanks!

    ReplyDelete
    Replies
    1. Hi there,

      This should do it (not sure if you'll like it though):

      .title.entry-title{
      text-align: justify !important;
      }

      Delete
  38. Thanks for the tutorial Yoga!
    I know that insn't exactly the topic but do you know if there is any way to use simple styles (bold, italic, paragraphs, etc) in the posts summary?
    thanks

    ReplyDelete
    Replies
    1. Not sure about paragraphs but you can use bold and italic in the summary, depending on the type of template of course.

      Delete
  39. hey, can you help in changing the size of summary text length in blogger custom mobile view. It would be a great help. Thanks

    ReplyDelete
    Replies
    1. I haven't had much luck in pushing changes to mobile template - though I haven't given it a whirl in a long time. I'll let you know if there is a breakthrough.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.