Rascallifah ™: Blogger

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

Terdapat beberapa Syntax Highlighters di luar sana, salah satu daripadanya adalah "Prettify" yang mudah dan ringan. Prettify secara automatik boleh highlight kod bagi banyak bahasa web (best on C-like and HTML-like) dan juga mempunyai banyak sambungan bahasa, jika anda memerlukan satu. Jadi saya setup demo yang mudah untuk menguji dan hasilnya agak baik.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-lFRdp0u_mYY/UTgf4bCiNzI/AAAAAAAADeE/OhDmP2SgM4g/s1600/syntax-highlighter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-lFRdp0u_mYY/UTgf4bCiNzI/AAAAAAAADeE/OhDmP2SgM4g/s1600/syntax-highlighter.png" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://social-demo-sbts.blogspot.com/2011/12/prettify.html" rel="nofollow" target="_blank"><img alt="http://masgusmarket.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>Setup </h3><br />
Menambah Prettify Syntax Highlighter kepada mana-mana CMS atau laman web adalah sangat mudah. Untuk Blogger anda hanya perlu pergi ke tab Template blog anda, klik butang "Edit HTML" dan menambah skrip di bawah sebelum <code></body></code> tag.<br />
<br />
<pre class="prettyprint"><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script></pre><br />
Seperti yang anda lihat bahawa projek ini dihoskan di <a href="https://code.google.com/" target="_blank">Google Code</a>. Ini adalah auto-loader yang secara automatik akan memuatkan JavaScript API yang diperlukan dan fail CSS dari subfolder SVN. Jadi perkara terakhir yang anda ditinggalkan adalah lagi di mana ia perlu menyerlahkan kod dengan menambah <code>class="prettyprint"</code> kepada <code>pre</code> dan / atau codetag dalam Blogger Post Editor, paparan HTML. Berikut adalah contoh:<br />
<br />
<pre class="prettyprint">$(function() {
 alert('I am using Prettify as Syntax Highlighter');
});
</pre><br />
Terdapat juga beberapa <a href="http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html" target="_blank">tema </a>yang ada yang boleh anda panggil dan memuatkan CSS dalam satu URL, di sini adalah satu contoh:<br />
<br />
<pre class="prettyprint"><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script></pre><br />
<h3>Hosting sendiri</h3><br />
Nah, tutorial di atas adalah persediaan belum berkuatkuasa yang mudah tetapi bagaimana jika anda mahu hosting Prettify pada pelayan anda sendiri? Blogger tidak membenarkan kita untuk hosting fail secara langsung, jadi jika anda telah mendapat perkhidmatan hosting maka ia baik, jika tidak, anda boleh menggunakan Google Code untuk memuat naik fail Syntax Highlighter.<br />
<br />
Muat turun borang fail pada <a href="http://code.google.com/p/google-code-prettify/downloads/list" target="_blank">halaman ini</a> , ekstrak menggunakan perisian arkib seperti WinRAR atau 7-Zip dan memuat naik "prettify.css" dan "prettify.js" fail dengan <a href="https://code.google.com/hosting/createProject" target="_blank">mewujudkan projek</a> . Kini sama seperti di atas menambah fail CSS sebelum dan skrip sebelum tag masing-masing. Untuk melaksanakannya anda perlu menambah prettyPrint(); sebelum menutup tag badan seperti yang ditunjukkan di bawah:<br />
<br />
<pre class="prettyprint"><html>
<head>
{All head contents}

<b:skin><![CDATA[
{Inline CSS}
]]></b:skin>
<link href="https://example.googlecode.com/.../svn/prettify.css" type="text/css" rel="stylesheet" />
{Other JavaScript}
</head>
<body>
{Header, Footer, DIVs}

Blogger Prettify Syntax Highlighter Tutorial Syntax Highlighter untuk Blogger

Terdapat beberapa Syntax Highlighters di luar sana, salah satu daripadanya adalah "Prettify" yang mudah dan ringan. Prettify secar...

Baca lagi »

Rascallifah ™

AjaxPage [Neo] By Hackosphere

Syntax Highlighter untuk Blogger

Catatan Popular

Arkib Blog