Customizing your Blog Posts Widget. ~ The Blog Doctor.
Loading...

Customizing your Blog Posts Widget.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Many bloggers would like to customize their Blog Posts so that they appear differently in their blogs. Some would like to have the "Posted By" message to appear below the post title, others do not want "Showing __ posts" message to appear on clicking one of the labels. To customize the Blog Posts it is essential to understand its code and how we can modify it............

Some of the Blog Posts settings can be modified through the WYSIWYG (Graphical) interface provided by Blogger on the Page Elements subtsb of Template tab. To access this login to dashboard and click on Layouts. Then click on Edit link in Blog Posts section and follow the instructions in How to Add Widgets to your Blog.



The Blog Posts Widget Code


The following code is taken from the Minima Layout. I will show the code first and then discuss what it does and how it can be modified. Then I will show with a picture what the code does. To see this code login to your Dashboard and click on Layouts next to your blog name. then click on edit Html subtab of Template tab. Put a check in expand Widgets Template box at the top and scroll down till you come to the Blog Posts widget code in the main section of the Main-wrapper.


The first two lines of the Blog Posts widget are :

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>

In the first line 'locked=true' means you cannot delete the Blog Posts widget through the Page Elements tab. If you change this to locked='false' you will be able to remove this widget through the Page Elements tab but then you will not be able to add posts to the blog. The second line is common to all widgets. Widget content is contained in "includable" sections. Each widget must have one includable with id='main'. This will usually contain most or all of the content that will display for this widget.



The next three lines are :

<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>

This denotes the start of the blog posts and the first include is the status message. The include is used wherever you want to execute the code within the main includable. The code for this is inside another includable with a different id from main further down in this same widget. So we see that the main includable contains other includables with codes. These codes are executed wherever you want in the main includable using includes. The status message appears at the top of your posts when you click on a label. This is what it looks like when you click on a label with no posts :



If you do not like it just delete the line of code with 'status message' in it.



The next lines of code are about the date :

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>


The first four lines display the date if you have checked the date box in the Blog Posts - Edit tab on page Elements. After the date comes the post include. The detailed code for the posts is put in a posts includable described further down.

The next two lines are instructions to display the comments on individual post pages. The comments are not displayed on the main page because the continuity of posts will be broken and also it will become too long and slow to load. Notice that the blog posts class is closed in the last line.



NAVIGATION LINKS


The next code displays the navigation links : Previous posts, Next Post and Home link below each post on main and post pages.

<!-- navigation -->
<b:include name='nextprev'/>

Again notice that include is used to execute the code which actually is in an includable further down. If you want to delete them you can delete the above lines. To modify them you have to modify the includable code further down. This is how they look below yourposts :





FEED LINKS


The next code shows the feed links and closes the main includable.

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

The feed link displays : "Subscribe to: Posts (Atom)" below the navigation links on the main and posts pages. See What is Subscribe to Posts Atom for more information.


This is the end of the Blog Posts display. The rest of the Blog Posts widget code consist of the includables containing detailed code for the includes within the main includable.



THE NAVIGATION INCLUDABLE


This is the next code in the Blog Posts widget. This code can be modified if you wish to change the appearance of your navigation links. See Making Image Links.



THE POSTS INCLUDABLE


This describes the detailed posts execution. It starts off with the post id :

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>

Then continues with the post title :

<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

This is the code used to execute Permalinks in post titles.


Then comes the code for the post body :


<div class='post-header-line-1'/>

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

After this is the POST FOOTER LINE 1.


<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</p>


The post Footer Line 1 contains detailed code for Post Author, Post Timestamp, Post Comment Link, Backlinks, Post Email Icons and Quickedit Pencil.



THE LABELS CODE IN THE POST FOOTER


The next block of code executes the labels in the Post Footer Line 2 :


<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
<p class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>


This block of code ends with a provision to add more post footer items under Post Footer Line 3. The posts includable ends here.



THE POST QUICKEDIT INCLUDABLE


This block of code describes the QuickEdit for the posts :

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>

See the diagram below for a better understanding of how the include and includables are connected.



The next includables are the commentDeleteIcon, backlinkDeleteIcon, comments, backlinks, feedLinks and feedLinksBody which I will describe in a later post.



29 comments:

:: Suzanne :: said...

Awesome. I've been trying to figure this out for days.

My kids and hubby thank you too, as I can get off the computer now and start cooking again.

The Publisher said...

nice tips. I'll try to use it on my blogs

Eric Girgash said...

I deleted the "status message" line of code as it said to, to get rid of "No posts match your query" box. Well i did that and im getting red text errors saying the template could not be parsed. Basically the picture is going to link to another blog. My blog is girgash.blogspot.com. I just want to get rid of the box.

Vin said...

Eric,

Have a look at :

Error Messages in Blogger Templates

LightningIsMyName (LIMN) said...

Thanks a lot, this helped me solve some problems with my page and it helped me to create some custom pages.

Thanks!

D or M, but probably M said...

Hello. I have read your instructions, but am having a hard time applying them to a problem i am having. I am changing templates and am cannot seem to change the post format back to the standard Minima format. The post header is too large, and the time stamp and "posted by" are in the wrong places. Will you help me fix this? dougandmariecaldwellfamily.blogspot.com Thanks!

Vin said...

D or M, but probably M,

You can change the font size here :

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
...
}

Decrease 140% and save.

D or M, but probably M said...

Hmm. Didn't work.

Vin said...

D or M, but probably M,

Did you clear cache after saving changes?

D or M, but probably M said...

How do I do that?

Vin said...

D or M, but probably M,

Click the link in my previous comment!

D or M, but probably M said...

Thank you. I am trying to change the "Posted by D or M, but probably M
August 05,
2008 " section of my posts. It is still in the format of my former template. I'd like to set it back to the Minima format. Can you help me with that? Thank you.

Vin said...

D or M, but probably M,

You already have the Minima Layout. Click Edit Profile link on Dashboard and change the Display Name there and save.

D or M, but probably M said...

I'm sorry. I think I haven't been explaining myself well enough. In the Minima format the title of each post is smaller than what is currently on my blog. I'd like to change it back to the standard Minima size. Also, the "Posted by D or M, but probably M" is currently at the top of each post, but in the standard Minima format it is at the bottom of each post. I'd like to move it to the bottom. One last thing is the date for my posts on my blog are below the post title. in the standard Minima format the date is above the post title and in a larger font. i'd like to change that too. Too SEE what i mean compare the post date, post title, and posted by sections in these two blogs: what my blog looks like - dougandmariecaldwellfamily.blogspot.com, and what I want my blog to look like - dananddanamurphy.blogspot.com. hope that clears things up. Thanks for all your time.

Vin said...

D or M, but probably M,

If you want the blog to look like Minima just go to Layout---->Pick New Template and choose Minima template and save.

D or M, but probably M said...

Thank you. I did that already, a few times. It will not change the things mentioned in my last comment. Weird, huh?

Vin said...

D or M, but probably M,

Can you send me the template of that blog?

The email address is in the middle column of this blog.

D or M, but probably M said...

I just emailed it. Thank you!

Future said...

hi dude !
I really like ur blog and I have learned alot from it.

Dude, I know my question is kinda offtopic and u don't reply to offtopic questions.But I seriously need ur help.Plz help :(

I was trying to add rss feed code in my blog. I added this code in sidebar's html/java script gadget.
but as soon as I saved it , my page layout got disturbed.Pages have now shifted at left-bottom and M not able to brign it back to normal.I even removed the code but It didn't work.


plz check.:( :(

Vin said...

Future,

Which browser are you using? Looks OK in Firefox.
Try clearing the cache.

Future said...

Thx. 4 replying Vin :)

M using IE 6.:(

Vin said...

Future,

Download and install the latest Internet Explorer. Firefox browser is also very user friendly to bloggers.

Karen said...

This is a fantastic blog!
I can't find the answer to this anywhere - I'd like to have my posts read like a book or newspaper article in that the first line of each paragraph is indented. How can I do this?

Vin said...

Karen,

Have a look at How to Format Text in Blogger Posts?

Karen said...

Thanks Vin. I've tried what you suggested but I'm have a few problems. The first is that I'm using expandable text;and it works by putting the first part of the code at the very beginning. What I want though is for every new paragraph to be indented. Is there a way of doing this without me having to put the code before every single paragraph? Some of my posts are quite long and it's very tedious. Also, while the code I got from you earlier (expandable text) is saved in my html box in the post editor, the paragraph indentation instructions do not save there so I'm having to code it in every time.
Please tell me there is a more permanent way of doing this.
One more thing - the paragraph indent instructions are increasing the line spacing . . .
Thanks

Vin said...

Karen,

In CSS part of Template add this code :

p
{
text-indent: 20px
}

Then whenever you want to indent the first line of a text block enclose the whole text in <p> TEXT TO BE INDENTED </p> tags. In Blogger use this code :

.post p {
text-indent:25px;
}

Fred said...

Hi! How can I modify the timestamp (font style, etc...) in the post footer? Right now, it is underlined with a dotted line. I want to get rid of that. I would also like the timestamp to NOT be a link. Can you please help me with that? www.mtlfred.blogspot.com

Vin said...

Fred,

In the CSS part of the blog template put this code :

.post-timestamp abbr {
border-bottom:none;
}

Save Template.

mobile phone blog said...

great information... nice tips

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.