블로거에서 disqus 최근 댓글 위젯 달기

블로거에서 disqus 최근 댓글 위젯 달기

구글 블로거의 기본 위젯 중에는 디스커스의 최근 댓글 목록 위젯이 없습니다. 따라서 해당 위젯을 수동으로 적용할 필요가 생겨서 이 글을 작성합니다.

목표는 디스커스 코드와 CSS 스타일 을 위젯에 적용하는 것입니다.

블로거 위젯 구조

블로거 위젯은 설정부분과 출력 부분으로 나눠볼 수 있습니다.

<b:widget id='HTML1' locked='false' title='댓글' type='HTML' version='1'>
   <b:widget-settings>
       위젯 설정을 정의하고 content 라고 이름 붙입니다.
      <b:widget-setting name='content'>
          레이아웃 화면에서 입력한 내용
      </b:widget-setting>
   </b:widget-settings>
   <b:includable id='main'>
      추가로 적용될 내용
      아래는 기본 생성 내용입니다.

      <!-- only display title if it's non-empty -->
      만약 제목 조건이 비어있지 않으면
      <b:if cond='data:title != &quot;&quot;'>
         <h2 class='title'>
             제목을 보여줍니다.
            <data:title/>
         </h2>
      </b:if>
      <div class='widget-content'>
         위젯 컨텐츠를 보여줍니다.
         아래 content 가 위에 name='content' 라고
         설정한 내용입니다.
         <data:content/>
      </div>
      일반 화면에서 클릭하면 바로 위젯 수정하는 버튼
      <b:include name='quickedit'/>
   </b:includable>
</b:widget>

핵심 내용을 <b:widget-settings> 에서 입력하고 이름을 붙인 내용을 <b:include> 에서 가져다가 사용하고, 추가로 필요한 부분을 넣는 식이에요.

코드 달기

다음의 핵심 내용을 레이아웃-html 위젯 내용에 넣어 줍니다.

<div id="RecentComments" class="dsq-widget">
 <h2>최근 댓글들</h2>
 <script type="text/javascript" src="http://example.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=100"></script>
</div>

그리고 example.disqus.com 부분에서 example 을 자신의 디스커스 이름으로 바꿔줍니다. - 예 zeewhon.disqus.com

스타일 적용하기

테마-편집에서 방금 입력한 디스커스 이름을 찾으면 다음처럼 <b:widget ....> .... </b:widget> 부분을 찾게됩니다.

<b:widget id='HTML1' locked='false' title='댓글' type='HTML' version='1'>

   <b:widget-settings>
      <b:widget-setting name='content'>&lt;div id=&quot;RecentComments&quot; class=&quot;dsq-widget&quot;&gt;
         &lt;h2&gt;Recent Comments&lt;/h2&gt;
         &lt;script type=&quot;text/javascript&quot; src=&quot;http://zeewhon.disqus.com/recent_comments_widget.js?num_items=5&amp;hide_mods=0&amp;hide_avatars=0&amp;avatar_size=32&amp;excerpt_length=100&quot;&gt;&lt;/script&gt;
         &lt;/div&gt;
      </b:widget-setting>
   </b:widget-settings>

   <b:includable id='main'>
       ......
   </b:includable>
</b:widget>

디스커스 코드가 content 라고 이름붙인 위젯 설정에 정의되어 있습니다.

&lt 와 &gt 는 뭐죠?
less than (이하) 와 greater than (이상)을 나타내는 HTML 특수문자입니다. html 특수문자

출처 : http://www.themeasuredmom.com/

스타일 달기

그냥 두어도 무방하지만, 위젯 내부의 코드에 스타일을 적용해 봅시다.

해당 위젯 내부의 includable 에다가 css 스타일을 입력한다.

   <b:includable id='main'>

      <style type='text/css'>
         .dsq-widget-user{text-decoration:none; display:block; font-family:calibri; color:#0EAB2A;}
         .dsq-widget-comment{font-family:calibri; display:block;}
         .dsq-widget-meta a{text-decoration:none; font-family:calibri;}
         .dsq-widget-item p a{text-decoration:none; color:#0EAB2A;}
         .dsq-widget-item:hover{border-left:3px solid #16B560; padding-left:10px; background-color:#EDFAF3;}
         .dsq-widget-avatar{border-radius:100px;}
         .dsq-widget ul.dsq-widget-list{padding:0; margin:0; text-align:left;}
         img.dsq-widget-avatar{width:32px; height:32px; border:0px; margin:0px; padding:0px 3px 3px 0px; float:left;}
         a.dsq-widget-user{font-weight:bold;}
         a.dsq-widget-thread{font-weight:bold;}
         p.dsq-widget-meta{clear:both; font-size:80%; padding:0; margin:0;}
         li.dsq-widget-item{margin:15px 0; list-style-type:none; clear:both;}
         span.dsq-widget-clout{padding:0 2px; background-color:#ff7300; color:#fff;}
         table.dsq-widget-horiz td{padding-right:15px;}
         .dsq-widget-comment p{display:inline;}
      </style>

      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
         <h2 class='title'>
            <data:title/>
         </h2>
      </b:if>
      <div class='widget-content'>
         <data:content/>
      </div>
      <b:include name='quickedit'/>
   </b:includable>
</b:widget>