Advertise Here

Jumat, 27 Juli 2012

Home » » Membuat Page Number Keren di Blog

Membuat Page Number Keren di Blog

Membuat Page Number Valid Xhtml di Blog >> hari ini saya mengganti template salah satu blog saya, yaitu INFO-3K karena setelah saya cek di w3 ternyata banyak error yang saya temukan pada blog INFO-3K tersebut, dan saya menambahkan page number atau halaman bernomor atau page 1,2.3 di blog tersebut, nah kali ini DHARLA FERDANA membuat page number valid XHTML di blog tersebut.

Membuat Page Number Keren di Blog

Buat kamu yang ingin membuat page number pada blog kamu mungkin kode yang saya berikan ini akan membantu kamu agar tidak terjadi error di w3 saat kamu membuat page number di blog kamu.

Nah, inilah langkah-langkah membuat page number valid xhtml di blog:
  1. Login Ke Account Blogger kamu.
  2. Masuk Ke "Tata Letak lalu Edit HTML
  3. Dan Klik "Download Template Lengkap" untuk proses backup Template
  4. klik pada "expand..."
  5. Cari kode ]]></b:skin>
  6. Jika Sudah Ketemu, tambahkan kode di bawah ini diatas kode ]]></b:skin>
    /* Pagearea */
    .showpageArea{
    font-family:verdana,arial,helvetica;
    color:#000; font-size:11px; margin:10px;
    }
    .showpageArea a{
    color:#000;
    text-align:center;
    font:14px/100% Arial,Helvetica,sans-serif;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    color:rgba(0,0,0,0.9);
    text-shadow:1px 1px 0px rgba(255,255,255,0.8);
    border:2px solid white !important;
    background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
    background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
    text-decoration:none; padding:7px 20px 7px 20px;
    }
    .showpageNum a{
    padding:8px;
    padding-top:6px;
    padding-bottom:6px;
    margin:0 2px;
    text-align:center;
    font:16px/100% Arial,Helvetica,sans-serif;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    color:rgba(0,0,0,0.9);
    text-shadow:1px 1px 0px rgba(255,255,255,0.8);
    border:2px solid white !important;
    background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
    background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
    text-decoration:none; color:#000;
    }
    .showpageNum a:hover{
    padding:8px;
    padding-top:6px;
    padding-bottom:6px;
    margin:0 2px;
    text-align:center;
    font:16px/100% Arial,Helvetica,sans-serif;
    -webkit-border-radius:.5em;
    -moz-border-radius:.5em;
    border-radius:.5em;
    -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    color:rgba(0,0,0,0.9);
    text-shadow:1px 1px 0px rgba(255,255,255,0.8);
    border:2px solid white !important;
    background:#f78d1d;
    background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));
    background:-moz-linear-gradient(top, #faa51a, #f47a20);
    text-decoration:none; color:#000;
    }
    .showpageOf{
    text-align:center;
    -webkit-border-radius:.5em;
    -moz-border-radius:.5em;
    border-radius:.5em;
    border:2px solid white !important;
    background:#f78d1d;
    background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));
    background:-moz-linear-gradient(top, #faa51a, #f47a20);
    padding:1px 5px 1px 5px;
    margin:0 8px 0 0;
    }
    .showpagePoint{
    font-size:12px;
    padding:8px;
    padding-top:6px;
    padding-bottom:6px;
    margin:0 2px;
    text-shadow:0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow:1px 1px 4px #AAA;
    box-shadow:0 1px 2px rgba(0,0,0,.2);
    color:#940f04;
    border:2px solid white !important;
    background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
    background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
    }
  7. Lalu cari lagi kode </body>
  8. kemudian masukkan kode di bawah ini diatas kode </body>
    <script type='text/javascript'> var pageCount=7; var displayPageNum=3; var upPageWord =&#39;BACK&#39;; var downPageWord =&#39;NEXT&#39;; </script> <script type='text/javascript'> //<![CDATA[ function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages &#187;'+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages &#187;'+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}} //]]> </script>
  9. Cari lagi kode 'data:label.url' ganti dengan kode dibawah ini
    'data:label.url + &quot;?&amp;max-results=5&quot;'
  10. Simpan Template kamu.
Demikian cara membuat page number valid xhtml di blog, semoga berguna.

1 Komentar Pada Artikel » Membuat Page Number Keren di Blog