Cara Membuat Nomor Halaman Pada Blog


     hm., hm.., hm..., ternyata eh ternyata saya masih di beri kesempatan untuk berposting hati ini juga.., tentang blogging tutorial saja deh., kalian tau buku pelajaran atau komik kan ? pasti tau lah.,  pasti kalian tidak asing lagi dengan nomor halaman di pojok bawah buku., gunanya jelas untuk mempermudah si pembaca mencari halaman.  Hal ini juga dapat di gunakan pada blog., mau tau caranya ? oK !
    Cara-caranya ini kalau dihafal tidak akan bisa karena kodenya yang begitu sangat banyak sekali. Langsung saja deh, cara membuat nomor halaman pada blog :
  1. Buka Blogger.com
  2. Klik Rancangan >> Edit HTML.
  3. Lalu klik/ centang kotak kecil yang ada diatas kode-kode.
  4. Letakkan kode di bawah ini, tepat diatas kode </b:skin> :

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #ccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #ccc;
    background-color:#ccc;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #ccc;
    background: #ccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #ccc;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333;
    }

    Ganti kode yang berwarna orange  ganti dan sesuaikan dengan warna template anda.
  5. Lalu cari kode ini :

    <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

  6. Letakkan kode berikut dibawah kode </b:section> :

    <script type="text/javascript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount = 5;
    var displayPageNum = 5;
    var upPageWord = 'Previous';
    var downPageWord = 'Next';



    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

    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!=''){
    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] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    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+'T00%3A00%3A00%2B08%3A00&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){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    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){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    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++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){

    if(thisNum>1){
    if(!isLablePage){
    html = ''+upPageHtml+' '+html +' ';
    }else{
    html = ''+upPageHtml+' '+html +' ';
    }
    }

    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

    if(thisNum<(postNum-1)){
    html += downPageHtml;

    }

    if(postNum==1) postNum++;
    html += '</div>';

    if(isPage || isFirstPage || isLablePage){
    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;
    }
    }

    }
    </script>

    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

    KETERANGAN:
    Tulisan yang berwarna MERAH (5) adalah jumlah nomor halaman yang akan di tampilkan (contoh: 1-2-3-4-5)Perhatikan Script ini:

    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
    Code yang berwarna merah (.com/ ) adalah domain extention dari website atau blog anda. Jika anda menggunakan domain yang ber-extention .co.cc maka anda harus mengganti (.com/ ) dengan ( .co.cc ), begitu seterusnya. Tapi jika anda masih menggunakan .blogspot.com anda tidak perlu lagi mengubahnya.
    Semoga saja postingku kali ini bermanfaat untuk kalian para blogger., hm., hm., hm., sekalian saya mengucapkan mohon maaf jika ada kesalahan saya ya.,  jangan lupa komentarnya..,

Artikel Terkait

10 komentar:

brugkembar mengatakan...

kodenya banyak sekali bro jadi bingung
tapi patut untuk dicoba

Deo Pein Nagato mengatakan...

yoyoi :p

ardiansyah mengatakan...

langkah no.6 ko' g berhasil ya gan?!

Deo Pradipta mengatakan...

salah mungkin sob.. soalnya "/b:section" itu banyak.. :/

Ino mengatakan...

yap aq mulai putus asa soalnya ga ada /b:slection

Deo Pradipta mengatakan...

heg ? blom dicentang kali sob y expand widget itu..

Moh imran mengatakan...

wah agak susah kali aku gagal

Deo Pradipta mengatakan...

memang sob.. coba aja yg lain ^^

aku goblog mengatakan...

makasih kang ilmunya

Zainal mengatakan...

terima kasih untuk info .. saya bokmark dulu .. kagak mudeng :D

Poskan Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -