Neo Page By Hackosphere

Neo template is not just some CSS magic. It is an ultra-fast template with which one can navigate through your blog very quickly. As a result, your visitors would enjoy their stay in your blog. It employs the cutting edge technology called AJAX (in particular JSON) and makes best use of the advanced features of new Blogger such as Label feeds and Per-post comment feeds. And it's free too! To summarize it's features:

1. A visitor can navigate through your blog much faster because the entire page (all the sidebar stuff) won't be reloaded while viewing every post. When he selects a post from the list of recent posts (or posts under a particular label), the selected post and its comments are displayed instantly. When he selects a label, the list of posts under that label are loaded asynchronously too.

2. Newer comments are shown before older ones instead of the usual oldest to newest order. Also, comments are divided into pages with 10 comments in each page. Both these features make a big difference if your blog gets many comments.

ADDING NEO PAGE TO BLOGGER

Step 1. Create static page and put this code:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXZ0C9ctoqmrhhTp2JevCXLn2ZSVULt2_m6_WyifXVEPZ9JyibdbaXnUzFgY2BoYIhVV4IpYJUIoAu2wxLOe2zgmG-TAwhow2yGKdl4ypc1WOAnwerNJKo-l4JngS0u9b91ycG6d3BBjq/s1600/index.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXZ0C9ctoqmrhhTp2JevCXLn2ZSVULt2_m6_WyifXVEPZ9JyibdbaXnUzFgY2BoYIhVV4IpYJUIoAu2wxLOe2zgmG-TAwhow2yGKdl4ypc1WOAnwerNJKo-l4JngS0u9b91ycG6d3BBjq/s320/index.gif" /></a></div>
<script src='//rascallifah-codehosting.googlecode.com/svn/JS/prototype.js' type='text/javascript'></script>
<script src='//rascallifah-codehosting.googlecode.com/svn/JS/scriptaculous.js?load=effects' type='text/javascript'></script>
<script src='//rascallifah-codehosting.googlecode.com/svn/JS/hackosphere.js' type='text/javascript'></script>

Step 2. Find the tag and just below it, add the following code:

<b:widget id='HTML77' locked='false' title='tutorial' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://YOURBLOGNAME.blogspot.com/p/YOURPAGENAME.html&quot;'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>
fetchLatestPosts(&#39;http://YOURBLOGNAME/OTHER.blogspot.com/&#39;,&#39;&#39;);</script>
</div>
</div>
</b:if>
</b:includable>
</b:widget>

Step 3. Find the tag and just above it, add the following code:

<b:if cond='data:blog.url == &quot;http://YOURBLOGNAME.blogspot.com/p/YOURPAGENAME.html&quot;'>
<style type='text/css'>
#comments-block{line-height:1.6em;color:#7f7d77;margin:1em 0 1.5em;}
#comments-block .comment-author{background:#2A9FD6 none repeat scroll 0 
</style>
</b:if>

Final step. Find the tag and just below it, add replace with the following code:

<b:includable id='main' var='top'>
<b:if cond='data:blog.url != &quot;http://YOURBLOGNAME.blogspot.com/p/YOURPAGENAME.html&quot;'>
  PUT YOUR OLD CODE HERE....
  </b:if>
  <b:if cond='data:blog.url == &quot;http://YOURBLOGNAME.blogspot.com/p/YOURPAGENAME.html&quot;'>
  <div class='blog-posts hfeed'>
    <b:loop values='data:posts' var='post'>
      <b:include data='top' name='status-message'/>
      <b:include data='post' name='posts'/>

      <script language='javascript'>
      var blogAuthor = &#39;<data:post.author/>&#39;;
      fetchCommentsundefined&#39;<data:post.id/>&#39;);
      </script>
    </b:loop>
  </div>
    <div class='comments' id='comments'>
      <center><h2>No comments yet</h2></center>
    </div>
</b:if>
</b:includable>

dan kemudian Cari tag <b:includable id='post' var='post'> dan  hanya di bawah, tambah   menggantikan kod berikut:

<b:includable id='post' var='post'>
<b:if cond='data:blog.url != &quot;http://YOURBLOGNAME.blogspot.com/p/YOURPAGENAME.html&quot;'>
  PUT YOUR OLD CODE HERE....
  </b:if>   
<b:if cond='data:blog.url == &quot;http://YOURBLOGNAME.blogspot.com/p/YOURPAGENAME.html&quot;'>
<article class='post hentry' id='post'>
<i class='fa fa-calendar'/>  <span class='post-timestamp' id='PostDate'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

      <h1 class='post-title entry-title' id='PostTitle'>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h1>

    <div class='post-header-line-1'/>
    <style>#fullpost {display:none;}#navbar-iframe {display:none;}</style>
    <div class='post-body entry-content' id='PostContent'>
      <p><data:post.body/></p>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
        <span id='showlink' style='display:none'>
          <p><a href='javascript:showFullNeoundefined);'>Read More...</a></p>
        </span>
        <span id='hidelink' style='display:none'>
          <p><a href='javascript:hideFullNeoundefined);'>Collapse...</a></p>
        </span>
        <script type='text/javascript'>
          checkFullNeoundefined);
        </script>
    <div class='post-footer'>
    <p class='post-footer-line post-footer-line-1'>
      <span class='post-author'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/> <data:post.author/>
        </b:if>
      </span>
      <b:if cond='data:post.editUrl'>
      <span expr:class='&quot;item-control &quot; + data:post.adminClass' id='PostEditLink'>
      <a expr:href='data:post.editUrl' title='Edit Post'>
        <span class='quick-edit-icon'>&#160;</span>
      </a>
      </span>
      </b:if>
    </p>
      <span class='post-comment-link' id='PostCommentLink'>
            <a expr:href='data:post.addCommentUrl' target='_blank'>Leave a Comment</a>
      </span>

      <b:if cond='data:post.sharePostUrl'/>

      <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'/>
      </span>
      </div>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
</article>
</b:if>
</b:includable>