AjaxPage [Neo] By Hackosphere

Template Neo bukan sahaja beberapa keajaiban CSS. Ia adalah satu template ultra-cepat dengan mana seseorang boleh menavigasi melalui blog anda dengan cepat. Ia menggunakan teknologi canggih yang dipanggil AJAX (khususnya JSON) dan menggunakan yang terbaik daripada ciri-ciri canggih daripada Blogger baru seperti suapan Label dan Per-post suapan komen. Dan ianya percuma juga! Untuk meringkaskan ia ciri-ciri:

1. Pengunjung boleh menavigasi melalui blog anda lebih cepat kerana seluruh halaman (semua barangan bar sisi) tidak akan Reloaded sambil melihat setiap post. Apabila dia memilih jawatan daripada senarai jawatan baru-baru ini (atau jawatan di bawah label tertentu), pos yang dipilih dan ulasannya dipaparkan serta-merta. Apabila dia memilih label, senarai pos di bawah label yang sarat asynchronously juga.

2. Juga, komen dibahagikan kepada muka surat dengan 10 komen di setiap halaman. Kedua-dua ciri-ciri ini membuat perbezaan besar jika blog anda mendapat banyak komen.

NEO PAGE UNTUK BLOGGER

Langkah 1 Buat halaman statik dan meletakkan kod ini:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPAIKYDNyivdX6Id6BIB9MdV9E64eq7Q5-s3jYgYaHpKou7Oq-byr8rEL9bMYXyXSuUPmvC9SflVE7kPnheyYxbySbopR_L8RmfYzr2owaVP02V_MrDNxKhAXmFDsswwbVoZH8ZcojyqH/s1600/index.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPAIKYDNyivdX6Id6BIB9MdV9E64eq7Q5-s3jYgYaHpKou7Oq-byr8rEL9bMYXyXSuUPmvC9SflVE7kPnheyYxbySbopR_L8RmfYzr2owaVP02V_MrDNxKhAXmFDsswwbVoZH8ZcojyqH/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>

Langkah 2 Cari Find the tag dan hanya di bawah itu, tambahkan kod berikut:

<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>

Langkah 3 Cari </ head> dan tag di atas, tambah kod berikut:

<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>

Langkah terakhir. Cari tag <b:includable id='main' var='top'> dan di bawahnya, tambah gantikan kod berikut:

<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>