Wednesday, May 23, 2007

블로거닷컴용 사이드바 올블릿 Sidebar Allblet for Blogger.com

올블릿 코드는 올블릿 관리페이지에서 생성을 하여 블로그 템플릿에 붙이면 되는데, 섭섭하게도 블로거닷컴 사용자를 위한 플러그인이 제공되지 않는다.

일이 바쁜 와중에 시간을 내서 올블릿을 붙여볼 요량으로 템플릿을 꼼꼼히 살펴보았다.

구글 아작스 검색 코드를 보니 함수를 모아둔 코드가 있고, 이는 올블릿에서 제공하는 방법과 같이 그냥 변수를 나열하는 방법이 아닌, 그릇에 담듯이 대괄호와 같이 있는 DATA 안에 변수를 모아 두더라. 여기서 힌트를 얻어서 구글 아작스 검색 템플릿을 복사하여 하나씩 수정하면서 블로거닷컴용 사이드바 올블릿 코드를 만들었다.

올블릿을 블로그 사이드바에 붙이고 이리저리 테스트를 했는데, 그림과 같이 글제목(포인트링크)가 테두리를 삐져나오고 본문(보통링크)가 잘리는 보기 싫은 현상이 발생했다. 테두리가 없어도 마찬가지로 글제목(포인트링크)와 본문(보통링크)의 앞부분이 잘려나간다. 이를 어떻게 고쳐야 하는지는 정말 모르겠다. 사이드바에 올블릿을 붙인 것도 그나마 다행이라고 생각하는데. 어떻게 골빈해커님 좀 도와 주실라우. :)

사실 올블릿을 사이드바에 두고자 했던 것은 아니고 게시글 아래에 두고 싶었는데, 아직 거기까지는 실력이 미치지 못하고, 오늘은 사이드바에 붙이는 것으로 만족한다. 지금 위치도 테스트를 더 해보고자 블로그 윗부분에 두었다.

블로거닷컴용 사이드바 올블릿 코드는 다음과 같다. 오렌지색을 칠한 코드는 사용자가 올블릿 관리 페이지에서 설정하여 생성한, 올블릿이 제공하는 코드다.
<b:widget id='HTML7' locked='false' title='Allblet' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script language='Javascript' type='text/javascript'>
//<![CDATA[

var allbletID='XXX';
var allbletTheme='default';
var allbletTabs='relevant';
var allbletDefaultTab='relevant';
var allbletLink='';
var allbletTags='';
var allbletTabOptions=new Object();
allbletTabOptions.relevant = '3||1';
var allbletColorBorder='#000000';
var allbletColorBackground='#FFF';
var allbletColorPoint='#e1771e';
var allbletColorPointLink='#336699';
var allbletColorNormalLink='#000000';
var allbletSize='f';

//]]>
</script>
<script src="http://allblet2.allblog.net/allblet2.js" type="text/javascript"></script>

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
변수들은 올블릿관리 페이지에서 개인 취향에 따라서 만든 다음, 변수들만 복사해서 위의 코드에 엎어 쓰면 된다.

변수를 수정한 코드는 복사하여, 도구템플릿을 확장한 블로거 템플릿에서 그림과 같이 <div id="sidebar-wrapper"> 아래 좋은 위치에 붙이면 되는데, 위젯은 '<b:widget id='으로 시작하고, '</b:widget>'으로 끝나므로 다른 위젯과 겹치지 않도록 다른 위젯의 위나 아래에 코드를 붙인다. 템플릿을 저장하면 블로거가 알아서 페이지 요소를 생성하고 올블릿을 실행한다. 물론 이 작업을 하기 전에 반드시 원래 템플릿을 백업하는 센스를 잃지 마시길.

테두리로 삐져나오는 부분을 개선할 수 있게 올블로그에서 도와주셨으면 어떨까 생각한다.

Update: 템플릿의 sidebar.li가 padding: 0 0 .5em 15px;, text-indent: -15px; 되어 있다. 이를 아래와 같이 수정하였더니 테두리로 삐져나온 글제목(포인트링크)와 본문링크(보통링크)가 잘리는 문제가 개선되었다.
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

.sidebar li {
margin: 0;
padding: 0 0 .5em 0px;
text-indent: 0px;
line-height: 1.5em;
}
사실 테두리를 삐지는 문제가 올블릿의 문제라고 생각하지는 않았다. 이를 CSS라고 하는지는 모르겠지만 글이나 글자배치에 관한 것이라고 막연히 생각을 했다. 오늘 템플릿을 다시 보면서 코드를 건들려 보면서 자연스럽게 문제를 해결했다. 히죽~ :)

골빈해커님, 올블로그, 계속 수고하세요. :) (2007.05.24)

6 comments:

  1. 부처님 오신 날에 비는 내리고...
    성공을 축하합니다.
    요즘은 조금 한가해졌나 보네요.
    L사 건은 잘 해결이 됐습니까?

    ReplyDelete
  2. 엇 벌써 해결해버리셨군요. 도움을 못드려서 죄송하네요^^;
    수고하셨습니다. ㅎㅎ

    ReplyDelete
  3. 곧 사무실 나가서 남을 일을 해야 하는데, 이걸 붙잡고 씨름하느랴... 다음 주에 출장 또 갑니다. :)

    ReplyDelete
  4. 골빈해커/ 아! 오셨군요. 어찌 어찌 해결했답니다. 관심을 가져주셔서 감사합니다. :)

    ReplyDelete
  5. 저도 올블릿 달았습니다!!!
    근데 그냥 블로거 Html 스크립트 추가하고 올블릿 코드 수정 없이 넣으니 작동하는 것 같은데요. 음...지저꺼비님이 수정하신 내용이 어떻게 달느지 궁금합니다.

    ReplyDelete
  6. [coup doeil] 그래요. @.@
    저는 그리 되지 않아서 삽질을 했답니다.
    그리고 Kaisyu님의 도움도 받았답니다.

    제가 작업한 내용은 글에 써 둔 그대로 입니다. 지금 올블릿은 Kaisyu님의 글을 보고, 사이드바가 아닌 글 아래에 게시하고 있답니다.

    ReplyDelete