How to Create the Read Me Effect In Blogger

As i have stated in my previous post on Google AdSense Page Impressions and how to improve page views, In this post, i will teach you how to create the Read Me.. effect or more accurately called Expandable Posts much like in LiveJournal and so on for your blogger..

Difficulty: Average

Tutorial:

1. In Blogger go to: Go to Layout then EditHtml
2. Bank up a copy of your template by downloading it first (Always do that if you’re not sure of what you are doing)
3. Check Expand Widgets Template.
4. Press CTRL + F
5. Search for the following code:</head>
6. Paste the following code before the tag </head>

   <!--start read more javascript -->
   <script language='javascript' src='http://www.sigmirror.com/files/21141_xksdk/jquery-1.2.3.pack.js' type='text/javascript'/>
   <script language='javascript' src='http://www.sigmirror.com/files/21142_aajmq/jquery.extractor.js' type='text/javascript'/>

   <script type='text/javascript'>
   $(document).ready(function() {

   $(&#39;.excerpt&#39;).expander({
   slicePoint: 200, // This is the size of the summary you wish to show your readers Default is 100
   expandEffect: &#39;fadeIn&#39;,
   expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
   userCollapseText: &#39;[^]&#39; // default is &#39;[collapse expanded text]&#39;
   });

   });
   </script>
   <!-- End read more javascript –>

7. After that has been done, search for this set of codes or anything that is alike in dark blue (It will usually be the same if you are currently using the standard blogger template):
   
   <div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   
   
8. Simply replace the code in dark blue with the following:
   
   <b:if cond='data:blog.pageType != "item"'>
   <div class='excerpt post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   <a expr:href="data:post.url">Read More..</a> <!-- you can change what your readers see here -->
   <b:else/>
   <div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   </b:if>
   
   
9. Save and Preview your work.

Important Notes:

Do go to these URLs and copy and paste them into your own .js files.

Create an account with sigmirror and upload them to your own account

Then USE THE URL PROVIDED IN YOUR SIGMIRROR ACCOUNT and replace the codes from step 6

Reason: If too many people my code url, it will not work once the account reaches it’s bandwidth limit.

http://www.sigmirror.com/files/21141_xksdk/jquery-1.2.3.pack.js

http://www.sigmirror.com/files/21142_aajmq/jquery.extractor.js

Source

More Useful Information Here

Related Posts :