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. :)
Click on a single comment to hide/show its text
11 comments:
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).
@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.
First time visit here, thanks for your great tips.
Follow immediately.
Wow, this blog has everything anyone need to improve their blogs, Thanks.
Oh, God. This is easier than what I thought T_T
Can't seem to make jump break work in html/Javascript gadget. Any ideas?
@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.
I'm using this sticky hack for my blog.
May I know how to create a border & different background color for the sticky note?
Thank you for this. A big help. You are more than "Just another tips blog". Top of the heap.
nothing is sticky on demo page lel
@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
See the hack to make the 'Post a Comment' link bigger.
Post a Comment