Cara Membuat Nomor Halaman / Page Navigator Blog

Mungkin bagi sebagian para blogger yang sudah level ataas trik ini sudah sangat usang, tapi tidak ada salahnya apabila saya yang seorang pemula di dunia blog ingin berbagi tentang apa yang saya sudah dapatkan untuk dapat di bagikan lagi oleh para blogger yang lain yang ingin mengembangkan blognya. Trik ini adalah bagaimana cara membauat blog kita menjadi mirip sebuah buku yang memiliki halaman atau nomor halaman, jadi si pembaca dapat dengan mudah mengira-ngira pada posisi mana artikel yang pernah ia baca sebelumnya.
Baiklan bagi saya pemula cara ini sangat lah mudah sekali untuk di pelajari dan pasti berhasil menjadi apa yang sobat inginkan.
Langkah-langka pembuatannya adalah :
  1. Login ke blogger
  2. kemudian pilih rancangan/tata letak
  3. pilih edit html
  4. kemudian pada Template, centang expand tempale widget
  5. Tekan CTRL + F, kemudian cari kode ]]></b:skin>
  6. Copykan kode di bawah ini sebelum kode tersebut :
    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    border:1px solid #CCCCCC;
    margin:0 3px;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpageNum a:hover {
    background-color:#CCCCCC;
    border:1px solid #CCCCCC;
    }
    .showpagePoint {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#CCCCCC none repeat scroll 0 0;
    border:1px solid #CCCCCC;
    color:#333333;
    margin:0 3px;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpageOf {
    margin:0 3px 0 0;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpage a {
    border:1px solid #CCCCCC;
    padding:3px 7px;
    text-decoration:none;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link, .showpage a:link {
    color:#333333;
    text-decoration:none;
    }
  7. Kemudian Save template
  8. Lalu pilih elemen-elemen
  9. Tambahkan sebuah gadget html/javascript, kemudian copykan kode dibawah ini :
    <script type='text/javascript'>

    var home_page_url = location.href;


    var pageCount=1;
    var displayPageNum=3;
    var upPageWord ='Previous';
    var downPageWord ='Next';


    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 class="showpageOf"> Pages ('+(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 class="showpageOf"> Pages ('+(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;
    }


    }


    </script>
    <script type='text/javascript'>

    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>
  10. Save, kemudian letakkan di bawah "Posting Blog".
  11. Kemudian "Simpan".
  12. Dan Lihat Hasilnya.
Semoga Bermanfaat

Posting Komentar

0 Komentar