Hiding Blog Post Rearrangement

Changing the order of Blogger blog posts using JavaScript, such as with the Post Reversal Script, has the drawback that the posts need to be loaded before they can be rearranged. The result is an unsightly load of posts in one order followed by a delayed apparent reload of the posts in the intended order.

The reloading effect can be masked by hacking the template to hide the widget containing the blog posts and only display it after the posts have been rearranged. The code for accomplishing this is simple but, unfortunately, must be placed at two remote positions in a blog's template.

To hide the posts, add the following to the stylesheet code toward the top of the template, such as before the line "/* Content" or some other line beginning with "/*":

/* Start Post Rearrangement Hiding CSS */
#Blog1 {visibility:hidden;}
/* End Post Rearrangement Hiding CSS */

Then to show the posts after they have been rearranged, add the following script just after whatever post reordering script you have added to your template and just before the closing BODY tag:

<!-- Start Post Rearrangement Hiding Code -->
<script type='text/javascript'>
//<![CDATA[
  document.getElementById("Blog1").style.visibility = "visible";
//]]>
</script>
<!-- End Post Rearrangement Hiding Code -->

Viewing the blog, you should initially see an empty area where the posts normally appear followed by the posts appearing in the intended order.

An alternative to the empty area is to add a background image to the container underlying the blog post widget. The image could be, for example, a TV test pattern or a "Please wait..." message. The CSS code for this is shown below, where url-to-an-image-file is the URL to an image you have uploaded to Blogger or that is located elsewhere on the net.

/* Start Post Rearrangement Hiding CSS */
#main {
  background-image: url( url-to-an-image-file );
  background-repeat: no-repeat;
}
#Blog1 {
  visibility:hidden;
}
/* End Post Rearrangement Hiding CSS */

Then to show the posts, use the following script. The background image is removed here in case the blog post container is transparent, in which case the underlying container's background image would be visible behind the blog posts.

<!-- Start Post Rearrangement Hiding Code -->
<script type='text/javascript'>
//<![CDATA[
  document.getElementById("main").style.backgroundImage = "none";
  document.getElementById("Blog1").style.visibility = "visible";
//]]>
</script>
<!-- End Post Rearrangement Hiding Code -->

Depending on the speed of a viewer's browser, the selected image will be displayed while the posts are being rearranged, followed by the posts appearing in the intended order.