Pages

Sunday, April 8, 2012

11

How to make Blogger sticky post using a gadget

I have this other sticky post hack, which uses real Blogger posts. But for some Blogspot blogs that may not be the best solution, so lets see how we can do the sticky post thing using a HTML/Javascript gadget. I did not find "full solutions" where the sticky post works like it should, i.e. displays only on the first page of the blog, but not on other pages. So here is one, by me.


Adding the gadget

Go to Design, Page elements. Click Add a Gadget (any link will do, we will move the gadget to proper place afterwards).


Write the text/html you want in your "sticky post", click Save. I suggest to not use any title, it helps the correct alignment when gadget is hidden.


Now drag the new gadget to top of blog posts, like this:


Save.

Hide the gadget on other pages than first

Open template html for editing. Before </head> add this:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
div.main div.widget.HTML .widget-content { display:none; }
div.main div.widget.HTML { margin-bottom:-30px; visibility: hidden;}
</style>
</b:if>

Depending on your template you might have to change the value -30px to adjust the position of blog texts. -30px works for "Simple" template.

How to mimic a post in gadget html

Here's a "template" you can use in HTML/Javascript gadget contents to make the gadget have post-like title, spacing and body text.


This template works at least in "Simple" and "Awesome Inc." templates, probably in others, too. :)

[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

11 comments:

Mary C said... [reply]

Nice. I usually advise people to use the post-editor to generate the HTML (ie start to create a post, apply the formatting etc, copy the HTML, but don't publish it).

MS-potilas said... [reply]

@Mary C Hi, that is a good advice, the post editor has more formatting options than HTML/Javascript configuration window, and you can also upload images with it.

Noct said... [reply]

First time visit here, thanks for your great tips.

Follow immediately.

Jose Ponce said... [reply]

Wow, this blog has everything anyone need to improve their blogs, Thanks.

Taufik Nurrohman said... [reply]

Oh, God. This is easier than what I thought T_T

maralian said... [reply]

Can't seem to make jump break work in html/Javascript gadget. Any ideas?

MS-potilas said... [reply]

@maralian
You could have a part of the text in gadget, like


Sticky Title

Some text in the sticky post and some more text. But not all. Read more...


Last in the gadget is a link, which targets to a page (or post) in your blog, where you can write the rest of the text.

Another solution would be to use javascript to show/hide a part of the text, some instructions for example here:
Show/Hide Content with CSS and JavaScript
.

Miss Ten said... [reply]

I'm using this sticky hack for my blog.
May I know how to create a border & different background color for the sticky note?

Roger H. Charles said... [reply]

Thank you for this. A big help. You are more than "Just another tips blog". Top of the heap.

Muhammad Nouman Khalid said... [reply]

nothing is sticky on demo page lel

MS-potilas said... [reply]

@Muhammad Nouman Khalid
The "post like" section on top titled 'Sticky "post" (but not a real post)' is the "sticky post". http://yabtb-demo1.blogspot.com/#HTML2

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: