구글 블로그 글 목록 (post list) 수정 버전

google blogger 글 목록(post list) 자바 스크립트 수정버전.

원 스크립트 파일은 아래에서 받았다. 두 군데 모두 스크립트내용이 동일해 누가 원작자인지는 모르겠다.

http://cremazer.blogspot.com/2013/09/blogger-post-list.html

https://poisongodf.blogspot.com/2014/11/blog-post_28.html

수정 내용

- 리스트 항목 클릭 시 summary를 보여주던 문제를 포스트 페이지로 바로 이동하도록 수정

스크립트는 Blogger:레이아웃 > 가젯 추가 > HTML/JavaScript를 추가한 후 콘텐츠에 스크립트를 복사해 붙여 넣으면 된다. 

수정된 스크립트

<div class='refer_box'>

    <div align="left" id="posts"></div>

    <div align="center" id="posts-pgno" style="cursor: pointer;"></div>

</div>

<script language="Javascript" type="text/javascript">

var request =

{

    parameter: function(name) { return this.parameters()[name];},

    parameters: function()

    {

        var result = {};

        var url = window.location.href;

        var parameters = url.slice(url.indexOf('?') + 1).split('&');

        for(var i = 0;  i < parameters.length; i++)

        {

            var parameter = parameters[i].split('=');

            result[parameter[0]] = parameter[1];

        }

        return result;

    }

}  /*endof var request*/

var page = {

    init: function(home,max)

    {

        page.home = home;

        page.max = max;

        page.label = '';

        page.no = 1;

    },

    setPage: function()

    {

        var url = window.location.href;

        var pl = url.lastIndexOf("/label/");  

        var pq = url.lastIndexOf("?"); 

        if(pl != -1) page.label = url.substr(pl+7,((pq!=-1)?pq:url.length)-(pl+7));  

        if(url.indexOf("pgno") != -1) page.no = request.parameter("pgno");

    }

}/* end of var page*/

var obj = {

    init: function ()

    {

        obj.posts = document.getElementById('posts');

        obj.pgno = document.getElementById('posts-pgno');

    },

    SearchPosts: function ()

    {

        obj.s = document.createElement('script');

        obj.s.type = 'text/javascript';

        obj.s.charset = 'utf-8';

 

        if (page.label == '')

            obj.s.src = '' + page.home + '/feeds/posts/summary/?max-results=' + (page.no * page.max) + '&alt=json-in-script&callback=obj.SearchResult';

        else

            obj.s.src = '' + page.home + '/feeds/posts/summary/-/' + page.label + '?max-results=' + (page.no * page.max) + '&alt=json-in-script&callback=obj.SearchResult';

        //append.

        document.getElementsByTagName('head')[0].appendChild(obj.s);

    },/*end of SearchPosts: function (z) */

    SearchResult: function (z)

    {

        obj.displayposts(z);

        obj.displaypgno(z);

    },  /*end of SearchResult: function (z) */

    displayposts: function (z)

    {

        obj.posts.innerHTML = '';

        for (var i = (page.no - 1) * page.max; i < page.no * page.max; i++)

        {

            if (i >= z.feed.openSearch$totalResults.$t) break;

            var li = document.createElement("li");

            var a = document.createElement('a');

            li.style.fontSize = '12pt';

            li.style.color = '#555555';

            li.style.listStyleType = "lower-alpha";

            a.style.fontSize = '12pt';

            a.style.color = '#555555';

            var url = '';

            for (var j = 0; j < z.feed.entry[i].link.length; j++)

            {

                if (z.feed.entry[i].link[j].rel == 'alternate')

                {

                    url = z.feed.entry[i].link[j].href;

                    break;

                }

            }

            a.href = url;

            a.innerHTML = obj.escapeHtml(z.feed.entry[i].title.$t);

            li.appendChild(a);

            obj.posts.appendChild(li);

        }

    },

    displaypgno: function (z)

    {

        obj.pgno.innerHTML = '';

        var before = document.createElement('a');

        var next = document.createElement('a');

        var ten = parseInt((page.no-1)/10);

        var total = z.feed.openSearch$totalResults.$t;

        /* before page */

        before.innerHTML = ' << ';

        if(ten>0)  obj.onMouseDown(before, ten*10);

        obj.pgno.appendChild(before);

        /* page number */

        for(var i=ten*10; i< (ten+1)*10; i++)

        {

            if(i >= total/page.max)  break;

            var a = document.createElement('a');

            obj.onMouseDown(a,i+1);

            a.innerHTML = ' ' + (i+1) + ' ';

            if(i+1 == page.no)  a.style.color = 'red';

            obj.pgno.appendChild(a);

        }

        /* next page */

        next.innerHTML = ' >> ';

        if(ten< parseInt(total/page.max/5))

        obj.onMouseDown(next, (ten+1)*10+1);

        obj.pgno.appendChild(next);

    },  /*end of pongPgno: function(z)*/

    //mouse click event.

    onMouseDown: function(a, i)

    {

        a.onmousedown = function()

        {

            page.no = i;

            obj.SearchPosts();

        }

    },

    changeTime: function(str)

    {

        var s = str.lastIndexOf('.')-1;

        var e = str.lastIndexOf('+')+1;

        if(e<1)

        {

            e = str.lastIndexOf('-')+1;

            var str2 = str.substr(0,s) + '-' + str.substr(e,100);

        }

        else

        {

            var str2 = str.substr(0,s) + '%2B' + str.substr(e,100);

        }

        return str2;

    },

    escapeHtml: function (str)

    {

        str = str.replace(/&/g, "&");

        str = str.replace(/</g, "<");

        str = str.replace(/>/g, ">");

        return str;

    }

};  /*end of var obj*/

page.init('https://ryanclaire.blogspot.com', 5);

page.setPage();

obj.init();

obj.SearchPosts();

</script>

[note] 위 스크립트를 재사용시

1. page.init에서 url 수정

2. 'refer_box'는 블로그 css 추가에 추가한 html box model이다.

[관련 포스트]

구글 blogger 블로그 css 추가로 소스 코드용 박스 모델(html box model)을 만들다.