앞에 A 를 소문자 a 로 바꿨습니다.
왠지 뾰족하다 싶었던 것이, 앞과 연결성도 갖는 듯한 느낌을 주는군요.
작은 게 작지 않습니다.
2008년 12월 26일
2008년 12월 25일
블로그 목록으로 보기 설정
http://namu42.blogspot.com/2008/09/table-of-contents-type-for-blogger.html
나무사이 님께서 정리하신 위젯을 이리저리 만져보면서 주석도 좀 달아 보면서 테스트해 보겠습니다.
먼저 아래처럼 되어 있는 걸
코드를 해석하고, 이리저리 설정을 바꿔 보죠.
그렇게 많이 바꾼 건 없습니다.
테이블 크기와 위치를 조금 조정하고, 광고가 있는 부분을 되살려 놨습니다.
문제는 광고-구글센스 부분인데, 광고를 넣고 목록보기를 하면 목록 하나하나 사이에 광고가 나오는 불상사가 발생합니다.
따라서 광고를 꼭 중간에 넣어야 한다면, 목록보기는 포기를 해야겠지요.
아니면 제가 시도하지 못한 방법을 찾아내신다면 또 좋은 결과가 있으리라 봅니다.
각자 좋은 방법이 있다면, 잘 찾아보시길 바랍니다.
나무사이 님께서 정리하신 위젯을 이리저리 만져보면서 주석도 좀 달아 보면서 테스트해 보겠습니다.
먼저 아래처럼 되어 있는 걸
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<!--post add-->
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<!--post add-->
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
코드를 해석하고, 이리저리 설정을 바꿔 보죠.
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<!--post add-->
<data:adStart/>
<!-- on a label page, add a header -->
<!--b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<p>
<span style='color:#ff9900'><data:navMessage/></span>
</p>
</b:if>
</b:if>
</b:if-->
<!-- 지워야 하는 부분입니다. 지우지 않으면 메시지가 두번 나옵니다.
<!-- Start loop for displaying posts here -->
<b:loop values='data:posts' var='post'>
<!-- Date-headers are only displayed if on main, item or archive page-->
<!-- If on label-page, then no date-header -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if> <b:else/> <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Here we start displaying the posts. -->
<!-- If we are on a label page, only the posttitle is displayed -->
<!-- On other pages the entire post is displayed -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<div style='margin-bottom:-15px; margin-left:40px; width:90%;'>
<!-- 보여주는 테이블의 전체 윤곽 부분입니다. 블로그 설정에 따라 조절을 해 주면 됩니다 -->
<table style='border-bottom: #e5e5e5 1px solid;'>
<tr>
<td style='color:gray; align:center;' width='250px'>
<!-- 날짜 부분 입니다 -->
<data:post.dateHeader/>
</td>
<td style='' width='650px'>
<!-- 포스트 제목 부분입니다 -->
<a expr:href='data:post.url'><data:post.title/></a>
<span style='color:#ff9900'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 0'>
<b:else/>(<data:post.numComments/>)
</b:if>
</b:if>
</b:if>
</span>
</td>
<!--<td style='text-align:right' width='300px'>
<!-- 라벨을 보여주는 부분입니다 여기서부터 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag' title=''>
<data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</td>-->
<!-- 여기까지 이고 보여주고 싶다면 <!--와 -->로 된 부분을 지우면 됩니다-->
</tr>
</table><br/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- If on item page display comments -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:post.includeAd'>
<!-- 여기서부터 광고를 보여주는부분입니다. 게시물 사이에 광고 넣는 기능을 넣었다면 목록사이사이로 광고가 나옵니다. 일단 시도해 보시면 목록 보기 설정을 안하게 될 수도 있을 겁니다 -->
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<!--post add-->
<data:adStart/>
<!-- on a label page, add a header -->
<!--b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<p>
<span style='color:#ff9900'><data:navMessage/></span>
</p>
</b:if>
</b:if>
</b:if-->
<!-- 지워야 하는 부분입니다. 지우지 않으면 메시지가 두번 나옵니다.
<!-- Start loop for displaying posts here -->
<b:loop values='data:posts' var='post'>
<!-- Date-headers are only displayed if on main, item or archive page-->
<!-- If on label-page, then no date-header -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if> <b:else/> <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Here we start displaying the posts. -->
<!-- If we are on a label page, only the posttitle is displayed -->
<!-- On other pages the entire post is displayed -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<div style='margin-bottom:-15px; margin-left:40px; width:90%;'>
<!-- 보여주는 테이블의 전체 윤곽 부분입니다. 블로그 설정에 따라 조절을 해 주면 됩니다 -->
<table style='border-bottom: #e5e5e5 1px solid;'>
<tr>
<td style='color:gray; align:center;' width='250px'>
<!-- 날짜 부분 입니다 -->
<data:post.dateHeader/>
</td>
<td style='' width='650px'>
<!-- 포스트 제목 부분입니다 -->
<a expr:href='data:post.url'><data:post.title/></a>
<span style='color:#ff9900'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 0'>
<b:else/>(<data:post.numComments/>)
</b:if>
</b:if>
</b:if>
</span>
</td>
<!--<td style='text-align:right' width='300px'>
<!-- 라벨을 보여주는 부분입니다 여기서부터 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag' title=''>
<data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</td>-->
<!-- 여기까지 이고 보여주고 싶다면 <!--와 -->로 된 부분을 지우면 됩니다-->
</tr>
</table><br/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- If on item page display comments -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:post.includeAd'>
<!-- 여기서부터 광고를 보여주는부분입니다. 게시물 사이에 광고 넣는 기능을 넣었다면 목록사이사이로 광고가 나옵니다. 일단 시도해 보시면 목록 보기 설정을 안하게 될 수도 있을 겁니다 -->
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
그렇게 많이 바꾼 건 없습니다.
테이블 크기와 위치를 조금 조정하고, 광고가 있는 부분을 되살려 놨습니다.
문제는 광고-구글센스 부분인데, 광고를 넣고 목록보기를 하면 목록 하나하나 사이에 광고가 나오는 불상사가 발생합니다.
목록 사이마다 광고가 나온 화면
따라서 광고를 꼭 중간에 넣어야 한다면, 목록보기는 포기를 해야겠지요.
아니면 제가 시도하지 못한 방법을 찾아내신다면 또 좋은 결과가 있으리라 봅니다.
각자 좋은 방법이 있다면, 잘 찾아보시길 바랍니다.
andipod.com 등록.
구글을 통해 andipod.com 을 등록했습니다.
가격은 10달러. 기존에 아사달닷컴을 썼는데, 일단 너무 비쌌고, 구글을 통하면 어떨까 해서 구입했는데...
일단 좋네요.^^.
마음에 듭니다.
우선, 구글 앱스를 기본으로 설정해 줍니다.
1. 이메일
2. 캘린더
3. 채팅
4. 문서- Docs
5. 사이트
최대 200명까지 가능하고....
CNAME 등은 enom 이라는 사이트 http://www.enom.com 이라는 사이트를 통해 관리가 가능합니다.
그래서 지금 이 사이트 주소는 blog2.andipod.com
가장 큰 난관이랄까... 그런게 해결 된 느낌입니다.
이제 무럭무럭 키우는 일만 남았군요.
가격은 10달러. 기존에 아사달닷컴을 썼는데, 일단 너무 비쌌고, 구글을 통하면 어떨까 해서 구입했는데...
일단 좋네요.^^.
마음에 듭니다.
우선, 구글 앱스를 기본으로 설정해 줍니다.
1. 이메일
2. 캘린더
3. 채팅
4. 문서- Docs
5. 사이트
최대 200명까지 가능하고....
CNAME 등은 enom 이라는 사이트 http://www.enom.com 이라는 사이트를 통해 관리가 가능합니다.
그래서 지금 이 사이트 주소는 blog2.andipod.com
가장 큰 난관이랄까... 그런게 해결 된 느낌입니다.
이제 무럭무럭 키우는 일만 남았군요.
2008년 12월 23일
템플릿 수정 - 위젯 추가 앨리먼트 만들기
아.. 힘들다... 우선 소스 만 올린다.
아래에
다시 정리한다.
다른 블로그에서 왼쪽에 사이드바가 하나 더 있는 것도 보고 해서 아이디어가 떠올랐다.
새 글 리스트와 관련글 리스트가 글 하나에만 나오면 어떨까? 하고.
그래서 먼저 이곳에 시도를 했고 성공을 했다.
그런 다음, 유즈팟 오리지날 블로그에 적용을 했는데...
사이드바가 올라오지 않는거다.
그래서 이리저리 하나씩 다시 빼고 정리를 해 봤다.
그러면 어떻게 만드는지 알아보자.
먼저 레이아웃에 HTML 보기 를 한다.
확장은 하지 않아도 된다.
오히려 확장을 하지 않아야 작업하기가 더 편하다.
아래쪽에 가면, 위젯들이 리스트가 나온다.
<div id='main0'> 이부분부터가 추가한 부분인데, DIV 로 블럭을 잡을 때 위 원래 블로그 게시물 부분과 따로 놨었다. 그랬더니 사이드바가 계속 두번째 DIV 부분에서 안올라 오는 것이다.
그래서 그냥 묶어 버린 것이 아래와 같은 것이다.
참고로 위젯을 추가하는 버튼을 달 거라면 showaddelement='no' 를, 달지 않을 거라면 no 를 yes 로 해 주면 된다.
아래 노란형광 내용을 그대로 가져가면 안되고, 위젯 부분( b:widget 줄 ) 만 지우고 가져가면 된다.
그리고 우선 저장을 하자.
===============================================================================
<div id='main-wrap1'><div id='main-wrap2'> <b:section class='main' id='main' showaddelement='no'><b:widget id='HTML4' locked='false' title='' type='HTML'/><b:widget id='HTML6' locked='false' title='' type='HTML'/><b:widget id='Blog1' locked='true' title='블로그 게시물' type='Blog'/><b:widget id='HTML5' locked='false' title='' type='HTML'/></b:section><div id='main0'> <b:section class='main' id='mainbleft-wrapper' showaddelement='yes'><b:widget id='Blog2' locked='false' title='블로그 게시물' type='Blog'/></b:section> <b:section class='main' id='mainbright-wrapper' showaddelement='yes'><b:widget id='HTML10' locked='false' title='최근 글' type='HTML'/></b:section></div> </div></div> <div id='sidebar-wrap'>
추가로 각 항목에 들어가야만 그 위젯이 나오는 방법을 안내한다.
먼저 HTML 편집에 가서 확장기능을 체크한다.
그리고 원하는 위젯에 가서 아래 노란 부분을 붙여넣기 한다.
includable 바로 밑에서 시작해서 /include 바로 위에 각각 넣으면 되겠다.
===============================================================================
<b:widget id='HTML10' locked='false' title='최근 글' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "item"'> <!-- 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'> <data:content/> </div></b:if></b:includable></b:widget>
===============================================================================
아래에
다시 정리한다.
우리의 목표
다른 블로그에서 왼쪽에 사이드바가 하나 더 있는 것도 보고 해서 아이디어가 떠올랐다.
새 글 리스트와 관련글 리스트가 글 하나에만 나오면 어떨까? 하고.
그래서 먼저 이곳에 시도를 했고 성공을 했다.
그런 다음, 유즈팟 오리지날 블로그에 적용을 했는데...
사이드바가 올라오지 않는거다.
그래서 이리저리 하나씩 다시 빼고 정리를 해 봤다.
그러면 어떻게 만드는지 알아보자.
먼저 레이아웃에 HTML 보기 를 한다.
확장은 하지 않아도 된다.
오히려 확장을 하지 않아야 작업하기가 더 편하다.
아래쪽에 가면, 위젯들이 리스트가 나온다.
<div id='main0'> 이부분부터가 추가한 부분인데, DIV 로 블럭을 잡을 때 위 원래 블로그 게시물 부분과 따로 놨었다. 그랬더니 사이드바가 계속 두번째 DIV 부분에서 안올라 오는 것이다.
그래서 그냥 묶어 버린 것이 아래와 같은 것이다.
참고로 위젯을 추가하는 버튼을 달 거라면 showaddelement='no' 를, 달지 않을 거라면 no 를 yes 로 해 주면 된다.
아래 노란형광 내용을 그대로 가져가면 안되고, 위젯 부분( b:widget 줄 ) 만 지우고 가져가면 된다.
그리고 우선 저장을 하자.
===============================================================================
<div id='main-wrap1'><div id='main-wrap2'> <b:section class='main' id='main' showaddelement='no'><b:widget id='HTML4' locked='false' title='' type='HTML'/><b:widget id='HTML6' locked='false' title='' type='HTML'/><b:widget id='Blog1' locked='true' title='블로그 게시물' type='Blog'/><b:widget id='HTML5' locked='false' title='' type='HTML'/></b:section><div id='main0'> <b:section class='main' id='mainbleft-wrapper' showaddelement='yes'><b:widget id='Blog2' locked='false' title='블로그 게시물' type='Blog'/></b:section> <b:section class='main' id='mainbright-wrapper' showaddelement='yes'><b:widget id='HTML10' locked='false' title='최근 글' type='HTML'/></b:section></div> </div></div> <div id='sidebar-wrap'>
===============================================================================
먼저 이렇게 만들고 저장. 만약 에러가 나온다면, div 를 확인하고, 위젯 부분을 잘 지웠는지 확인해 보자.
만약 본문 위에 위젯들을 놓고 싶다면, 노란색 부분을 하늘색 부분 위에다 놓으면 된다. 지금 블로그가 그렇게 되어 있는 상태다.
그리고 레이아웃에 페이지 요소에 간다. 여기서 맨위와 비슷한 화면이 나타날 리가 없다. 저 아래 코드를 추가해 줘야 하므로...
css 설정하는 곳에 아래와 같이 붙여 넣었다.
===============================================================================
#mainbleft-wrapper { margin-$startSide: 1%; width: 370px; float: $startSide; background-color: $mainBgColor;}#mainbright-wrapper { margin-$startSide: 1%; width: 350px; float: $endSide; background-color: $mainBgColor;}===============================================================================위 내용을 붙여넣으면 되겠다. 마진이나 크기는 직접 설정하면 될테고...먼저 이렇게 만들고 저장. 만약 에러가 나온다면, div 를 확인하고, 위젯 부분을 잘 지웠는지 확인해 보자.
만약 본문 위에 위젯들을 놓고 싶다면, 노란색 부분을 하늘색 부분 위에다 놓으면 된다. 지금 블로그가 그렇게 되어 있는 상태다.
그리고 레이아웃에 페이지 요소에 간다. 여기서 맨위와 비슷한 화면이 나타날 리가 없다. 저 아래 코드를 추가해 줘야 하므로...
css 설정하는 곳에 아래와 같이 붙여 넣었다.
===============================================================================
추가로 각 항목에 들어가야만 그 위젯이 나오는 방법을 안내한다.
먼저 HTML 편집에 가서 확장기능을 체크한다.
그리고 원하는 위젯에 가서 아래 노란 부분을 붙여넣기 한다.
includable 바로 밑에서 시작해서 /include 바로 위에 각각 넣으면 되겠다.
===============================================================================
<b:widget id='HTML10' locked='false' title='최근 글' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "item"'> <!-- 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'> <data:content/> </div></b:if></b:includable></b:widget>
===============================================================================
2008년 12월 18일
별표시를 떼어버렸습니다. 블로거용 피드버너가 따로 있었군요.
장점도 있고 단점도 있겠지만, 가장 큰 문제는 그것 하나 때문에 너무 느려진다는 겁니다.
갈등하다가, 조금 전에 그냥 화악~! 떼어 버렸네요.
그리고, 블로거용 피드버너가 따로 있었네요.
뭐, 그렇다고 해서 피드버너 통해서 빠르게 업로드 될거 같지는 않고...
주소는
http://feedburner.google.com/
이래 저래... 뭔가 조금씩 모자라네요~
갈등하다가, 조금 전에 그냥 화악~! 떼어 버렸네요.
그리고, 블로거용 피드버너가 따로 있었네요.
뭐, 그렇다고 해서 피드버너 통해서 빠르게 업로드 될거 같지는 않고...
주소는
http://feedburner.google.com/
이래 저래... 뭔가 조금씩 모자라네요~
피드 구독하기:
글 (Atom)