Rascallifah ™: Ajax

<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-ysrxU60sNIA/U_FLq06xuNI/AAAAAAAACJg/fL9hNJsHxvE/s1600/ajax.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-ysrxU60sNIA/U_FLq06xuNI/AAAAAAAACJg/fL9hNJsHxvE/s1600/ajax.png" /></a></div><br />
<br />
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:<br />
<br />
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.<br />
<br />
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.<br />
<br />
<div style="clear: both; text-align: center;" class="separator"><a href="http://azman-abdaziz.blogspot.com/p/blog-page_23.html" rel="nofollow" target="_blank"><img alt="http://azman-abdaziz.blogspot.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3okAIXEFanLoqwg09eApAc2ltJ5iM40VUlspBcx-V8e78mZkl_HM5KdA73HQf6L1yl9rbcWDdtP5WHGdMoptvEsoC4CXE_-nG3khAGgFaDZQf8EUQB4_4zOYxzv8HR909WDlohQVW4bYw/s1600/button.png" style="border:none;"/></a></div><br />
<h3>NEO PAGE UNTUK BLOGGER</h3><br />
Langkah 1 Buat halaman statik dan meletakkan kod ini:<br />
<br />
<pre class="prettyprint"><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>
</pre><br />
Langkah 2 Cari Find the <b:section class="sidebar" id="sidebar" showaddelement="yes"> tag dan hanya di bawah itu, tambahkan kod berikut:<br />
<br />
</b:section><br />
<pre class="prettyprint"><b:widget id='HTML77' locked='false' title='tutorial' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://<span style="font-size: large;">YOURBLOGNAME</span>.blogspot.com/p/<span style="font-size: large;">YOURPAGENAME</span>.html&quot;'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>
fetchLatestPosts(&#39;http://<span style="font-size: large;">YOURBLOGNAME/OTHER</span>.blogspot.com/&#39;,&#39;&#39;);</script>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</pre><br />
Langkah 3 Cari </ head> dan tag di atas, tambah kod berikut:<br />
<br />
<pre class="prettyprint"><b:if cond='data:blog.url == &quot;http://<span style="font-size: large;">YOURBLOGNAME</span>.blogspot.com/p/<span style="font-size: large;">YOURPAGENAME</span>.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>
</pre><br />
Langkah terakhir. Cari tag <b:includable id='main' var='top'> dan <strike> di bawahnya, tambah </strike> gantikan kod berikut: <br />
<br />
<pre class="prettyprint"><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'/>

<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;'/> 
    </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'/>

<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>
</pre><style type="text/css">
pre .kwd, code .kwd{color:#e28964}pre .com, code .com{color:#aeaeae;font-style:italic}pre .atn, code .atn{color:#bdb76b}pre.prettyprint, code.prettyprint{background-color:#000;border-radius:8px}pre.prettyprint{margin:1em auto;padding:1em;white-space:pre-wrap;width:95%}ol.linenums{color:#aeaeae;margin-bottom:0;margin-top:0}li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8{list-style-type:none}pre .str, code .str, pre .atv, code .atv{color:#65b042}pre .typ, code .typ, pre .tag, code .tag{color:#89bdff}pre .lit, code .lit, pre .dec, code .dec{color:#3387cc}pre .pun, code .pun, pre .pln, code .pln{color:#fff}@media print{pre .com, code .com{color:#660000;font-style:italic}pre .typ, code .typ{color:#440044;font-weight:700}pre .lit, code .lit{color:#004444}pre .pun, code .pun{color:#444400}pre .pln, code .pln{color:#000}pre .atn, code .atn{color:#440044}pre .str, code .str, pre .atv, code .atv{color:#006600}pre .kwd, code .kwd, pre .tag, code .tag{color:#000066;font-weight:700}}
</style><br />
<script src="//rascallifah-codehosting.googlecode.com/svn/JS/Prettify.min.js" type="text/javascript"></script><br />

Ajax Blogger Tutorial AjaxPage [Neo] By Hackosphere

Template Neo bukan sahaja beberapa keajaiban CSS. Ia adalah satu template ultra-cepat dengan mana seseorang boleh menavigasi melalui blog ...

Baca lagi »

Rascallifah ™

AjaxPage [Neo] By Hackosphere

Catatan Popular

Arkib Blog