 |
| 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;
}
Hey thanks for this!
ReplyDeleteI would really like to make the space between of my photos smaller. I use Dynamic View classic
janinastyle.blogspot.com
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.
Delete.separator img{
margin-bottom: -10px !important;
}
Cheers :)
It worked. Thanks!
DeleteNo problem :)
Deletewow! another one useful and simply awesome tutorial! thank you so much!
ReplyDeleteGlad to hear that, thanks! :)
DeletePerfect !
ReplyDeleteIs there any way to define the number of characters in the post summary ?
In my case, the whole post is coming !
Thanks
Hi Benji,
DeleteWe 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?
Thx Yoga,
DeleteThis 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
Benji,
DeleteIt 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.
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
ReplyDeleteWhat's your blog's address? And how does it look in other browsers?
DeleteHow about the reverse, and making the posts themselves left aligned instead of justified?
ReplyDeleteHi Adam,
DeleteThe summaries in magazine view is left-aligned by default.
Cheers :)
Sorry, maybe I wasn't clear - I mean the WHOLE post, after it's been opened in its lightbox.
DeleteAh, I've got it!
Delete.article .article-content {
text-align: left;
}
Glad you're getting the hang of it :)
DeleteMe again ;) How can I make the Magazine page centred...
ReplyDeleteHi Birgitta,
DeleteGonna need a little more context. Centered as in, the font in the home page, or the whole blog, or something else in particular?
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...
ReplyDeleteHi Birgitta,
DeleteI 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.
Yes! You did it again Yoga :) I think you are fantastic! Thank you!
ReplyDeleteThat was fast! :)
DeleteThank you!
ReplyDeleteIs there any way to place a flash player on the body? Or in some other part?
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.
DeleteCheers :)
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)
ReplyDeleteHi Maria,
DeleteI'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 :)
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...
ReplyDeleteThat's sweet of you :) Thanks Maria, appreciate it :)
DeleteIf 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?
ReplyDeleteSimple template doesn't come with auto post summary. But you can easily install it. Here, refer to this link:
Deletehttp://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html
Hi Yoga.
ReplyDeleteIs there any way to remove the post summary ?
Thanks.
DM
Hi DM,
DeleteAre 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?
Hi Yoga,
ReplyDeleteIs 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!
Hi Kim,
DeleteUnfortunately, 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 :)
Thanks so much! Worked like a charm :-)
DeleteThat's great! :)
DeleteIt works nice! Thanks Yoga!
DeleteI 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.
ReplyDeleteHi EE,
DeleteLet me have a look.. What's your blog's address?
My blog address is nightstandnovels.blogspot.com.
DeleteThanks for taking a look! of I changed my name from erotic escapism lol
Hi Kissyface,
DeleteYou'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 :)
Thanks do much for trying and responding!!! ;)
DeleteHi !
ReplyDeleteI'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 !
Hi Anouk,
DeleteThanks! 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 :)
It worked ! Thank you :D
DeleteDon't mention it :)
Deleteis 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.
ReplyDeleteThe alternative would be to not have a summary but the whole post
take a look at takingpartinaclinicaltrial.blogspot.com
Hi there,
DeleteYou'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 :)
Hello and thank you for this tip. Unfortunately this not work for me. Can you help me?
ReplyDeleteHi catch,
DeleteYour entries appear justified to me. See screenshot:
http://i.imgur.com/n3cM5.png
Hi Yoga,
ReplyDeleteI 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!
Hi pecenete,
DeleteSorry 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 :)
Hi Justin,
ReplyDeleteSorry for the late reply. Here, use this code. Add it to your 'Add CSS' box:
.magazine #lead .has-thumbnail .story{
width: auto !important;
}
Cheers :)
Hi,
ReplyDeleteThank 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
Hi Salina,
DeleteYeap, it is possible. Add this code to your 'Add CSS' box:
.flipcard .overlay .comments-count{
display: none !important;
}
Cheers :)
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
ReplyDeleteHi Rifqi,
DeleteI'm glad you find the tutorials helpful. Glad to be of help.
Cheers and God bless :)
Hi Yoga,
ReplyDeleteThank 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?
Hi Victoria,
DeleteLet's have a look at your blog. What's your blog's address?
Hi Yoga,
ReplyDeleteI'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
Hi Kelly,
DeleteThere 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?
Hi, Yogaratnam
ReplyDeleteCongratulations 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
Hi Javier,
DeleteThe 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-
Hey Yoga,
ReplyDeleteNice 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..
Hey Andreas,
DeleteHere, use this:
.post-body{
text-align: justify !important;
}
Cheers :)
Hi Yoga, wow super nice job on helping everyone ;] I was wondering if you could help me a little bit. I have two problems.
ReplyDelete1. 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
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.
Deletehttps://productforums.google.com/forum/#!categories/blogger
See you in the forum :)
Hi,
Deletethank for your help. I hoep this is the link https://productforums.google.com/forum/#!category-topic/blogger/how-do-i/WEJSFC_a7zQ
Hi Yoga!
ReplyDeleteI 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
Hi Elvira,
DeleteSorry 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)..
Hi Yoga,
ReplyDeleteI 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
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.
DeleteThat 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.
Hello Yoga!
ReplyDeleteI 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
Your blog appears normal to me:
Deletehttp://i.imgur.com/5IUM6kj.jpg
Could you upload a screenshot of what you're seeing?
Hello Yoga,
ReplyDeleteI 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
Hi Gobin,
DeleteJust 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?
Yoga,
ReplyDeleteIs 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
Yoga,
ReplyDeleteJust 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.
Hi JDMathis,
DeleteI couldn't view the screenshot you shared. But see if this solves it:
.article .article-content {
word-break: normal !important;
}
Cheers.
Hi!
ReplyDeleteI 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
Kaisa,
DeleteSee if this solves it:
.article .article-content {
word-break: normal !important;
}
You're work is really awesome. You helped so very much!
ReplyDeleteHi, 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!
ReplyDeleteHi there,
DeleteThis should do it (not sure if you'll like it though):
.title.entry-title{
text-align: justify !important;
}
Thanks for the tutorial Yoga!
ReplyDeleteI 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
Not sure about paragraphs but you can use bold and italic in the summary, depending on the type of template of course.
Deletehey, can you help in changing the size of summary text length in blogger custom mobile view. It would be a great help. Thanks
ReplyDeleteI 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