Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

모든 블로거 포스트에 날짜 표시하기 edit

http://www.anshuldudeja.com/2009/11/how-show-post-date-for-blogger-posts.html

블로거는 기본적으로 같은날에 쓴 포스트들에는 날짜를 맨 처음 포스트에만 표시한다. —기본 스킨설정이 날짜는 제목 위에 나타나게 되어 있어서 하위에 다른 포스트들은 그 날짜에 쓰여졌다는걸 암시한다.

dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.

이와 같은 기본 스킨설정을 입맛에 맞게 바꾸려면 트윅이 필요한데, 스킨을 수정하는 곳에서 Expand Widget Template를 체크한 다음 아래와 비슷한 태그를 찾는다. 해당 태그는 스킨에 따라 다를 수 있어서 만약 찾을 수 없다면 data:post.dateHeader키워드로 검색해본다.

<b:if cond='data:post.dateHeader'>
 <span class='date-header'><data:post.dateHeader/></span>,
</b:if>

해당 if구문을 아래와 같이 변경해준다.

<b:if cond='data:post.dateHeader'>
 <script>var dateHeader = &#39;<data:post.dateHeader/>&#39;;</script>
 <span class='date-header'><data:post.dateHeader/></span>,
<b:else/>
 <span class='date-header'><script>document.write(dateHeader);</script></span>,
</b:if>

<data:post.dateHeader/>가 날짜를 표시해주는 블로거 태그이다. —블로거 템플릿은 마치 서버사이드 스크립트처럼 동작하여서 페이지가 표시될때 치환된다.

data:post.dateHeader에 값이 있으면(참이면: 해당 포스트가 가장 최근의, 가장 위에 자리잡은 포스트이면) 자바스크립트 구문을 실행하여 dateHeader변수에 날짜를 임시 저장한 다음 표시한다. 그다음 포스트에 값이 없으면(거짓이면) 자바스크립트로 임시 저장된 dateHeader를 표시한다. 만약 값이 있으면(참이면) 새로운 날짜에 쓰여진 포스트 이므로 다시 새로운 날짜로 임시 저장되고 이 루틴이 반복된다.

그런데 이상한점은 <script>태그에 type="javascript"옵션을 주면 안된다는 것이다. 자바스크립트를 인라인 스크립트로 사용할땐 생략해야하는 것 같다.

Adding SyntaxHighlighter to blogger edit

SyntaxHighligher: http://alexgorbatchev.com/SyntaxHighlighter/

I have a problem if i use higher version than 2.0.320.

Design -> Edit HTML

Add below code between ]]></b:skin> and </head>
...
]]></b:skin>

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>

</head>
...

Add below code before </body>
...
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

</body>
</html>

blogger archive 위젯 hierarchy 스타일 사용시 이전달 포스트들 모두 펼치기 edit

세로로 나뉜 템플릿을 사용하면서 왼쪽에 Archive 위젯을 사용하여 모든 포스트들을 길게 출력해놓으려고 했었으나 달이 바뀌니 전달에 포스팅한 포스트들이 모두 접혀버려서 썰렁해졌다.
그래서 죄다 펼쳐버림.

includable id 'interval' in widget type 'BlogArchive':

...
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul class='hierarchy'>
<!--
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
-->
        <li expr:class='&quot;archivedate expanded&quot;'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
...

widget type 'BlogArchive' 는 스타일별로 include 하는데 'hierarchy' 스타일은 'interval' 을 include 한다. 이 'interval' includable(...) 함수는 내부에서 재귀호출로 데이터들을 찍어내는데 'toggle' includable 함수로 삼각형(▶, ▼)을 찍어낸다. (data -> intervalData[i].expclass 가 'expanded' 면 '▼', collapsed (아니면) '▶') 쓰고보니 외계어

삼각형(▶)은 여전히 오른쪽을 향하고 있는데(안열렸을때처럼) 원하는 달을 누르면 그 달에 포스팅된 포스트들만 보여주고 삼각형이 밑을 향하게 되므로 그냥 두었음. (includable id 'toggle' 을 수정하면 모두 밑으로 향하게 할 수 있다.)

아래에 링크걸어둔 '한글' 블로거 레이아웃 메뉴얼들을 한번쯤 정독하면 템플릿 위젯 소스를 보고 이해할 수 있다.

참고 메뉴얼



어쨋든 이 뭔가 구글답다. 역시 구글느님...

blogger tricks edit

navbar 없애기


http://blogger-templates.blogspot.com/2005/01/remove-navbar.html

blogger는 기본적으로 navbar가 페이지 최상단에 있는데 상당히 거슬린다.

#navbar-iframe {
   display: none !important;
}

pre태그를 보기 좋게 바꾸기


워드프레스의 어떤 테마에서 가지고 왔다.

code, pre {
   font-family: "Courier New", Courier, Monaco, "Lucida Console", monospace;
   overflow: auto;
   background-color: #E7E7E7;
}
pre {
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
}
pre {
   padding: 1em;
   line-height: 1.5em;
   border-width: 1px;
   border-style: solid;
   border-color: #ddd;
   margin: 0.5em 0;
}

특히 'overflow: auto;' 옵션은 필수다.

헤더 타이틀에 링크걸기


헤더 타이틀을 클릭하면 루트페이지로 이동하는 관습이 있는데 'blogger Old Template Created by: Jason Sutter'템플릿은 기본적으로 링크가 걸려있지 않다.

(!) 이 설정은 'blogger Old Template Created by: Jason Sutter'템플릿 종속적일 수 있음.

Design -> Edit HTML 에서 'Expand Widget Templates'를 체크하면 생략된 부분이 펼쳐친다:
...
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <a href='/'><b:include name='title'/></a>
        </h1>
...

old template 쓰기


나는 심플한 옛날 템플릿들이 더 맘에 든다.

Design -> Edit HTML 에서 밑에 'Old Template' 항목에서 고를 수 있다.

h1, h2, h3, h4 태그를 wikimedia의 그것처럼 설정하기


(!) 이 설정은 'blogger Old Template Created by: Jason Sutter'템플릿 종속적일 수 있음.

div.post-body.entry-content h1,
div.post-body.entry-content h2,
div.post-body.entry-content h3,
div.post-body.entry-content h4 {
   color: black;
   background: none;
   font-weight: normal;
   margin: 0;
   padding: .5em 0 .17em 0;
   border-bottom: 1px solid #aaa;
}
div.post-body.entry-content h1 { font-size: x-large;}
div.post-body.entry-content h2 { font-size: large;}
div.post-body.entry-content h3 { font-size: normal;}
div.post-body.entry-content h4 { font-size: small;}
<- Older