-->

Numberpage navigation di blogspot

11:19 PM
Bagi anda yang bosan dgn tampilan navigation yang disedia oleh blogger, anda bisa menggantinya dengan navigation berupa angka seperti pada wordpress. Caranya cukup mudah, anda tinggal mengikuti langkah-langkah berikut ini:
  1. Setelah itu cari kode

    <b:section class=’main’ id=’main’ showaddelement=’yes’>
    <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
    </b:section>
  2. Lalu letakkan kode dibawah ini tepat dibawah </b:section>

    &lt;script type=&quot;text/javascript&quot;&gt;
    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
    var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
    var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
    thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= &#39;&#39;;
    var upPageHtml =&#39;&#39;;
    var downPageHtml =&#39;&#39;;
    var pageCount = 5;
    var displayPageNum = 5;
    var upPageWord = &#39;Previous&#39;;
    var downPageWord = &#39;Next&#39;;
    var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=&#39;&#39;){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }
    postNum++;
    htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    }
    }//end if(post.category){
    itemCount++;
    }
    }else{
    if(title!=&#39;&#39;){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }
    if(title!=&#39;&#39;) postNum++;
    htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    itemCount++;
    }
    }
    for(var p =0;p&lt; htmlMap.length;p++){
    if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    if(fFlag ==0 &amp;&amp; p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    fFlag++;
    }
    if(p==(thisNum-1)){
    html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }
    if(eFlag ==0 &amp;&amp; p == thisNum){
    downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    eFlag++;
    }
    }//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    }//end for(var p =0;p&lt; htmlMap.length;p++){
    if(thisNum&gt;1){
    if(!isLablePage){
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }else{
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }
    }
    html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;
    if(thisNum&lt;(postNum-1)){
    html += downPageHtml;
    }
    if(postNum==1) postNum++;
    html += &#39;&lt;/div&gt;&#39;;
    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName(&quot;pageArea&quot;);
    var blogPager = document.getElementById(&quot;blog-pager&quot;);
    if(postNum &lt;= 2){
    html =&#39;&#39;;
    }
    for(var p =0;p&lt; pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }
    if(pageArea&amp;&amp;pageArea.length&gt;0){
    html =&#39;&#39;;
    }
    if(blogPager){
    blogPager.innerHTML = html;
    }
    }
    }
    &lt;/script&gt;
    &lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

  3. Sekarang anda tinggal mengedit kode berikut:


    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
    Ket: .com adalah nama blog yang harus anda masukkan contoh :http:x-ploits.blogspot.com menjadi:

    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;x-ploits.blogspot.com&quot;;

  4. Selanjutnya edit

    var pageCount = 5;
    pilih jumlah halaman yang akan anda tampilkan per halaman. Misalkan anda ingin menampilkan 7 halaman, maka setiap navigasi yang anda klik akan menampilkan 7 halaman. Contoh kodenya:

    var pageCount = 7;
  5. Sekarang tinggal anda ubah tampilan navigation dengan mengedit CSS nya.
  6. Sekedar saran sebelum anda mengotak-atik kode terlebih dahulu backup kode blog anda.
  7. Untuk melihat contohnya anda dapat melihatnya pada halaman utama blog saya.
  8. Nantikan juga tutorial mengenai trik blogger lainnya. Enjoy it…