If you have download my latest Wordpress theme, you may notice that there is a little different from the orginal. There are some features that I eliminated to decrease file size.

One of the feature that is not available on the theme is my invention of “Advance Reading Options” section.

It’s my new method to increase my blog pageview and conversion rate for my older posts. Inside of ARO, you would get the following list of Posts:

• Related Posts
• Top Posts
• Recent Posts
• Random Posts

It’s pretty useful when peoples arrive at my blog via search engine. When the finish reading the current posts, they will be offered automatically a lists of related posts to read more.

Actually, the arrangement of ARO (where Related posts at the front and Random posts at the end) is using the psychologic call to make reader taking their actions.

ARO is using a AJAX animation called Script.aculo.us. Visit the link to get some point about what it is.

To setup ARO for your blog, no matter what your theme is, you can use the following 1-2-3 steps to apply ARO:

1. First of all, visit Script.aculo.us and download the latest version of the Js script.
2. Extract it the follow files into one folder labeled ‘js’ (or ‘javascripts’):
   1. prototype.js
   2. scriptaculous.js
   3. builder.js
   4. effects.js
   5. dragdrop.js
   6. slider.js
   7. controls.js
3. Upload the folder ‘js’ to your current theme folder in your web server (if you are using Transformation, upload inside the transformation folder)
4. Add the following code to your header.php file:

   1 2	<script src="<?php bloginfo('template_url'); ?>/js/prototype.js" type="text/javascript"></script> <script src="<?php bloginfo('template_url'); ?>/js/scriptaculous.js" type="text/javascript"></script>

5. Update the file.

Now, you’ve activated the script function to allow AJAX animation. You will not see any change, yet. The next step is to create the following element for your page:

• Set a section of your page that you want to animate
• 2 button - Hide and Show button

There are a lot of transition effect and animation available for you to use via Script.aculo.us. Primarily, I use these following effects only:

• BlindUp - Effect to hide the chosen section
• BlindDown - Effect to drop down a section of animation

Use this following code as your template and change the content to suit your blog CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<h2><strong>Advance Reading Option</strong></h2>
<h3><a onclick="Effect.BlindDown('advance')" style="cursor: pointer"><strong>[show]</strong></a></h3>
<!-- begin - animation section --> 
    <div id="advance" style="display:none"> 
       <h2>Related Posts</h2> 
            <ul> 
                <!--Related post script goes here--> 
            </ul> 
        <h2>Top Posts</h2> 
            <ul> 
                <!--Top Posts script goes here--> 
            </ul> 
        <h2>Random Posts</h2> 
            <ul> 
                <!--Random posts script goes here--> 
            </ul> 
    </div>
 
<!-- end - animation section -->
 
<h3><a onclick="Effect.BlindUp('advance')" style="cursor: pointer"><strong>[hide]</strong></a></h3>

Update your page and try it with your favorite browser. It should be compatible with most of the nowadays browser.

The animation comes hidden by default. There are an arguments around the web about the laziness of reader will result in no clickthrough if I hide the list at first and ask them to click to open.

So, if you choose to show everything at first, remove the style="display:none;" inside the div tag.

You may also want to switch the location of Hide and Show button, too. It’s weird to place the show button up front when all content is shown at first!

You could change the content to almost any kind of online content that you could imagine.

It’s depend on you now.

Fine this post useful? Consider Subscribing to the feed to receive daily updates.

Related Post

• Flash on Blog - Wise or Not?
• 3 Time-Saver Scripts for Firefox
• Social Bookmarking Button
• 18 Essential Photoshop Tutorials for Blogger
• Increase Popularity with CLIQin
• Schedule Posts - Good or Bad?
• Make Reader to Stay Longer on Your Blog
• Life Updates