블로거 Contempo Light 테마 수정 | Modifying Blogger Contempo Light Theme

블로거 테마에서 Contempo Light을 적용한 후 Edit HTML을 통해 테마를 수정한 기록이다. 모든 작업은 블로거 - Theme - Customize의 오른 화살표 - Edit HTML로 가서 수행함.

1. 여러 글꼴, 배경색 수정 및 공유 버튼 숨기기
앞 부분 <b:skin version='1.3.3'><![CDATA[ 바로 뒤에 아래 코드를 추가한다.

/* 글자색, 제목,날짜,READ MORE,Popular posts 글꼴, 본문 링크 색상, 제목 줄간격 사용자 수정 시작 */
.post-snippet .snippet-item,
.post-body {
  color: #222222 !important;
}
.post-title,
.post-title a {
  color: #333333 !important;
  font-size: 20px !important;
}
.post-timestamp,
.post-timestamp a,
.post-timestamp time {
  color: #999999 !important;
  font-weight: normal !important;
  font-style: italic !important;
}
.jump-link,
.jump-link a {
  font-size: 14px !important;
  font-weight: normal !important;
}
.PopularPosts .widget-content a {
  font-size: 18px !important;
}
.PopularPosts .post-timestamp,
.PopularPosts .post-timestamp a,
.PopularPosts .post-timestamp time {
  font-size: 14px !important;
}
.PopularPosts .widget-content .jump-link a {
  font-size: 13px !important;
}
.post-body a {
  color: #63b3ed !important;
}
.post-title {
  line-height: 1.4 !important;
}
/* 글자색, 제목,날짜,READ MORE,Popular posts 글꼴, 본문 링크 색상, 제목 줄간격 사용자 수정 끝 */
/* 사이드바의 Posts by time 및 Link List 항목 간격 사용자 수정 시작 */
#BlogArchive1 ul.posts.hierarchy li,
#LinkList1 li {
  margin: 10px 0 !important;
}
/* 사이드바의 Posts by time 및 Link List 항목 간격 사용자 수정 끝 */
/* 배경색 사용자 수정 시작 */
body {
  background: #eee !important;
}
/* 배경색 사용자 수정 끝 */
/* 본문 하단 공유 버튼 숨기기 사용자 수정 시작 */
.post-share-buttons-bottom {
  display: none !important;
}
/* 본문 하단 공유 버튼 숨기기 사용자 수정 끝 */

2. 마우스 오버 시 뜨는 날짜 툴팁 수정
편집 창 맨 하단 </body> 바로 위에 아래 스크립트 코드를 삽입한다.

<!-- 시간 표시 툴팁 사용자 수정 시작 -->
<script>
document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
  document.querySelectorAll(&#39;time.published[datetime]&#39;).forEach(function (time) {
    var value = time.getAttribute(&#39;datetime&#39;);

    if (!value) return;

    var match = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);

    if (!match) return;

    var year = match[1];
    var month = match[2];
    var day = match[3];
    var hour = parseInt(match[4], 10);
    var minute = match[5];

    var ampm = hour &gt;= 12 ? &#39;PM&#39; : &#39;AM&#39;;
    var hour12 = hour % 12 || 12;

    time.setAttribute(
      &#39;title&#39;,
      year + &#39;-&#39; + month + &#39;-&#39; + day + &#39; &#39; +
      hour12 + &#39;:&#39; + minute + &#39; &#39; + ampm
    );
  });
});
</script>
<!-- 시간 표시 툴팁 사용자 수정 끝 -->

3. 왼쪽 사이드바 수정
.BlogArchive .post-count,.Label .label-count을 검색하여 float:$endSide; 열을 삭제하고 그 자리에 vertical-align:baseline;를 입력한다.
그 위 .sidebar-container .widget li{를 찾아 font-size 값을 16px에서 14px로 변경한다.

4. 왼쪽 사이드바 및 본문의 Label(태그, 카테고리) 글꼴 수정
위의 .sidebar-container .widget li{로 시작해 line-height:normal .. }로 끝나는 코드 바로 밑에 다음을 추가한다.

/* 사이드바 및 본문 Label 글자 크기 사용자 수정 시작 */
.sidebar-container .Label li,
.sidebar-container .Label li a,
.sidebar-container .Label span.label-size,
.byline.post-labels a {
  font-size: 13px !important;
}
/* 사이드바 및 본문 Label 글자 크기 사용자 수정 끝 */

5. 게시글에 편집 버튼 넣기
일단 위 수정 사항을 저장해야 하며 시간이 좀 지난 후,
<b:includable id='postTitle' var='post'>를 찾은 뒤 그 조금 위에 위치한 <time class='published' expr:datetime=을 확인하고 닫는 태그 </time> 바로 밑에 아래 코드를 추가한다.

<!-- 편집 버튼 사용자 수정 시작 -->
<a class='post-edit-link' expr:href='&quot;https://www.blogger.com/blog/post/edit/&quot; + data:blog.blogId + &quot;/&quot; + data:post.id' target='_blank'>.</a>
<!-- 편집 버튼 사용자 수정 끝 -->

6. 첫 화면에서 스크롤하다 위로 움직이면 뜨는 팝업(블로그 이름)에 링크 걸기
<b:widget id='Header1'을 검색하여 그 안에 있는(약 40열 아래),
<b:includable id='title'>을 찾아 그로부터 아래 </b:includable>까지 6열을 지운(주의!) 후 아래 코드로 교체한다. (바로 아래 </b:widget>이 있다)

<b:includable id='title'>
  <div>
    <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
    <a expr:href='data:blog.homepageUrl'>
      <b:include name='super.title'/>
    </a>
  </div>
</b:includable>