'티스토리' 태그의 글 목록 팡상닷컴

소스코드 변환전 스킨 저장을 생활화하자!

IT/Blog/2009. 5. 23. 11:38

데이터 백업의 중요성은 굳이 언급하지 않아도 다들 중요하게 여기실 것 입니다. 그런데 스킨 백업에 관해서는 무관심한 블로거님들이 많이 있더군요. 저 또한 스킨 백업에 대해서 그렇게 중요하게 여기지 않았습니다. 그래서 몇 번 스킨이 엉켜서 스킨을 새로 고칠 수 밖에 없었습니다.

스킨 저장과 스킨 불러오기 방법 ● Skin Save : 관리자 → 스킨 → 스킨 저장
● Skin Load : 관리자 → 스킨 → 저장한 스킨 → 스킨 선택 적용

스킨 수정전 스킨 백업을 하라!

스킨을 자주 수정하시는 분은 스킨 저장을 생활화 해야 합니다. 간단한 스킨 수정일지라도 스킨 저장을 꼭 하라고 강조하고 싶습니다. 잘못해서 없어서는 안 되는 소스코드를 지워버려서 스킨이 엉망진창으로 변한 경험을 해본 블로거님들도 많을 것 입니다.

한번 엉망진창으로 바뀐 스킨을 다시 복구시키는 작업은 정말 어려운 작업입니다. 엉망진창이 된 스킨을 백업하지 않고 소스코드 수정 전에 skin.html 의 소스코드만 복사해서 엉망진창이 된 스킨을 복원하는 방법도 있지만 전 비 추천합니다.

skin.html 소스코드만 엉망진창이 된 스킨 전으로 돌려놓는다고 해서 스킨 수정 전으로 제대로 복원되지 않는 경우가 많기 때문입니다. 그래서 스킨을 통 체로 백업하는 작업이 중요합니다.

스킨 백업 자료는 함부로 지우지 마라!

스킨 수정 완료 후 백업된 스킨 자료를 지우는 경우가 많습니다. 지금은 제대로 스킨을 고쳤다고 생각하지만 언제 어느 부분에서 스킨의 잘못된 점을 발견할 수 있습니다. 그때 간단한 버그는 금방 고칠 수 있지만 심각한 버그는 쉽게 고치기가 어렵습니다. 그때서야 스킨을 삭제한 것을 후회해도 이미 배는 떠난 뒤라는 것 입니다.

저도 이런 경험이 몇 번 있었습니다. 최근 댓글창 수정을 작업을 하였고, 제대로 잘 적용된 모습을 확인했습니다. 그래서 스킨 수정 전 백업 자료를 삭제하고 다음 날 댓글을 확인하는 도중에 스킨 수정 작업 중 실수를 했다는 것을 알았습니다.

이 글 읽고 생각이 나서, 저도 혼자살면서 생긴 습관들을 정리해봤어요...
확실히 혼자있노라면 변하는 것이 많은것 같아요...^^
트랙백 걸려고 찾아보아도 주소를 못 찾겠네요..ㅜㅜ
트랙백은 안 받으시나 봅니다....

라라 윈 님의 댓글을 보고 저는 뭔가 스킨이 잘못 됐다는 것을 알게 되었고, 댓글창을 확인하러 갔습니다. 라라 윈님께 감사의 말을 남깁니다.

위의 그림에서 빨간색 네모 부분의 트랙백/댓글 선택 부분이 없어진 것 이었습니다. 스킨 수정 작업 중 저 부분의 소스코드를 삭제한 것이었습니다. 심각한 버그라고 생각하고 저는 소스코드를 분석하면서 어느부분에서 잘못된 것을 파악하느라 오랜 시간을 지체하고 해결방법을 찾지 못했습니다.

지인들에게 도움을 구했지만 딱히 해결방법이 나오지 않았습니다. 저의 경솔한 백업 스킨 자료를 삭제한 것에 대해 잘못된 점을 지적만 받았을 뿐입니다. ㅠㅠ

스킨 원본인 중국 블로그까지 접속하여 소스코드를 분석하여 지금은 해결했지만, 스킨 백업 자료가 남아있었다면 금방 해결할 문제였던 듯 합니다.

주석처리의 생활화 
             소스코드
   

소스코드를 추가/수정/삭제 하는 작업을 할때는 위와같은 주석처리를 하면 다음 소스코드 변환 작업을 할때 쉽게 해당 소스코드를 찾을 수 있습니다.

저작자표시

야이노마

» Contact Me: yainoma00@gmail.com

다음뷰&믹시 추천버튼 + 카테고리 더보기 합치기

IT/Blog/2009. 5. 18. 11:10

제 블로그에 설정되어있는 추천 위젯 + 카테고리 더 보기를 합친 모습입니다. MissFlash 님의 블로그에서 [팁] 티스토리에서 믹시&블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!! 의 포스팅을 보고 응용해서 만든 추천 위젯 + 카테고리 글 더보기 입니다. 소스 코드를 물어보는 블로거님들이 몇분 계서서 직접 포스팅하게 되었습니다.

차려진 밥상에 숟가락 올리기

MissFlash 님의 포스팅을 보고 제대로 동작한다면 이제 응용만 하면 됩니다. 테이블을 만들어 행과 열을 구성하고 그안에 해당된 소스 코드만 삽입하면 작업이 완료됩니다.
만약 테이블을 만들지 않고 추천 위젯과 카테고리 글 더보기 를 배치할 경우 생각했던 위치에 만들어지지 않고 엉망진창이 되어서 테이블 안에 소스 코드를 삽입하는 방법을 사용했습니다.
테이블 하나를 이용해서 만들 수도 있지만, 저는 테이블 2개를 이용해서 UI 를 구성하였습니다.

1. 바깥 테이블 구성하기

FIELDSET STYLE 을 이용한 테두리 만들기

<fieldset style="border:3px solid #a1b0db;text-align:center;width:99%;height:260px;padding:0;margin:0 auto;position:relative;">
<legend align=center style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD">포스팅이 유익하셨다면 추천해 주세요!</legend></fieldset>

border : 테두리의 두께
width : 가로
height : 높이

포스팅이 유익하셨다면 추천해 주세요!

좀더 세련된 테이블 구성을 위해 fieldset style, legend 을 이용해서 바깥 테두리에 해당 문구를 삽입 하였습니다.

2. 안 테이블 구성하기

TABLE 을 이용한 테이블 만들기1

<table width="98%" height="70%" valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80%> 카테고리 글 더보기 플로그인 삽입부분</td>
         <td align=center> 믹시 & 다음뷰 추천 위젯 삽입 부분</td>
    </tr>
</table>

border="0" 으로 할 경우 테이블 테두리가 나오지 않습니다.

카테고리 글 더보기 플로그인 삽입부분

믹시 & 다음뷰 추천 위젯 삽입 부분

TABLE 을 이용한 테이블 만들기2

<table width="98%" height="70%" valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80% rowspan=2> 카테고리 글 더보기 플로그인 삽입부분</td>
         <td align=center > 믹시 추천 위젯 삽입 부분</td>
    </tr>
         <td align=center >다음뷰 추천 위젯 삽입 부분</td>
    </tr>
</table>

rowspan=2 : 열을 2개 합칩니다.

카테고리 글 더보기 플로그인 삽입부분	믹시 추천 위젯 삽입 부분
	다음뷰 추천 위젯 삽입 부분

TABLE 을 이용한 테이블 만들기3

<table width="98%" height="70%" valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80% rowspan=2> 카테고리 글 더보기 플로그인 삽입부분</td>
         <td align=center > 믹시 추천 위젯 삽입 부분</td>
    </tr>
         <td align=center >다음뷰 추천 위젯 삽입 부분</td>
    </tr>
    </tr>
         <td align=center colspan=2>추천 엠블럼 삽입부분</td>
    </tr>
</table>

colspan=2 : 행을 2개 합칩니다.

카테고리 글 더보기 플로그인 삽입부분	믹시 추천 위젯 삽입 부분
	다음뷰 추천 위젯 삽입 부분
추천 엠블럼 삽입부분

테이블 만들기1 과 테이블 만들기2 는 차이가 있는 것처럼 보이지만 테두리를 안보이게 하면 2개 모두 똑같은 모습을 보입니다. 그래서 저는 테이블 만들기1로 구성하였고, 믹시 & 다음뷰 추천 위젯의 공간을 작게 구성하여 위젯의 가로배치를 세로배치처럼 만들었습니다.

제가 만든 UI 에 추천 엠블럼 삽입을 하고 싶은 분은 테이블 만들기3 의 구성으로 추천 엠블럼 삽입부분에 소스크드를 입력하면 됩니다.

최종 소스 코드

<fieldset style="border:3px solid #a1b0db;text-align:center;width:99%;height:260px;padding:0;margin:0 auto;position:relative;">
<legend align=center style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD">포스팅이 유익하셨다면 추천해 주세요!</legend>

<table width="98%" height="70%" valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80%>

            <div id="MF_Reference" class="another_category another_category_color_gray"></div>
            <script type="text/javascript">
            //<![CDATA[
            // Created by MissFlash(http://blog.missflash.com)
            var MF_Reference = document.getElementById('MF_Reference');
            MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num);
            MF_Reference.className = "another_category another_category_color_gray";
            var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
            MF_Reference.innerHTML = ref_source;
            MissFlash_Div_Num += 1;
            //]]>
            </script>

             </td>
         <td align=center>

            <div id="MissFlash_Div">
            <div class="MF_Left_Float" style="height:70px; margin-left:5px;">
                <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='73' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
                <param name='allowScriptAccess' value='always'/>
                <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=15160&guid=http://pangsan.tistory.com/&rdate=&showhitcnt=1&platform=2'/>
                <param name='quality' value='high'/>
                <param name='wmode' value='window'/>
                <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=15160&guid=http://pangsan.tistory.com/&rdate=&showhitcnt=1&platform=2' quality='high' wmode='window' width='73' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
                </object>
            </div>

 

            <script type="text/javascript">
            //<![CDATA[
            // Created by MissFlash(http://blog.missflash.com)
            var MissFlash_Div = document.getElementById('MissFlash_Div');
            MissFlash_Div.setAttribute("id", "MissFlash_Div" + MissFlash_Div_Num);
            var MF_Recommend_ID = "MF_Recommend" + MissFlash_Div_Num;
            var MF_Recommend_Div = document.createElement('div');
            MF_Recommend_Div.setAttribute("id", MF_Recommend_ID);
            MF_Recommend_Div.className = "MF_Right_Float";

            // by chatii - http://chatii.tistory.com/52
            // last updated at 09/03/15

            // Modified by MissFlash(http://blog.missflash.com)
            var recombox = document.getElementsByTagName("embed");
            for (var i=0; i<recombox.length; i++) {
                if (recombox[i].getAttribute("src") && recombox[i].getAttribute("src").indexOf("http://api.v.daum.net/static/recombox1.swf") != "-1") {
                    var recomdiv = recombox[i].parentNode;
                    recomdiv.innerHTML = recomdiv.innerHTML.replace("recombox1.swf", "recombox3.swf").replace("400", "67");
                    var param = recomdiv.parentNode.getElementsByTagName("param");
                    for(var j=0; j<param.length; j++) {
                    if (param[j].getAttribute("value").indexOf("mixup") != "-1") {
                        param[j].parentNode.removeAttribute("align");
                            recomdiv.appendChild(param[j].parentNode);
                        }
                    }
                    MF_Recommend_Div.innerHTML = recomdiv.innerHTML;
                    recomdiv.style.display = "none";
                }
            }
            MissFlash_Div.appendChild(MF_Recommend_Div);
            //]]>
            </script>
            </div>

            </td>
    </tr>
</table>
</fieldset>

MissFlash 님의 포스팅에 있는 소스코드를 변경하지 않고, 제가 만든 테이블 안의 해당 위치에 소스코드를 삽입하면 끝입니다. MissFlash 님의 포스팅을 완성해야 이 방법을 사용할 수 있다는 점 거듭 강조합니다.

저작자표시

야이노마

» Contact Me: yainoma00@gmail.com

티스토리 자동 로그인으로 편하게 관리하자!

IT/Blog/2009. 5. 11. 09:21

관리자 모드는 블로그를 운영하다 보면 하루에도 수십 번을 접속해야 하기 때문에 위의 그림을 지겹도록 봐야 한다. 한두 번도 아닌 로그인 할때마다 아이디와 비번을 입력하고 관리자 모드로 들어가는 것은 시간 낭비와 엄청난 짜증을 불러일으킬 수 있습니다. 관리자 버튼 클릭만으로 아이디와 비밀번호를 입력하지 않고 바로 접속이 되면 엄청 편할 것 입니다. 편한 길로 블로깅을 하실 분은 따라만 하시면 됩니다.

본문 상단에 있는 그림처럼 로그인 화면에서 주소표시줄의 URL 을 복사합니다.

http://블로그 주소/login?requestURI=http%3A%2F%2F블로그 주소%2Fadmin%2F&try=1

블로그 주소 : pangsan.tistory.com ( 0 )
http://pangsan.tistory.com ( X )

즐겨찾기의 링크 주소를 바꿔서 즐겨찾기 아이콘을 클릭할때마다 자동으로 로그인이 되게 만들어야 합니다.

즐겨찾기 아이콘 우클릭 → 속성을 클릭한다.

많이 쓰는 인터넷익스플로러와 파이어폭스의 즐겨찾기 아이콘 속성창의 모습입니다. 속성창의 IE 의 URL 부분과 파폭의 주소 부분을 수정하면 자동 로그인이 완성합니다.
로그인 화면의 주소표시줄에서 복사한 URL에 &loginid=아이디&password=비밀번호 을 추가합니다.

http://블로그 주소/login?requestURI=http%3A%2F%2F블로그 주소%2Fadmin%2F&try=1&loginid=아이디&password=비밀번호

빨간색 글씨는 자신의 블로그 주소, 아이디, 비밀번호를 입력하시면 끝입니다.
이렇게 바꾸시면 즐겨찾기에서 자신의 블로그를 클릭했을 경우 관리자 모드로 바로 접속이 됩니다. 자동 로그인은 되면서 블로그 메인화면으로 지정하고 싶으면 위의 URL에서 파란색 %2Fadmin%2 을 삭제하시면 됩니다.

http://블로그 주소/login?requestURI=http%3A%2F%2F블로그 주소&try=1&loginid=아이디&password=비밀번호

이 방법은 누구나 자신의 블로그에 접속할 수 있는 권한을 가지고 있기 때문에 공공장소에서 사용하시면 큰일납니다!

저작자표시

야이노마

» Contact Me: yainoma00@gmail.com

티스토리툴바