Customize the Post Footer.The Post Footer contains many elements like the Posted by line, the timestamp, the labels, comments, backlinks and others which you can customize to your blog........ Technorati Tags:post footer
The primary customization canbe made by going to Template------->Page Elements------>Click the Edit link in Blog Posts section-------->In popup window choose which items you would like to appear in the post footer by putting a check on their names. See picture below (Click on picture to enlarge it)
CHANGE NAME OF AUTHOR
To change the name of the author you can go to Dashboard------->Edit Profile----->Identity------->Display Name-------->Change Name and Save. However if you want to show different names under the posts you can change it in the template. To do this go to Template------>Edit Html------>First backup template using Download Full Template link given on this page.-------->Then put a check in Expand Widgets Template text box and scroll down to locate this code in the Blog Posts widget :
<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>
Delete <data:post.author/> in the fourth line and substitute your nickname. Preview and Save Template.INSERT AUTHOR PICTURE IN POSTED BY LINE
Delete the same piece of code in the above example and insert this line :
<a href="URL OF BLOG"><img src="URL OF YOUR PICTURE" /></a>
Preview and save template.APPEARANCE OF LABELS
To change the appearance of your labels go to Template----->Edit Html------->First backup template------>Add this code between <b:skin>
Like this article? Subscribe to the RSS feed!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
82 comments:
My drag-and-drop functionality in the "Blog Posts" section does not work.
Can you tell me how to move the location of these elements directly in the HTML?
In particular, I'm looking to move the "Posted by RFTR" field from the bottom of the post to the top (between the Title and the Post Body).
My blog is at http://rftr.blogspot.com
Thanks!
rftr
I have added this hack at the bottom of above post.
I'm using your 3-column template, and I'm wondering how do you add a background color to the Post Footer line?
Thanks ^^
Blazing Zero Destiny,
Add this line :
background:#ffd4aa;
To the code below at position xxxxx
.post-footer {
xxxxxxxxxxxxx
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Change the hex number ffd4aa to change color.
hi, i got problem.
my Old Post dissapear. When i click Old Post Link, no post appear. Why?
Thanks
Tanakwagu,
Can you give the URL of the post containing the non functioning 'Old Post' link.
Can you please show completd examples of your changes for each element? Im not getting change older post newer post text does it show when new posts are posted pls clear up confusion
thanx HB
I deleted the older posts and newerposts link before, but now I want them back. Could you show me how? Do I just need to add back the code I deleted? If yes, where should I place the code?
Thank you!
-- Emi
Anonymous,
Have a look at the above post under the heading "DELETE THE OLDER POSTS AND NEWER POSTS LINK" .
Then reverse the changes.
is it possible not to show the labels for each post? thanks.
.
login to Blogger dashboard and click on Layouts. Then click Edit link in Blog Posts widget. Uncheck Labels option and save.
Thank You! This was very helpful for adding some art at the end of each post automatically! You can see it on my site. www.TheArtistGrimoire.com
Thanks Again,
Brenda
I would like to subscribe to Post Comments (Atom). I have pasted the following on the code as you suggested. But it didn't work. Would you please suggest a remedy?
Subscribe to: Post Comments (Atom)
M
Maria,
It works. Clicking on the above link causes my feed reader to open with the feed.
Try posting a comment with a big paragraph of nonsense text and then click on the above link.
What feed reader are you using?
Vin,
Thank you very much. But still at the bottom of the page instead of Subscribe to Post comment(Atom) Subscribe to Posts (Atom) is seen.
What I need is that the comments should appear just below every post. (Similar to what is done in your blog). But now in order to view the comments, we need to move to another page. Would you please tell me what to do in this regard?
M
Maria,
Comments appearing below posts occurs on the post pages only. To do this you need to set the comment settings.
The comment feed URL you will have to add it manually after this line :
<b:include name='feedLinks'/>
in the expanded widgets template.
I installed the code to change the text of Older Posts and Newer Posts, and it appeared to install successfully until I tried to use it. Basically it seems to be trying to go to another page, then stops with no error message (like Page Not Found). I uploaded the old template and tried again, but got exactly the same result. What's gone wrong?
Hi Vin.
At the bottom of my blog's main page (footer, i think), there was a link saying "Mensagens antigas". This is portuguese for "Older Posts".
Unfortunatelly, i rather use another choice of words, since "Mensagens antigas" is not a really good translation.
I've searched for it in my template editor (Edit HTML), and I couldn't find the place where it stood.
Then i've visited this blog, and used the code you gave for "CHANGING OLDER POSTS AND NEWER POSTS TEXT". It worked!, but...
..well, now it doesn't link to any page! So, when people click on "Older Posts" (already translated to "Posts Anteriores"), not only does the link fail to direct the viwers to another page, but it also shows a message (at the bottom of the window) saying "Message (1) sent: POST < tt > http://ronceiro.blogspot.com/< /tt >" !!
What does this mean?
Can you help me?
Thank you for your time.
Gandamaluko,
Check your code changes again. You seem to have put in the code for "Email This Post" into the code for the "Older Posts" link.
Always backup your template before making any changes so that if there is any problem you can load the backup.
Thanks for all your great advice thus far. I am looking for a specific change to the blog titles, and I hope you can help. I am wanting to edit each "post title" to include a photo to the left of the title, and the user/time stamp at the top of the post (rather than at the bottom). Is this possible? I have a multiple-user blog, and we want a photo at the beginning of the blog to identify the author.
Pink Lady Claire,
To include a picture to left of title see :
Add Icon to Post Titles.
You can add the timestamp to the top by relocating the code for it as shown in post above.
hey there. i have stumbled onto your blog several times for help. i am still a fledgling and learning more and more every day. i just wanted to say your site is one of the easiest to follow out there in a gazillion. thanks and i appreciate it. :)
Hi Vin, I moved the "POSTED BY" line below the post title the way you explained it. It works but the post text starts right beside it. No line break. How to change that so that the post starts under the "POSTED BY" line? Also, I unchecked the labels box in the Blog Page Element but labels still show up on the blog. How come?
Thanx!
Fred,
In the Expande widgets template add </br> tags in between the codes to separate it.
Did you clear cache after saving the labels option?
very helpful :D
Vin--
I have my Posted by up under the title, but would like to change the font--do I drop in font by the code moved or somewhere else.
Thanks--
CPS,
What font do you want to change it to? If it is not a common font it will not be seen by the viewer!
Sorry about not being clear--I want to reduce the font size not change the font--I want to make it and teh date text slightly smaller and the same gray color.
CPS,
What size do you want it (in pixels)?
Sorry Vin--over my head I guess. Seems like the fonts are all set as percentages--when I moved the Posted by up to the header using the drop and drag in the Layout tab, the font seemed to change to the same size as the header and I just don't see where to edit that text now thetuningroom.blogspot.com
Thanks
CPS,
Add this code to CSS part of template :
.post-header-line-1 {font-size:9px !important;}
Preview to adjust '9' and then save.
Thanks Vin--that did the trick. Can I also drop the date header color code in that line?
CPS,
Your template is not going to break if you add it in and click Preview.
We are not walking on eggshells here!
;-)
P.S. That code only changes the style of the posted by line. For the date try :
.date-header h2 {color:#afafaf !important}
thanks a lot! this post helped much. God bless!:)
Hi,
I tried to change the word 'labels' to 'categories' and discovered that my labels don't even show below my posts- i made sure the option is checked in layout, edit, in posts area and it is. i unchecked it, saved, reloaded the page- tried to clear private info (cash, etc.), checked it again- and nothing. could you offer any suggestions? I am using the new blogger. What is the code to manually add it- and where do i add it?
Thanks,
Tessa
DirtDigger (Tessa),
First backup your widgets.
Then click on 'Revert widget templates to default' link at the bottom of the Template code box on Layout----->Edit Html subtab.
Thanks Vin,
One more question. Not all of my widgets have a title- i would think it would be easier to locate the widgets when there is a title to them, right? I can always delete the title later.
Tessa
DirtDigger (Tessa),
Which widgets do not have a title? Where do you want to locate them?
Thanks so much Vin! The labels are there now. And what I meant by adding titles to the widgets is that when you copy and save the source code, to make a file with just the widgets code it would be easier to locate them if the title was there, I assume.
Tessa
DirtDigger (Tessa),
In the source code the title of the widget is shown like this :
<h2 class='title'>All Posts List.</h2>
Alternatively click the Edit link for all widgets on Layout---->Page Elements tab one by one and copy the widget contents into a text file and save. (Works for HTML widgets)
Thanks again Vin,
I can't tell you how helpful your posts are :) I have all my widget info saved (html ones anyway). I've run into 2 problems after getting my labels to show. For one of my widgets I added code to make to appear only on my home (or index) page. This was added in the html after expanding the widgets and now the code is gone, so the widget now shows up on all pages. I've tried to put it back in, but it's not working. I had problems figuring it out the first time- can't remember what I did! I'll figure it out eventually.
The other problem is that i've tried to move the location of my labels in layout, edit post area. I get a weird error. I'll just keep trying.
Thanks again,
Tessa
DirtDigger (Tessa),
Have a look at How to put widgets on Specific pages?
What is the exact error message you get on moving labels?
Thanks Vin,
Following your instructions (I was using another site) I got it working. However, tonight I am having problems adding it to some others. The error code is bX-7e4k5s. I get this after trying to preview.
Tessa
DirtDigger (Tessa),
The bx-errors are connectivity errors. Try connecting at less busy times/from a broadband connection/after rebooting/after closing all other open applications/with Firefox browser/increasing virtual memory/defragging the disk/increasing browser cache memory/closing any browser window which is streaming video or audio.
Dear Vin,
I have renamed my
newer posts/Home/Older posts
to
next /home/previous
I'd like to move my
next /home/previous posts all to the right and under each otherstarting with
next
home
previous
I would also like to move my labels heading and labels in the post to the right (at the moment I'm using Minima stretch and they're on the left)
Thank you in advance (FYI my url is www.ruffleandblossomimages.blogspot.com)
blah,
You will have to modify the CSS code for the navigation links :
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
For the labels modify this code :
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Dear Vin! Thank you ! I'm of to try it out :-)
have a great day :-)
Dear Vin, the code for the next home and preious made no change to the positioning of the words ( ie they staye as
next on left, home in middle and preious on right
To try and get them all over to the right and under one another
ie. previous
home
next
I tried
I then tried
#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: right;
}
but then it looked like
home previous....next..
all togehter like that
please help!!
and thank you in advance
Dear Vin the code for the labels made no change either.
I replaced the
BLOGGER ORIGINAL
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
with
Vins modification
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Hmm not sure why
Any help would be most appreciated
Thank you in advance
blah,
What is your blog address?
ps. I went back and inserted the original html so its prev L home middle and Next
once again, thank you in advance
As we know that last post is the start page into a blog. Can you help set a post as home, even if that post is not the last or first?
Lady M,
First change date of that post to a future date as shown in How to Change Post Order?
Then go to Settings---->Formatting----->Show__Posts on Main Page and set it to '1' and save settings
Hi Vin,
How do I translate Labels into f.i. CATEGORIES in my classic template?
Coen
Coen,
Have a look at Labels Gadget for Classic Templates in Blogger.
Hi Vin,
I looked around in the Labels Gadget. I think this is not what I meant. Let me explain:
My blog has a classic template and is in Dutch. The word 'Labels' doesn't mean enything in our language. So I want to translate Labels' into 'Rubriek'. Is there a way to do this?
Thanks!
Coen
Coen,
The Classic template does not have the Labels code in the template to enable us to modify it.
Upgrade to Layouts to see the label code in the expanded template and modify it.
My template has the "posted by" line at the top of the post, right below the title. I'm hoping to move it to the bottom of the post. I've tried to do the reverse of the suggestion here, but when I do a search of my code I can't find any of the ones you mention.
Hi Vin - I've been scouring your website today, but still can't quite find the answer to my problem.
I've Configured my Blog posts in the main editing page, but it's not following my instructions to add a date before each post and to move the byline, time, and comments to below the post.
I'm not talented at coding, but I can cut and paste! Any help? Thanks!
@Jonk,
Your blog should have the Layout template. Did you check the Expand Widget Templates checkbox at the top of the Template Code box on Layout--->Edit Html subtab?
@Cafe Cyan,
You have to edit the code directly in the Template Code box (Expand Widgets mode) and cut and paste the relevant code to change their positions.
Thanks for the tip. I tried your suggestion, but it still doesn't work. I sent an e-mail to you yesterday - hope you received it and can maybe help.
I want to point out that I don't want to follow the instructions above to place my "posted by"/comments line right blow the post title.
Rather, this is already the case in my template and I'm trying to customize it so this line is at the END of my posts.
The Page Elements option for this is not working.
Thanks.
Jonk,
Just reverse the steps.
Can't just reverse the steps, because it doesn't say where it is originally found prior to moving it after < div class='post-body' >. As such, I don't know where to move it.
However, my template doesn't even appear to have this code...
< span class='post-author' >
< b:if cond='data:top.showAuthor'>
< data:top.authorLabel/> < data:post.author/>
< /b:if>
< /span>
...even after checking the "Expand Widgets Template" box, so I don't know what I should be cutting and pasting.
Did you receive my e-mail perchance, from a couple of days ago?
Jonk,
If not present add it immediately after this line in the expanded widgets template :
<p class='post-footer-line post-footer-line-1'>
Hi, thanks for writing out such helpfull tutorial, i have an issue with my blog. I want Comments link posted by & labels under the Heading of post.
I did it by editing the Post area in Page element section on the back end, I draged them under the post heading and top of the post body but it didn't work for me.
Kindly help me out with this issue if you have any solution regarding this in Code or any other technicality
THANKS
pakistan-portal,
You have to cut and paste code in the expanded widgets template. Email me for details.
this site is much useful for bloggers.can you help me out this.
i have applied for google adsence but it has been over 1 month but still i dint get any mail or my account has been activated.
saikumar.mudragada,
You should have content and traffic on your blog to get it approved. Try the Adsense Help Google Group.
Great tips. Thanks a bundle.
Hey Vin, Extremely helpful post. Thank you. I was wondering if I can change the 'older posts'/ 'newer posts' links to the actual title of the said posts? (I have seen this in a wordpress blog) but I have not been able to find any tutorial for blogger. Please help. Also the older/newer posts link when clicked do not the show the actual URL title- it is some gibberish url. Any idea how to correct the same?
very useful especially that pager navigation,...i had a probleb about that,...thanks a lot for sharing this..:)
I simply wanted to develop a comment to thank you for all of the splendid guides you are sharing at this website. My time consuming internet lookup has at the end been compensated with wonderful facts and techniques to go over with my co-workers. I 'd express that many of us visitors actually are very endowed to exist in a useful site with so many brilliant professionals with helpful methods. I feel rather blessed to have discovered your entire webpages and look forward to so many more fun minutes reading here. Thanks again for a lot of things.
I have a question. How do you change the footer elements to the right? For example, the 'reaction button' is defaulted to the left; how do you align this element to the right with the css?
I have added the code for reaction button, and tweaked the css but it turned weird...
Thanks
Hi! This is my first visit to your blog! We are a team of volunteers and new
initiatives in the same niche. Blog gave us useful information to work. You have done an amazing job!
very useful especially that pager navigation,...i had a probleb about that,...thanks a lot for sharing this..:
Great information you got here. I've been reading about this topic for one week now for my papers in school and thank God I found it here in your blog. I had a great time reading this.
Your guidance is clear and suitable for me. I will try to do that on my blog.
Then put a check in Expand Widgets Template text box and scroll down to locate this code in the Blog Posts widget :
Thanks! I'll try to implement this on my blogger blog.
I have just started building my own blog and I think there is lot more to learn to it. Your post has really helped me a lot to know more in this case.
This is great information, thanks’ for share!
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?