Sticky post(s) can be useful in a blog, as a featured post, as a notification of an upcoming event, some general info about blog, etc. Again, Wordpress, from where I migrated to Blogger, has this feature. And Blogger does not.
There has been two "hacks" around, until now, to make kind of sticky posts in Blogger, but both have big problems. But maybe one of them suits you, so I'll tell you about these shortly.
Date hack - not good
Publish your post. Edit the post after publishing, under Post Options set post date to somewhere in the future (for example year 2020). Now this post will be the first post in your blog, until 2020 or until you edit the date.
Problem: Messes blog's RSS feed. Your sticky post will be the latest post in the feed until 2020, and so people won't see updates from your blog in services that use RSS. This is bad.
Problem: Your post shows that it is published in the future. You can make code to hide the date but it gets complicated.
Gadget hack - not good
Go to Design, Page Layout, add HTML/Javascript gadget to page, and move it to just above the posts section. Don't give the gadget a title, write your sticky "post" in HTML to look as a post. One variation of this is to edit template html and put the "post" there.
Problem: It is not a post. You cannot comment it. You cannot see it in blog archives. And it does not appear in your Blog RSS feed, either. So for example, if you announce some upcoming event this way, your feed followers won't see it, unless they open your blog page.
Problem: your gadget/template html is shown on every page in your blog, unless you add some code to show it only on the first page, and this gets complicated.
Here is my gadget sticky post hack, with the latter problem solved. It may be a good solution for some blogs, so check it out, here's a demo.
Real sticky posts - excellent!
Sticky post should be a post, with normal publishing date, appearing in Blog feed. It should be easy to make a post sticky, and make a sticky post normal. Sticky posts should have a way to look different from normal posts.
My solution fulfills these requirements. Script pulls the sticky posts from the blog feed, so blog feed must be enabled in blog's settings. And also because blog feed is needed, my sticky posts hack don't unfortunately work in private blogs. You can control posts' sticky state simply by giving post a label, default is "sticky" but you can change that if you want. You can set how many sticky posts are shown at most, and if more "sticky" labels are found than this amount, then the newest posts are shown.
Installation
Edit template html. Put this code just before </body>.
Normally posts posted in same day are grouped together in Blogger layout templates, into same div element. Because of this, if you post a sticky post and a normal post with same date, also the normal post is removed from the page when sticky post is removed and placed on top of the page. To prevent this, you may want to install a simple hack to show dates on all posts, which breaks down the "daily groups". But if you never post two posts in the same day, or edit the sticky posts' dates to be different from any other post, then it is not necessary.
Configuration
You may edit the CSS styles for stickies-container and sticky-post, and configure the following javascript variables:
stickyLabel: the label which turns a post into a sticky post
maxStickies: maximum number of posts displayed as sticky, 1-20 (don't overdo it)
showDate: show date or not, you may want to hide it
showTitle: show post title or not
showFooter: you may want to hide the whole footer
showPostedBy: show Posted By text in footer
showCommentLink: show link to comments in footer
showLabels: show post labels in footer
showStickyLabel: show also the sticky label in the labels list, or hide it
showEmailPost: show Email Post button
showShareButtons: show the sharebuttons group or not
showShareEmail: show email button in sharebuttons
showShareBlog: show blog button in sharebuttons
showShareTwitter: show twitter button in sharebuttons
showShareFacebook: show facebook button in sharebuttons
showSharePlusone: show plus one button in sharebuttons
widthPlusone: you may want to limit this, small enough and text disappears
txtComment: singular form, used in sentence "1 comment", just the text, without number
txtComments: plural form, used in sentence "# comments", just the text, without number
txtPostedBy: text in Posted by, can have variables [user] and [time]
txtLabels: text preceding the labels list
txtMore: "Read more »" text for posts with a jump break.
dynamicMore: if true, jump break text (after "more link") is revealed dynamically
txtHideMore: text of the link to hide "more text", if dynamicMore is used (true)
Using a jump break in a sticky post may be a good idea, so that the sticky post don't become too tall. With variable setting dynamicMore=true the rest of the sticky post is revealed dynamically, which looks great and is faster than a full page load.
You can move the CSS style declarations to body section of the template, if you want, and add more styles to style the sticky posts (know your way around).
Post Comments (Atom)
Click on a single comment to hide/show its text
50 comments:
what for is this master? :D
@Beben Koben With this hack you can make "sticky posts", that display first on the front page, before the latest post. Open http://yabtb.blogspot.com/ front page, and you'll see an example of a sticky post.
@MS-potilas WOW is this yaaa
Welcome to YABTB
cool cool \m/
@MS-potilas not worked...wkwkkwkw
jus add that script right, before </body>cortle
@Beben Koben After installing the script to template, before </body>, you must then give one of your posts the label "sticky" to make it "stick to top". Hope this helps.
it's worked...hsuahsuahusau
baut for get like you, we must make a post, and tag with read more in your script right?
@Beben KobenGreat that you got it working. Yes, the "read more" thing is done by using the "jump break" button while editing the post, or using html tags <!-- more -->, see http://buzz.blogger.com/2009/09/you-might-as-well-jump.html. Same as making the "read more" for a regular post.
@MS-potilas i see master, BTW i used old editor post :D
Hi, you answered my question in Google forum, so I came here to read your good post
I was reading your post about sticky but I have some doubts
I saw the example in your own sticky post and I see it looks very different to others, what I'd like is that a normal post of mine looks exactly like others but placed on top
The other question is if a sticky post is indexed by search engines like others post
@Ariel
Hi Ariel,
the sticky post on this blogs looks so different in purpose, it is styled by CSS to look different. I think it is good to have it look at least a bit different, so people don't come to blog and look "no new posts" because the "same old post" is on top. But if you want, you can have the sticky posts look (at least very close) like a normal post. Just don't center the title, don't use different background colors, don't hide elements like date, etc. like I have done, all that is configurable.
Search engines find these sticky posts same ways as normal posts: from the blog main page (Google renders javascript), from the blog feed (if feed is enabled), and from links to the post (in main page and in archive gadget, for example).
Of course also this implementation is not perfect, like it won't run in-post javascript, but still it is the best I have seen – for my purposes.
Well, The thing is that reason I want just it'd look like other but being on top is that I want to give the appearance of a web site, maybe I'd have to go to worpress but I want to try it, I like blogger although not used wordpress yet
Then I'm going to do what you advise me that only include only the features I want...(top and hide date)
Other question...then how wordpress make to get an static home page? something like this? just wondering
And sorry if my english is not good at all
@Ariel
You can make it look the same as other posts using this hack, too, as I tried to explain :) I just did not make stickies to look the same in this blog, but you can, in your blog. So you could give this hack a try before moving to Wordpress - after all, it is quite simple installation, and then some customization to CSS and settings, if wanted.
Wordpress does have this sticky posts feature built in, and so the sticky posts are easier to use.
In Wordpress you can make both posts and static pages, pretty much the same as in Blogger.
Hope you find a solution suitable for you.
Yes, definitely your post and help has been very useful, I'll try this hack :D
I apreciate very much all this, It will help my purposes
Thanks.
Hello, I wonder if it would be possible that when someone looks that post on the google go to home page where is the post sticky insted of going to the URL's post
@Ariel
One trick could be to add some javascript to the post text (in html editing mode), that redirects to main page when viewing the post url, for example like this:
<script> if(window.location.href="http://yourblog.blogspot.com/2012/02/your-post.html") window.location = "/"; </script>
Change the url inside "s to the post's url.
Thanks, but now other question has came up, can this bring some Google's penalization or some other problem?
@Ariel Hi, it is possible but not probable, since your redirect is not "bad" (going to another site or something like that). But I'm really not so familiar with the google penalties.
I have duplicate content on my old MS-potilas blog (wordpress) and Blogger (posts imported), and I think there was no penalty, although I thought there might be.
If straight redirect causes any problems, I think one could do the redirect with a "warning" for redirection and a little timeout, but I'm not familiar how to do a javascript redirect like that from a post.
It might be good to use webmaster tools on your site, I think it will tell you if there's something wrong with your site. WebMaster's tools".
Thanks, another question, I was planing of creating a blogger blog that looks as a website but now I'm considering purchase a hosting and create it there, do you think is good idea?
And do you know if blogger rank better of a site build with a paid hosting?
@Ariel You can make blogspot look like a website, and later if you want, you can buy hosting and "move" the blog to the hosted url. I don't know the specifics about this, blogger help provides info, for example here.
I don't think it affects page ranking if site has .blogspot.com or some other url. I think it is more about the content.
Ok thaks for your answers! was very useful!
Hi!
This is exactly waht i was looking for.
There's a problem though..,i've followed your instructions and placed the code in the section you specified but now whenever u go to the main page of my blog, the sticky post i created (and labeled as 'sticky') appears twice! once as the sticky post and next as an actual post.
How can i fix this problem?
Thanx
Plus i'd really like mine to look exactly like your's in terms of CSS, care to help?
Hi again
I created a temporary solution for this problem but i'd still like your help plus the css to make my announcement appear like yours ;D
@MD LinkZ
Hi, I checked your blog. The posts widget is customized (you have extra ssyby-date-outer2 div surrounding the posts), that might cause the "double post" (failure to remove the double posts). In the script there's this line that searches the outmost post div:
while(elepost && !/(^| )date-outer( |$)/.test(elepost.className))
change that to:
while(elepost && !/(^| )ssyby-date-outer2( |$)/.test(elepost.className))
Notice, that my script removes the "extra" sticky posts only from the first page. If you want to remove them from older pages, too, you have to use some different solution for hiding the posts with a particular label, like the workaround solution you're now using.
About the CSS I'm using, you can check that kind of things from this blog's source, and seems that you already did :)
Hope you get it fully working and looking the way you like. :)
@MS-potilas
;D yes, i did-but if u'd like me to remove your code i shall promptly do it?
I'm now trying to figure out how to reduce the width of the announcement box to 3 quarters its current size and then center it, any thoughts?
Once again, thanx for ur help and awesome work-urs was the only real sticky code i found
@MD LinkZ You are free to use and modify any codes found in this blog, either in the articles or page sources :)
To reduce the width, you could try adding these two definitions to stickies-container css:
margin-left: 75px; width: 500px;
@MS-potilas
Yet another problem ;D
Whenever i load my blog, mediadownlinkz.blogspot.com, after creating new posts the sticky post appears without css at the 3rd or 4th spot depending on how many new posts i've created,then afterward goes to the proper place. is there a way to solve this?
Plus it apeears in my rss feed!, is there a way to stop that?
@MDLinkZ Hi, the sticky posts in this hack are "just posts", so they appear in RSS (good for announcing upcoming events, for example), and they also appear in the posts list (but are "moved" by the javascript to top on the first page).
If you want a sticky post that has not these "post like" characteristics, I think the "Gadget hack" might actually be a better choice for you. See for example here: http://dave-lucas.blogspot.com/2011/06/how-to-make-sticky-post.html.
By default the gadget appears on every page (also on post pages, search pages, etc). It is a bit tricky to remove it on other pages than the home page. You need some conditional CSS, for example like this, placed before </head>:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#HTML2 .widget-content { display:none; }
div#HTML2 { margin-bottom:-40px; visibility: hidden;}
</style>
</b:if>
HTML2 must be changed to reflect the ID of the html/javascript gadget. You may need to adjust the margin-bottom value, too, depending on your template.
Hope this helps :)
@MDLinkZ
I made some kind of a demo of the gadget sticky post here: http://yabtb-demo1.blogspot.com/
@MS-potilas
Thanx!
(I had removed the sticky post code from my site for a short while,but i'll replace it in a few hours)
aaah, i understand! if i use gadget hack they won't be seen in rss feed. i think that's fine, i'll try it.
nice..
but i want the stcky in my sidebar
how i can do that?
thanks.. :)
@ikhwan maftuh
Maybe featured posts in sidebar would work better for you, for example: http://www.bloggerplugins.org/2011/09/featured-posts-widget-for-blogger.html
This won't work for my blog (teamgoldofcp.blogspot.com) Am I missing anything?
@Saint Spice
Hi, now it looks like you got it working (two stickies in main page). :) You might want to set showShareButtons = false; to hide the share buttons, which are not visible in your blog in the normal posts. And if you want only one sticky, set maxStickies = 1;
not working in my blog
http://jadikanpinter.blogspot.com/p/tesstt.html
Excellent Post...
I did what you said, but the formatting of the stickied article is off. How do I fix that?
blog: www.netstakeover.blogspot.com
Thank you!
@Ali Tahir
Hi, in the CSS section try changing both "padding: 8px;" and "padding: 4px;" to "padding: 0;".
@MS-potilas
The post font and title are off from the rest of the articles
@Ali Tahir
Hi, the final outcome depends on the styles on your template. I think you could use the same styles as in normal post by doing following changes:
Find:
strBuffer += "<div class=\"sticky-post\">";
Replace with:
strBuffer += "<div class=\"sticky-post post-body post\">";
Find (at end of line 100):
"</a></h3><br />";
Replace with:
"</a></h3>";
First modification makes the text and title use same styles as normal post. Second modification removes extra space after title.
As extra styling, I would also remove the background-color from stickies-container, like this:
.stickies-container { padding: 0; margin-bottom: 2em;}
or make it white:
.stickies-container { background-color: #FFFFFF; padding: 0; margin-bottom: 2em;}
If you want, you can also remove sticky-post background-color or change the color to your liking.
Hi,
Is this still working till todays 2012 blogger?
I tried it and doesn't work, I tried looking here in the comments for fixes and didn't find any.
I also tried doing the date hacks as suggested about posts having the same dates in a day.
Can you help out?
@Ivan Rubio
Hi,
I have not installed this hack on new blogs lately, but it still works in this blog. Some have installed it in late 2012 with success, and I don't think there's so much change in the basic templates, that it should not work. In addition to installing the script, you need to give "sticky" label to at least one post.
If you have static sticky post (that does not change very often), you could try the gadget method instead.
Thanks so much! This is absolutely perfect. Saved me so much time.
This code is awesome and works very well, but there were two problems when I implemented it...
1 - Cause of a weird conflict, the script I have in some posts to show random images suddenly disappears in the sticky post though it works fine in the original post... Posts with regular posted images work without problems too...
2 - Not really a problem, more like a functionality that I couldn´t make work... Lets say that I wanted to stick 365/366 posts and set each to show in a specific day of the year...
Something like this blog: http://birthday.2-d.jp
It's possible with this code?
Até mais ver
mr. Poneis
@mr.Poneis
Hi, thank you for your comment.
1. Unfortunately scripts in sticky posts are not run. It is this way because the contents of sticky posts are fetched from blog feed and displayed by javascript.
2. Something like that can be done with simple modification. Replace line:
var stickyLabel = "sticky"
with two lines:
var now = new Date();
stickyLabel = "sticky-" + now.getMonth() + "-" + now.getDate();
For January 1st the label you should use for sticky post is "sticky-1-1", for December 31th the label is "sticky-12-31" etc., "sticky-month-day".
@MS-potilas
2 - Let me try that asap!
1 - Well, it still works fine with a single image, so that's fine.
Thank you very much!
Até mais ver
mr. Poneis
@MS-potilas
Dear God...
Works as expected once if you figures that January = 0 and arranges the tags according!
And wow... I couldn´t ask for better!
Once again, thank you very much!
Até mais ver
mr. Poneis
@MS-potilas There's a way to get only the first image of the bundle?
Até mais ver
mr. Poneis
Hi, MS Potillas!
I'm trying to insert your sticky post code into my blog. It works, but two of the posts in the first page disappear. There is only the sticky post and just one post of the three they should be there. Do I do something wrong?
@Twinkler
Hi, sorry for not noticing your comment from all the spam... Maybe the disappearing posts have the same date as the sticky post, then you should use also this http://yabtb.blogspot.fi/2011/09/show-date-on-all-blogger-posts-within.html.
@MS-potilas
Hi, and thank you for the reply. No, it's not this, the dates are different. Perhaps the problem has to do with the pages numbers gadget. I don't know. Is it possible to check it and see what's the problem is? http://mandolino111-twinkler.blogspot.com.cy/
I noticed this: When I have the first page showing 4 post (the next pages show 5), then the 5th post disappears. Thanks again. :)
See the hack to make the 'Post a Comment' link bigger.
Post a Comment