2013/08/08

블로거의 기능 확장을 위해 자바스크립트 파일을 외부에서 불러오는 방법


구글 블로거는 글 발행 방식이 html 방식으로 되어 있다. 그래서 블로거에 기능을 추가하려면, 클라이언트 스크립트 언어인 자바스크립트를 사용하게 된다.

블로거에서 제공하는 기본 기능들도 마찬가지이다. 예를 들어 얼마전부터 블로거에서 제공하는 구글플러스 댓글 기능은 상당히 많은 자바스크립트 파일을 사용한다. 그래서 구글플러스 댓글을 사용하는 경우 블로그의 로딩이 조금 느려질 수 있다.

그런데, 문제는 블로거에서 제공되는 기능들이 아닌 기능을 추가하려고 할 때이다. 보통 검색을 통해 찾을 자바스크립트 파일을 이용해서 기능을 추가하게 되는데, 블로거는 이미지 파일 이외에는 파일을 올릴 수가 없으므로, 자바스크립트 파일을 올려놓고 불러올 곳이 마땅치 않다는 문제가 있다.

이 글에서는 자바스크립트 파일을 올려놓을 곳에 대한 간단한 소개와 방법에 대해서 설명해보려 한다.


1. 자바스크립트 파일을 외부에서 불러와야 하는 이유는?

첫번째로, 자바스크립트 파일을 외부에서 불러오면, 블로그 방문자가 처음에 블로그에 접속할 때 그 파일을 불러오게 되고 브라우저는 그 파일을 캐시해 놓는다. 따라서 블로그의 다른 페이지에 접속할 때는 그 파일을 다시 불러오지 않게 되므로, 좀 더 빠른 로딩이 가능하다.

둘째로, 블로거의 기능을 확장할 때 대부분, 인터넷에서 검색을 통해 일반사용자가 만든 자바스크립트 파일을 찾아서 이용하게 되는데, 만약 그 파일을 올려놓은 사람이 그 주소에 올려놓았던 자바스크립트 파일을 삭제해버리거나 하면, 그 파일을 이용해서 추가한 기능에 오류가 발생하게 될 것이다. 따라서 가능하면 자바스크립트 파일을 다운 받아서 직접 다른 곳에 올려놓고 그 것을 이용해서 블로거의 기능을 확장하는 것이 블로그의 안정성 면에서 훨씬 더 좋다.

마지막으로, 어떤 자바스크립트 파일에는 몰래 링크같은 것을 숨겨놓는 경우가 있다. 그래서 블로그의 어떤 특정부분을 클릭하면 특정 블로그로 연결되게 된다. 이유는 두가지인데, 첫번째는 실수로 특정부분을 클릭해서 자신의 블로그에 방문하도록 하는 것이고, 두번째는 그 스크립트를 사용한 블로그에 자신의 링크를 남김으로써, 자신의 구글 검색 순위를 높이는 것이다. 구글 검색 순위에 결정적 역할을 하는 페이지랭크인바운드 링크(다른 사이트에서 자신의 사이트에 링크를 걸어주는 것)의 수를 중요시하기 때문이다.

그래서 이렇게 몰래 숨겨놓은 링크와 같은 것이 있을 때는 그것을 삭제해주는 편이 좋다. 당연히 파일을 수정한 후에는 직접 다른 곳에 올려놓고 그 파일을 불러와 써야 한다.

2. 블로거에서 자바스크립트를 사용하는 방법

1. 인터넷에서 찾은 자바스크립트 소스를 이용한다면, 그 소스를 올려놓은 사람이 어디에 그 소스를 삽입해야 하는지 자세히 설명해 놓았을 것이다. 그 소스에서 아래와 같은 형식의 소스를 찾아본다.

<script src="http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js"></script>
(참고로 이 소스는 www.domawe.com에서 포스팅해주신 페이지 네비게이션 소스에서 가져왔다.)


2. 위의 소스에서 "http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js" 부분이 자바스크립트 파일이다. 이 것을 복사해서 브라우저의 주소창에 붙여놓고 엔터를 치면, 브라우저에 따라서 바로 다운로드창이 뜨거나 아니면 자바스크립트 파일을 브라우저상에서 보여주게 된다. 브라우저 상에 자바스크립트의 내용이 뜨는 경우에는 키보드에서 "ctrl+s"을 눌러서 자바스크립트 파일을 저장해주면 된다.

3. 이제 다운받은 자바스크립트 파일을 다른 곳에 올려놓고 그 주소를 따서, 원래 소스의 자바스크립트 파일 주소를 대체해주면 된다.


3. 자바스크립트 파일 올리기

3.1. 구글드라이브에 자바스크립트 파일 올리기

1. 구글드라이브에 자바스크립트를 올릴 폴더를 만든다. 폴더를 만들 때는 좌상단의 만들기를 클릭하면 나오는 선택 메뉴에서 폴더를 클릭하거나, 만들기 버튼 조금 오른쪽 위에 있는 아이콘을 클릭해서 만들면 된다. 그 후 나오는 창에서 폴더의 이름을 입력하고 만들기를 누르면 새 폴더가 만들어진다.

 


2. 만들기 버튼 옆의 업로드 버튼을 클릭한 후, 파일 선택창에서 업로드할 파일을 선택하여, 파일을 올린다.




3. 올린 파일을 공유 설정하는데, 이 때 "비공개"로 되어 있는 것을 변경을 클릭해서 "웹에 공개"로 바꾼다. 그 후 마지막 스크린샷에 공유할 링크를 복사해 놓는다.










4. 공유링크는 다음과 같은 형식으로 되어 있다. 그것을 그 밑의 형식으로 바꿔준다. (중간에 0B로 시작하는 것이 파일 id이고 그것을 "https://googledrive.com/host/" 뒤에 붙여주면 된다)

https://docs.google.com/file/d/0BztVokLJZ-YlUHdzVGJlS3FzQWc/edit?usp=sharing
https://googledrive.com/host/0BztVokLJZ-YlUHdzVGJlS3FzQWc


5. 완성된 파일 주소로 원래 자바스크립트 파일 주소를 대체한다.
ex.) <script src="http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js"></script>
☞ <script src="http://googledrive.com/host/0BztVokLJZ-YlUHdzVGJlS3FzQWc"></script>


3.2. Dropbox에 자바스크립트 파일 올리기

1. Public 폴더가 사용 가능한 지 확인하고 사용이 불가능한 상태라면 다른 링크의 설명을 통해 Public 폴더를 활성화 한다. (Public 폴더를 활성화 하지 않아도 Dropbox에 자바스크립트 파일을 올리고 활용하는 것이 가능하지만 Public 폴더를 이용하는 것이 훨씬 더 편리하므로 Public 폴더를 이용하는 방법으로 설명한다.)

Dropbox(드롭박스) Public 폴더 기능 활성화 하기


2. Public 폴더에 자바스크립트 파일을 저장할 폴더를 생성한다.
폴더를 생성하려면 우상단에 있는 아이콘 중 두번째 아이콘을 클릭하면 된다. 폴더 생성 아이콘을 클릭하면 폴더가 생성되고, 폴더의 이름을 입력하는 창이 뜬다. 거기에 알맞은 이름을 입력해준다.

  


3. 생성한 폴더에 자바스크립트 파일을 올린다.
파일을 올리는 방법은 두 가지이다. 탐색기등에서 파일을 선택하여 마우스로 끌어서 브라주저 창에 떨구는 방법이 있고, 폴더를 생성할 때처럼 우상단의 아이콘을 이용하는 방법이 있다.

드래그앤 드롭으로 파일을 올릴 때는, 먼저 드롭박스의 특정 폴더로 들어간 후, 올리려고하는 파일을 드래그해서 웹브라우저 창에 놓으면 된다. 여러개의 파일이나 폴더를 올리는 것도 가능하다.



드래그앤 드롭으로 파일 업로드하기



업로드 아이콘을 클릭해서 파일을 올리려면 우상단 아이콘들중 첫번째 아이콘을 누른다. 그러면 「Upload to 'Dropbox'」창이 뜨고 거기에서 「Choose files」버튼을 눌러서 올리려고 하는 파일을 선택해서 올리면 된다.

아이콘을 클릭해서 파일 업로드 하기






파일 업로드 아이콘을 클릭한 후 뜨는 창, 여기서 Choose files를 클릭한 후 업로드할 파일을 선택하면 된다.














4. 업로드를 완료했으면, 이제 그 파일에 대한 공개링크주소를 따야 한다. Public링크 기능을 활성화되어 있으면 공개링크주소를 따는 것은 상당히 쉽다. 올린 파일에 마우스커서를 올려놓고 마우스 오른쪽 버튼을 클릭하면 「Copy public link」라는 메뉴를 클릭한다.





5. 그러면 「Copy public link」창이 뜨는데 그 창에 공개링크주소가 나온다. 주수 밑에 있는 「Copy to clipboard」버튼을 누르면 공개링크주소가 클립보드에 복사되므로, 그 주소를 다른 곳에 붙여넣어서 사용하면 된다.





6. 공개링크주소를 활용해서 블로거에 자바스크립트를 로딩하는 방법은 구글드라이브에서 설명한 것과 같다.

ex.) <script src="http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js"></script>
☞ <script src="http://googledrive.com/host/0BztVokLJZ-YlUHdzVGJlS3FzQWc"></script>


3.3. 구글드라이브와 Dropbox의 차이점

구글드라이브는 Dropbox에 비해 한국에서 속도가 더 빠르고, 구글에서 운영하기 때문에 더 안정적이다. 또한 상당히 많은 트래픽을 줘서, 어떤 상황에서도 트래픽 때문에 문제가 생기지 않는다. 
반면에 Dropbox는 공개링크주소를 따는 것이 편리하고, 파일들을 자동으로 압축 전송하기 때문에, 자바스크립트를 많이 쓰는 경우 속도 부분에 장점이 있다. 다만 무료 사용자의 경우 트래픽 제한이 하루에 20GB로 정해져 있으므로, 그 제한이 넘어가는 경우, 그 계정의 모든 공유링크가 막혀버린다. 며칠이 지나면 제한이 풀리기는 하지만, 불편할 수 있는 부분이다. 하지만 자바스크립트는 상당히 작은 용량이므로, 자바스크립트만으로 트래픽 제한을 넘기기는 힘들다. 따라서 용량이 큰 파일을 공유할 때는, 자바스크립트를 저장한 계정과 다른 계정을 이용하는 것이 좋다.


4. 자바스크립트 파일에서 몰래 링크 제거하기

위의 페이지 네비게이션 스크립트에도 몰래 링크가 숨어 있다. 그래서 페이지 네비게이션 스크립트를 예시로 들어, 몰래 링크를 제거하는 방법을 설명해 보려 한다.


1. 자바스크립트 파일을 텍스트 에디터를 이용해서 열어본다. 이 때 notepad++ 등의 에디터를 사용하며 좀 더 쉽게 소스를 파악할 수 있다.

2. 파일을 열어봤는데, 알아볼 수 없는 이상한 기호들이 나열되어 있다면, 그건 스크립트가 압축되어 있는 것이다. 그럴 때는, Online JavaScript beautifier 에서 원래의 자바스크립트 파일로 복원할 수 있다.

방법은 간단하다. 밑의 큰 창에 스크립트 파일의 내용을 모두 복사해서 넣고 "Beautify JavaScript or HTML" 버튼을 클릭하면 된다.

아래의 소스는 페이지 네비게이션의 압축된 소스와 그것을 다시 복구시킨 소스이다.


압축된 소스

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 L;7 j;7 h;7 v;1A();H 1z(1d){7 6=\'\';M=K(12/2);5(M==12-M){12=M*2+1}C=h-M;5(C<1)C=1;e=K(1d/m)+1;5(e-1==1d/m)e=e-1;D=C+12-1;5(D>e)D=e;6+="<4 9=\'1M\'>1L "+h+\' 1Y \'+e+"</4>";7 17=K(h)-1;5(h>1){5(h==2){5(j=="u"){6+=\'<4 9="1Z"><a b="\'+B+\'">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">\'+S+\'</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+17+\');x w">\'+S+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+17+\');x w">\'+S+\'</a></4>\'}}}5(C>1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}5(C>2){6+=\' ... \'}1s(7 k=C;k<=D;k++){5(h==k){6+=\'<4 9="24">\'+k+\'</4>\'}c 5(k==1){5(j=="u"){6+=\'<4 9="g"><a b="\'+B+\'">1</a></4>\'}c{6+=\'<4 9="g"><a b="/r/s/\'+v+\'?&d-l=\'+m+\'">1</a></4>\'}}c{5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+k+\');x w">\'+k+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+k+\');x w">\'+k+\'</a></4>\'}}}5(D<e-1){6+=\'...\'}5(D<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+e+\');x w">\'+e+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+e+\');x w">\'+e+\'</a></4>\'}}7 16=K(h)+1;5(h<e){5(j=="u"){6+=\'<4 9="g"><a b="#" y="N(\'+16+\');x w">\'+1l+\'</a></4>\'}c{6+=\'<4 9="g"><a b="#" y="O(\'+16+\');x w">\'+1l+\'</a></4>\'}}6+=\'<1q><a b="1n://1O.1K.1m" 1R="1Q 1S" 1D="1E-1F: 1I; 1G: 1H; 1N: 2d;" 28="27"><1o 26="0" J="1n://2a.2b.1m/1o/2f.2e" 1T="3" 2c="3" /></a></1q>\';7 E=z.1W("E");7 18=z.1V("1U-1X");1s(7 p=0;p<E.Q;p++){E[p].1i=6}5(E&&E.Q>0){6=\'\'}5(18){18.1i=6}}H 1f(X){7 Y=X.Y;7 1C=K(Y.22$21.$t,10);1z(1C)}H 1A(){7 i=o;5(i.f("/r/s/")!=-1){5(i.f("?V-d")!=-1){v=i.I(i.f("/r/s/")+14,i.f("?V-d"))}c{v=i.I(i.f("/r/s/")+14,i.f("?&d"))}}5(i.f("?q=")==-1&&i.f(".6")==-1){5(i.f("/r/s/")==-1){j="u";5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p("<n J=\\""+B+"P/R/U?d-l=1&13=15-Z-n&T=1f\\"><\\/n>")}c{j="s";5(i.f("&d-l=")==-1){m=20}5(o.f("#G=")!=-1){h=o.I(o.f("#G=")+8,o.Q)}c{h=1}z.1p(\'<n J="\'+B+\'P/R/U/-/\'+v+\'?13=15-Z-n&T=1f&d-l=1" ><\\/n>\')}}}H N(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H O(F){11=(F-1)*m;L=F;7 W=z.1r(\'1g\')[0];7 A=z.1w(\'n\');A.1t=\'1v/1u\';A.1y("J",B+"P/R/U/-/"+v+"?1B-1j="+11+"&d-l=1&13=15-Z-n&T=1e");W.1h(A)}H 1e(X){1c=X.Y.25[0];7 1x=1c.1k.$t.I(0,19)+1c.1k.$t.I(23,29);7 1a=1P(1x);5(j=="u"){7 1b="/r?V-d="+1a+"&d-l="+m+"#G="+L}c{7 1b="/r/s/"+v+"?V-d="+1a+"&d-l="+m+"#G="+L}1J.b=1b}',62,140,'||||span|if|html|var||class||href|else|max|maksimal|indexOf|showpageNum|nomerhal|thisUrl|jenis|jj|results|postperpage|script|urlactivepage|||search|label||page|lblname1|false|return|onclick|document|newInclude|home_page|mulai|akhir|pageArea|numberpage|PageNo|function|substring|src|parseInt|nopage|nomerkiri|redirectpage|redirectlabel|feeds|length|posts|upPageWord|callback|summary|updated|nBody|root|feed|in||jsonstart|numshowpage|alt||json|nextnomer|prevnomer|blogPager||timestamp|alamat|post|banyakdata|finddatepost|hitungtotaldata|head|appendChild|innerHTML|index|published|downPageWord|com|http|img|write|div|getElementsByTagName|for|type|javascript|text|createElement|timestamp1|setAttribute|loophalaman|halamanblogger|start|totaldata|style|font|size|float|right|7pt|location|blogspot|Page|showpageOf|padding|24work|encodeURIComponent|Blogger|title|Templates|width|blog|getElementById|getElementsByName|pager|of|showpage||totalResults|openSearch||showpagePoint|entry|border|_blank|target||img1|blogblog|height|2px|gif|blank'.split('|'),0,{}))


복구된 소스

var nopage;
var jenis;
var nomerhal;
var lblname1;
halamanblogger();

function loophalaman(banyakdata) {
    var html = '';
    nomerkiri = parseInt(numshowpage / 2);
    if (nomerkiri == numshowpage - nomerkiri) {
        numshowpage = nomerkiri * 2 + 1
    }
    mulai = nomerhal - nomerkiri;
    if (mulai < 1) mulai = 1;
    maksimal = parseInt(banyakdata / postperpage) + 1;
    if (maksimal - 1 == banyakdata / postperpage) maksimal = maksimal - 1;
    akhir = mulai + numshowpage - 1;
    if (akhir > maksimal) akhir = maksimal;
    html += "<span class='showpageOf'>Page " + nomerhal + ' of ' + maksimal + "</span>";
    var prevnomer = parseInt(nomerhal) - 1;
    if (nomerhal > 1) {
        if (nomerhal == 2) {
            if (jenis == "page") {
                html += '<span class="showpage"><a href="' + home_page + '">' + upPageWord + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">' + upPageWord + '</a></span>'
            }
        } else {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + prevnomer + ');return false">' + upPageWord + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + prevnomer + ');return false">' + upPageWord + '</a></span>'
            }
        }
    }
    if (mulai > 1) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="' + home_page + '">1</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">1</a></span>'
        }
    }
    if (mulai > 2) {
        html += ' ... '
    }
    for (var jj = mulai; jj <= akhir; jj++) {
        if (nomerhal == jj) {
            html += '<span class="showpagePoint">' + jj + '</span>'
        } else if (jj == 1) {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="' + home_page + '">1</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="/search/label/' + lblname1 + '?&max-results=' + postperpage + '">1</a></span>'
            }
        } else {
            if (jenis == "page") {
                html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
            } else {
                html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
            }
        }
    }
    if (akhir < maksimal - 1) {
        html += '...'
    }
    if (akhir < maksimal) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + maksimal + ');return false">' + maksimal + '</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + maksimal + ');return false">' + maksimal + '</a></span>'
        }
    }
    var nextnomer = parseInt(nomerhal) + 1;
    if (nomerhal < maksimal) {
        if (jenis == "page") {
            html += '<span class="showpageNum"><a href="#" onclick="redirectpage(' + nextnomer + ');return false">' + downPageWord + '</a></span>'
        } else {
            html += '<span class="showpageNum"><a href="#" onclick="redirectlabel(' + nextnomer + ');return false">' + downPageWord + '</a></span>'
        }
    }
    html += '<div><a href="http://24work.blogspot.com" title="Blogger Templates" style="font-size: 7pt; float: right; padding: 2px;" target="_blank"><img border="0" src="http://img1.blogblog.com/img/blank.gif" width="3" height="3" /></a></div>';
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    for (var p = 0; p < pageArea.length; p++) {
        pageArea[p].innerHTML = html
    }
    if (pageArea && pageArea.length > 0) {
        html = ''
    }
    if (blogPager) {
        blogPager.innerHTML = html
    }
}

function hitungtotaldata(root) {
    var feed = root.feed;
    var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
    loophalaman(totaldata)
}

function halamanblogger() {
    var thisUrl = urlactivepage;
    if (thisUrl.indexOf("/search/label/") != -1) {
        if (thisUrl.indexOf("?updated-max") != -1) {
            lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
        } else {
            lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
        }
    }
    if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
        if (thisUrl.indexOf("/search/label/") == -1) {
            jenis = "page";
            if (urlactivepage.indexOf("#PageNo=") != -1) {
                nomerhal = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
            } else {
                nomerhal = 1
            }
            document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")
        } else {
            jenis = "label";
            if (thisUrl.indexOf("&max-results=") == -1) {
                postperpage = 20
            }
            if (urlactivepage.indexOf("#PageNo=") != -1) {
                nomerhal = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
            } else {
                nomerhal = 1
            }
            document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + lblname1 + '?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')
        }
    }
}

function redirectpage(numberpage) {
    jsonstart = (numberpage - 1) * postperpage;
    nopage = numberpage;
    var nBody = document.getElementsByTagName('head')[0];
    var newInclude = document.createElement('script');
    newInclude.type = 'text/javascript';
    newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
    nBody.appendChild(newInclude)
}

function redirectlabel(numberpage) {
    jsonstart = (numberpage - 1) * postperpage;
    nopage = numberpage;
    var nBody = document.getElementsByTagName('head')[0];
    var newInclude = document.createElement('script');
    newInclude.type = 'text/javascript';
    newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + lblname1 + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
    nBody.appendChild(newInclude)
}

function finddatepost(root) {
    post = root.feed.entry[0];
    var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
    var timestamp = encodeURIComponent(timestamp1);
    if (jenis == "page") {
        var alamat = "/search?updated-max=" + timestamp + "&max-results=" + postperpage + "#PageNo=" + nopage
    } else {
        var alamat = "/search/label/" + lblname1 + "?updated-max=" + timestamp + "&max-results=" + postperpage + "#PageNo=" + nopage
    }
    location.href = alamat
}


3. 이제 이 소스에서 "http://" 로 검색해본다. 그리고 주소가 포함된 라인을 지워준다. 페이지 네비게이션 소스에서는 아래의 라인이 검색되는데 그 라인을 지워주면 된다.

html += '<div><a href="http://24work.blogspot.com" title="Blogger Templates" style="font-size: 7pt; float: right; padding: 2px;" target="_blank"><img border="0" src="http://img1.blogblog.com/img/blank.gif" width="3" height="3" /></a></div>';


4. 저장한 후 그 파일을 업로드한 다음 그 주소를 따서 사용해보고, 별다른 이상이 없는 지 확인한다. 문제가 생기는 경우에는 다시 원래 파일을 사용하거나, 자바스크립트에 대한 지식이 있는 사람들에게 문의를 하는 것이 좋다.



참고로 예시로 든 페이지 네비게이션 기능을 사용할 때는 블로거 템플릿에 삽입하는 소스중 아래 부분도 삭제해야 몰래 링크가 완전히 없어진다.

<a href="http://24work.blogspot.com/" target="_blank" title="Grab this"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>

Print Friendly and PDF

댓글 27개 :

  1. 구글 드라이브를 호스트로 사용하는 방법이 있었군요!ㅠㅠ대박 당장 적용하러 갑니다~

    답글삭제
    답글
    1. 도움이 되셨다니 기쁩니다. 다음에도 자주 찾아와 주세요. ^^

      삭제
  2. 쉽게 설명해주신 덕분에 잘 쓰고 있습니다. 감사드립니다!

    답글삭제
    답글
    1. 잘 쓰신다니 저도 기분 좋네요. 제 블로그에도 자주 찾아와 주세요. ^^

      삭제
  3. 안녕하세요 저도 방금 보고 따라하려고 했는데,,, 저는 파일이 두개가 있어서요

    <script 를 찾아보니,,없는것같습니다.... 행아웃 확인부탁드립니다

    답글삭제
    답글
    1. 음.. 파일이 두개 있다는 것과 "<script.." 부분이 없다는 말씀을 이해하기 힘드네요.
      제가 쓴 글을 요약하면 다음과 같습니다.

      1. 다른 사람이 만든 자바스크립트를 적용하려면 우선 그 스크립트 주소를 찾는다.
      2. 그 스크립트를 다운 받아서 드롭박스나 구글드라이브에 올린 후 직접링크를 딴다.
      3. 그 링크를 이용해서 블로거 템플릿에 스크립트를 삽입한다.

      이 과정중 어느부분에서 문제가 발생한건가요?

      삭제
  4. ※ 참고로 예시로 든 페이지 네비게이션 기능을 사용할 때는 블로거 템플릿에 삽입하는 소스중 아래 부분도 삭제해야 몰래 링크가 완전히 없어진다.

    위의 문장이 어떤것을 말씀하시는것인가요?...

    http:// 가 엄청많은데.. 어떻게 알수있는지 좀더 자세히 설명부탁드립니다.

    감사합니다.

    답글삭제
    답글
    1. 삽입할 자바스크립트 코드만 텍스트 에디터에 붙여넣으신 후 "http://"로 시작하는 것을 찾은 후, 외부 링크가 삽입되어 있으면 지우면 됩니다.

      위에 예시로 든 스크립트에는 앞에서 설명한 것 4.3에서 설명한 것 이외에도 그런 링크가 있어서 지워야 한다고 설명했던 겁니다.

      혹시 스크립트뿐만 아니라 블로거 템플릿 전체에서 "http://"를 검색하신 건 아닌가요?

      삭제
    2. ;; 네 전체를 해버렸네요..,. 그럼 스크립트에는 http:// 로 들어있는 문구 전체가 필요없다는 말씀이신가요?

      삭제
    3. 네. 99%는 필요가 없다고 보셔도 됩니다. 삭제해 보시고, 스크립트가 정상 작동하는지 테스트 해보세요. 괜찮으면 그대로 사용하시면 됩니다.

      삭제
    4. 네 감사합니다 ^^ 덕분에 많이 고쳤습니다.

      삭제
    5. 다행이네요. 좋은 블로그 만들어가시길 빕니다. ^^

      삭제
  5. 안녕하세요 ^^

    질문을 너무 자주 하는것 같네요... ;;;

    이번에는 CSS 코드를 자바 스크립트처럼 올리는것인데요..

    다른사람들이 https://dl.dropboxusercontent.com/s/6ijo28ljl13wftf/theblogger911.blogspot.com.blogtoc.css

    처럼 css코드를 불러서 사용하고 있는데,, 저는 해보았지만 안되더라구요..

    어디서 부터 인지도 모르겟구요...

    도와주세요~~ ><

    답글삭제
    답글
    1. 보통 <b:skin><![CDATA[ 과 ]]></b:skin> 사이에 있는 게 css 입니다.
      그걸 css파일로 만들어서 <head> 와 </head> 사이에 다음 코드를 이용해서 삽입하면 됩니다.
      <link rel="stylesheet" type="text/css" href="stylesheets.css" />

      다만 블로거에서 css 파일을 외부를 빼는 건 그리 추천하고 싶지 않습니다.
      css가 로딩될 때까지 블로그 화면이 뜨지 않는데, 웬만한 외부 서버는 블로거 서버보다 느리기 때문입니다.

      삭제
    2. css를 구글 드라이브에 호스팅하는 방법에 대해 자세히 설명한 글이 올라와서 소개합니다. 아래 링크를 확인해보세요.
      http://www.graphai.com/2014/06/external-css-with-google-drive.html

      삭제
    3. 답변 감사드립니다.

      구글 블로그에 대해서 잘 정리된 한국 사이트가 많지 않다보니

      질문 드릴 곳도 몇 군데가 없어서... 여기하고 다른 한 군데 계속 질문 중입니다 :)

      저의 질문은 :

      1. 링크 하신분께서 로딩 속도가 빨라진다고 하셨는데요... 그럼 어떻게 된것인지... 궁금합니다.

      삭제
    4. css를 구글 드라이브에 호스팅하면 생기는 장점은 세가지입니다.
      첫째는, css 파일이 구글 드라이브에 저장되서 데스크탑에서 쉽게 수정 가능합니다.
      둘째는, 방문자가 블로그를 방문할 때 처음 css파일을 전송받으면 다른 페이지에 접속할 때는 css를 다시 다운받지 않고, 로컬에 저장된 것을 사용하므로 전송량이 줄어들고 그에 따라 블로그의 속도가 빨라질 수 있습니다.
      셋째는, css를 저장한 서버가 속도가 빠르면 블로그의 속도가 빨라질 수 있습니다.

      다만 블로그는 한 번 접속해서 많은 페이지를 보는 경우가 별로 없기 때문에, css를 외부 서버에 저장했을 때, 그 서버가 느리면 오히려 로딩 속도가 느려질 수 있습니다. 블로거 서버보다는 구글 드라이브의 호스팅 서버가 더 느리기 때문에 추천드리지 않는다고 한 겁니다. 전 속도를 조금 더 빠르게 하기 위해서 한국 호스팅에 css를 호스팅하고 있으므로 구글 드라이브에 호스팅하는 것과는 좀 다릅니다.

      삭제
    5. 아하 그렇군요. 답변 감사드립니다.

      1. 구글 드라이브에 올린 css 파일이나 , 자바스크립트를 수정하려면

      다운받아서 수정해서 다시 호스팅을 하고 링크 주소를 바꾸어 주어야 하는것인

      가요?. 아니면 구글 드라이브 내 파일 수정 기능이 있어서 수정하고 저장하면

      링크도 바뀌지 않고 반영이 되는것인가요?... 수정버튼이 없는것 같더라구요..;;

      클릭해보니 그냥 사진처럼 나오는것같습니다.

      어떻게 쉽게 수정을 할수 있는지 알려주셨으면 합니다.

      2. 블로그 서버와 구글 드라이브 호스팅 서버 의 속도를 얼마나 차이나는지

      비교한 블로그 글이나.. 사이트 를 알려주실수 있으신가요?

      얼마나 차이가 나는지 알고 싶습니다.


      3. 한국 티스토리 같은데 아무것도 게시물이 없는 유령 사이트를 만들고

      css 와 자바 스크립트를 넣고 거기서 호스팅도 할수가 있을까요?


      답변 부탁드립니다

      감사합니다.


      삭제
    6. 1. 구글 드라이브 동기화 프로그램을 깔면, 구글 드라이브에 저장된 파일들이 PC에 저장되고, PC에 있는 파일을 수정하면 자동으로 구글 드라이브에 반영됩니다.

      2. 비교 사이트는 없습니다. 직접 ping으로 측정해보고 확인했습니다.

      3. 가능합니다.

      삭제
  6. 네 답변 감사드립니다.

    1. 그러면 파일 링크 주소는 따로 바꾸지 않아도 되는것인가요?

    웹 구글 드라이브에서는 수정할수 있는 방법이 없는것이죠?

    2. 속도는 ms 정도 무시할만한 차이인가요 ?

    3. 한국 서버에 넣으면 한국에서 빨라지는대신 미국사람들이 접속했을때는 느려지게 되는것인가요?

    답변 부탁드립니다 ^^

    답글삭제
    답글
    1. 1. 안바꿔도 됩니다. 크롬 메모장 확장 프로그램을 설치하면 웹에서도 수정 가능합니다.

      2. 글쎄요. 상황에 따라 다릅니다. 직접 테스트 해보시는 게 좋을 겁니다. 테스트할 때는 캐시 비우고 하시는 것 잊지 마시구요.

      3. 네. 한국에서는 빨라지고, 외국에서는 느려집니다. 전 한국인 대상 블로그라 한국 서버에 css와 js를 호스팅하고 있습니다.

      삭제
    2. 네 감사합니다

      크롬 메모장 확인해보도록 하겠습니다.^^

      삭제
  7. 안녕하십니까. 님의 포스트는 하나같이 정말 검색에 중요한 주옥같은 글이군요....정말 다시한번 감사드립니다.

    답글삭제
  8. 질문이 하나있습니다. 이것이 http://hoitallica.blogspot.com/ 저의 블로그입니다. 그런데 한번 들어가보시면 오른쪽 위에보면 유투브 플레이리스트 가 있습니다. 이유투브 플레이리스트는 http://helplogger.blogspot.kr/2013/09/how-to-embed-youtube-playlist-on-your.html 사이트의 소스를 참고했는데요. 하지만 문제가 생겼습니다. 모든것을 잘했는데 유투브플레이리스트에 스크롤바가 나오지않는겁니다. 그래서 몇번을 소스를 지우고 다시 넣고 했는데 안되는것이죠. 그러다 알아낸것이 저의블로그 왼쪽 상단에 이미지가 슬라이더처럼 움직이는 이미지 슬라이더가 잇는데 그것과 충돌이 일어난다는것을 어느분이 알려줘서 문제점을 발견햇습니다. 그분은 이미지 슬라이더를 지우면 된다고햇는데 지워도 여점이 안되었습니다.그래서 아예 블로그를 새로만들고 만들자마자 처음에 바로 유투브플레이리스트를 적용하니 스크롤이 아노고 정상이었습니다. 하지만 이미지슬라이더도 넣으면 역시나 스크롤이 바로 사라져 버립니다.

    이미지슬라이더하고 유투브 슬라이더하고 동시에 다사용하고 싶은데 충돌이 안나게 하는 방법이 있을 까요? 저는 html 초보라서 그냥 뭐넣어라 뭐해라 하면서 겨우겨우 하느라 이런 부분이 힘이드는군요....

    답글삭제
    답글
    1. 작성자가 댓글을 삭제했습니다.

      삭제
    2. 이런 유투브 플레이 리스트는 왼쪽 상단이구요 이미지슬라이더는 오른쪽 상단이네요 미안합니다...

      삭제
    3. 일단 성공했습니다 곰곰히 생각햇습니다. 님의 블로그에 보면 이런 문구가 있습니다. 제이쿼리인가요 그것이 많으면 충돌이 일어날수있다고 말이죠.하나만 작동하게 만들면 좋다고 말이죠....그래서 뭔가충돌이 일어난다면 가만이 살펴보다가 저의 블로그에는 맨마지막 까지 스크롤을 내리면 다시 맨위로 올리게 하는 업다운 버튼이 있습니다. 그것을 지우니 드디어 성공햇습니다.
      한마디로 업다운버튼 지우고 이미지슬라이더 지우고 하니 성공이더군요.. 결론은 제이쿼리인가 그것들이 많아서 서로 충돌이 일어나는 모양입니다.

      힌트 감사드립니다. 덕분에 충돌이라는것이 많다는것을 알게되어 또하나 배워갑니다.. 복받으세요

      삭제