워썬더-코리아

2013년 11월 7일 목요일

ㅅㄷㄴㅅ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

We can employ the .contents() method to help convert this blob of text into three well-formed paragraphs:

2013년 10월 30일 수요일

test

2013년 6월 20일 목요일

블로거에 검색박스(서치폼) 추가하는 방법과 검색에 대해..

블로거 기본 템플릿에는 검색창이 없다. 기본으로 위젯으로 지원한다. 보통 커스텀 템플릿 제작자들은 블로거의 기본 위젯을 잘 사용하지 않는다.

이유인 즉은 거의 모든 위젯 들이 IFRAME 형식으로 불러오는데 이 경우 CSS를 적용하는 것이 제한이 된다.

따라서 대부분의 유저들은 따로이 코딩을 해서 추가하는 경우가 많다. 아래 소스는 블로거 내 검색을 위한 기본 소스로 CSS만 따로 작성해주면 좋은 검색박스가 된다.

참고로 블로거 내의 검색은 제목과 내용에서 완전한 하나 이상의 단어를 검색한다.

가령 '블로거에 추가하는 방법'이라는 제목의 글이 있고 '블로거'를 검색어 할 때 '블' 혹은 '블로'로 검색을 하면 검색이 되지 않는다. '블로거' 혹은 '추가', '방법'과 같이 검색을 해야 한다. 재밌는 것은 '국가 별 블로거'라는 제목이 있다면 '별'을 검색어로 선택해도 검색이 된다는 것이다.

하나의 팁을 알려주자면 블로거는 한국 유저보다 외국의 유저들이 많다. 미국은 물론이고 영국, 호주, 인도와 그 주변의 여러 국가들에 많은 유저들이 있다. 그렇기 때문에 글을 작성 할 때 가급적 한글과 영어를 섞어가며 포스팅하면 외국인의 블로거내 유입이 용이하다.

검색박스(서치폼) 기본 소스

<!-- 검색창 시작 -->
<form action='/search' class='search-form' id='search-form' method='get' target='_top'>
 <input id='search-text' class='search' name='q' placeholder='검색어 입력' type='text'/>
 <input  class='submit' id='submit' type="button" value="검색"/>
</form>
<!-- 검색창 끝 -->

블로거 페이스북 공유버튼으로 공유시 요약글 표시하는 방법

블로거에서 제공하는 기본 공유버튼 중 페이스북은 제목, 이미지, 요약글을 따로이 수정하지 않아도 바로 공유 할 수 있다.

하지만 기본 제공되는 템플릿이나 혹은 커스텀템플릿에서 페이스북 공유버튼을 눌러 띄워진 팝업창을 보게되면 표시된 요약글 부분에 요약글이나 본문내용이 표시되지 않고 제목이나 혹은 템플릿에 포함된 텍스트가 표시되는 경우가 대부분이다.

따라서 표시된 부분에 요약글을 제대로 표시하기 위한 방법을 소개한다.

아래 소스는 포스트 형식 일 때 본문의 요약글을 불러오고 불러온 요약글을 메타태그를 이용한 요약설명으로 적용하여 페이스북 공유기능이 제대로 작동하게 하기 위한 소스이다.

템플릿 수정에서 <b:includable id='post' var='post'>를 검색해 그 하위에 적당한 위치에 붙여 넣는다.

페이스북 요약글 제대로 표시하기

<!-- 페이스북 요약글 표시 시작 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.snippet'>
<meta expr:content='data:post.snippet' name='description'/>
</b:if>
</b:if>
<!-- 페이스북 요약글 표시 끝 -->

블로거에 게시물 무한스크롤을 추가하는 방법

트위터나 페이스북에서 게시글을 아래로 읽어나가다 보면 화면이 끝나는 지점에서 이전의 게시글이 자동으로 보여지는 것을 볼 수 있다. 이 같은 기능이 무한스크롤링이다.

무한스크롤링은 홈페이지 게시판의 페이지기능을 대체 한 것으로 처음 접하는 경우 참신하다고 느끼게 된다. 현재 블로거의 동적뷰 템플릿에서 기본 적용이 되는 무한스크롤링 기능을 일반 커스텀 템플릿에서 적용하는 방법을 소개한다.

manki's weblog를 방문하면 무한스크롤 기능을 위한 자바스크립트 소스를 공유하고 있다. 게시자인 이 지속적으로 버전업을 하고 있다.

사용방법은 그리 어렵지 않다. HTML/JavaScript 위젯을 추가하고 내용에 아래 스크립트를 붙여넣는다. 제목은 가급적 비워둔다.

HTML/JavaScript 위젯으로 추가하는 방법

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"/>
<script src="//m-misc.appspot.com/js/blogger-infinite-scrolling.js" type="text/javascript"/>

템플릿에 추가하는 방법

<script type='text/javascript'>  
//<![CDATA[
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();150>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=
_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=a('<a href="javascript:;">Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRNbhPR_HXfLcxyLMTLDSOK_HV0QsDbhMHaK50zDp6kPe8tekGrxpW3q6MsBldiwls8MQ9oV6_DICUk8_iWiftd491fGm0LVNRqlAcYD8L_BLL9LdWkXdJi56lSAGuTDiBBD4S4PTtdUd/s32/ajax-loader.gif" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
//]]>
</script>

블로거 국가 별 도메인으로 리디렉션 방지하는 방법

블로거는 대부분 알고있는 것과 같이 국가 별 도메인으로 블로그를 리디렉션한다. 예를 들어, example.blogspot.com를 한국에서 접속하면 example.blogspot.kr 호주에서 접속하면 example.blogspot.com.au로 리디렉션 된다.

구글이 국가 별 리디렉션을 구현 하는 주된 이유는 선택적 검열을 하기 위함이다. 이는 한 국가에서 저작권 위반 등의 이유로 블로그나 특정 페이지가 차단이 되었다 하더라도 여전히 다른 나라에서 서비스를 계속 제공 할 수 있다는 장점을 가진다.

하지만, 방문통계를 낸다고 한다면 리디렉션으로 인해 제대로 활용하지 못하는 사례가 될 수 있다.

구글에서는 example.blogspot.com과 같이 기본 주소를 사용하기 위해서 주소 뒤에 /ncr을 추가하는 방법을 제공한다. 이것을 이용하여 각 국가별로 접속을 하더라도 기본 주소로 리디렉션을 하는 스크립트를 소개한다. 아래 스크립트를 </head> 위에 붙여넣는다.
digital inspiration에서 보다 자세한 내용을 확인 할 수 있다.

블로거 기본주소로 리디렉션하는 스크립트

<script type="text/javascript">
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "http://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);
}
</script>

블로거 썸네일과 요약글을 자바스크립트 없이 표현하는 방법

보통 블로그라 함은 홈페이지의 게시판과는 달리 여러개의 게시글 본문이 연이어 보여지는 형태가 많다. 이것은 여러 글을 화면이동 없이 한 화면에서 바로 확인 한다는 장점이 있으나 필요한 정보만 원할 경우 다소 검색이 지루해 진다.

더욱이 요즘 블로그로 광고수익을 올리려는 블로거들의 블로그를 방문하면 여기저기 덕지덕지 붙어 있는 광고가 상단이며 사이드바, 하단, 심지어 게시글 중간중간 까지 점령하고 있는더라 상당히 눈이 어지러워진다. 적정한 수준의 페이지광고는 이쁘게 봐 줄 수는 있으나 무분별한 광고배치는 가급적 삼가했으면 하는 바램이 있다.

본론으로 돌아가서 블로거를 방문했을 때 바로 본문이 보여지는 것이 아닌 썸네일과 요약글을 표현하는 방법을 소개한다. 블로거의 템플릿을 꾸미는데 상당히 도움이 되는 소스코드이기 때문에 잘 이해 응용하면 많은 도움이 될 것이다.

참고로 구글 블로거에서 썸네일과 요약글을 표현하는 방법으로 피드를 이용한 자바스크립트가 많이 활용된다. 실제 검색을 해보면 블로거에 자바스크립트가 빠져서는 안될 정도로 무분별히 사용되고 있는 것을 확인 할 것이다. 아래 소스코드는 자바스크립트 없이 블로거 구문만으로 표현하는 방법이다.

아래 코드를 복사 한 후 템플릿 수정에서 <data:post.body/>를 검색하여 아래코드로 바꿔 준다. 간혹 템플릿 마다 여러개가 표현되어 있을 수 있다. 템플릿을 잘 해석하여 필요한 부분을 정확히 수정해야 한다.

소스코드

<b:if cond='data:blog.pageType != &quot;item&quot;'>   <!-- 만약 블로거의 페이지 타입이 게시물 형태일 경우 숨기기 -->
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <!-- 만약 블로거의 페이지 타입이 페이지 형태일 경우 숨기기 -->
  <div class='thumbnail'>
   <b:if cond='data:post.firstImageUrl'>   <!-- 만약 첫번째 이미지가 있으면 -->
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>   <!-- 첫번째 이미지를 표현 -->
   <b:else/>   <!-- 첫번째 이미지가 없고 -->
    <b:if cond='data:post.thumbnailUrl'>   <!-- 만약 썸네일 이미지가 있으면 -->  
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> <!-- 썸네일 이미지 표현 -->
    <b:else/>   <!-- 첫번째 이미지도 없고 썸네일도 없으면 -->
     <span>No thumbnail</span>   <!-- No thumbnail이라고 표현 -->
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>   <!-- 요약글을 표현 (요약글은 140까지 표현) -->
 <b:else/>   <!-- 페이지 형태에서 썸네일과 요약글을 숨기는 경우 -->
  <data:post.body/>   <!-- 페이지 본문 표현 -->
 </b:if>
<b:else/>   <!-- 게시물 형태에서 썸네일과 요약글을 숨기는 경우 --> 
 <data:post.body/>   <!-- 게시물 본문 표현-->
</b:if>

해설

if else 구문이 두가지가 중복되어 굉장히 이해하기 힘들 것이다. 더욱이 게시물과 페이지 타입에서 숨기는 경우라 더욱 그러하다. 나눠서 생각하면 상당히 간단하다. 우선 썸네일과 요약글 구문부터 파헤친다.

  <div class='thumbnail'>
   <b:if cond='data:post.firstImageUrl'>   <!-- 만약 첫번째 이미지가 있으면 -->
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>   <!-- 첫번째 이미지를 표현 -->
   <b:else/>   <!-- 첫번째 이미지가 없고 -->
    <b:if cond='data:post.thumbnailUrl'>   <!-- 만약 썸네일 이미지가 있으면 -->  
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> <!-- 썸네일 이미지 표현 -->
    <b:else/>   <!-- 첫번째 이미지도 없고 썸네일도 없으면 -->
     <span>No thumbnail</span>   <!-- No thumbnail이라고 표현 -->
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>   <!-- 요약글을 표현 (요약글은 140까지 표현) -->

첫번째 이미지가 있으면 그 이미지를 표현하고 첫번째 이미지가 없고 썸네일이라도 있으면 그 썸네일을 표현한다. 이마자저도 없으면 No thumbnail이라고 표현한다. 그리고 이미지나 썸네일 다음으로 요약글을 표현한다.

다음은 위 소스를 제거한 구문을 본다.

<b:if cond='data:blog.pageType != &quot;item&quot;'>   <!-- 만약 블로거의 페이지 타입이 게시물 형태일 경우 숨기기 -->
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <!-- 만약 블로거의 페이지 타입이 페이지 형태일 경우 숨기기 -->

<!-- 썸네일 요약글 부분 -->

 <b:else/>   <!-- 페이지 형태에서 썸네일과 요약글을 숨기는 경우 -->
  <data:post.body/>   <!-- 페이지 본문 표현 -->
 </b:if>
<b:else/>   <!-- 게시물 형태에서 썸네일과 요약글을 숨기는 경우 --> 
 <data:post.body/>   <!-- 게시물 본문 표현-->
</b:if>

블로거의 페이지 타입이 페이지 형태일 경우 썸네일 요약글 부분을 숨기고 페이지 본문을 표현한다. 페이지 타입이 페이지 형태가 아니고 게시물 형태일 경우 썸네일 요약글 부분을 숨기고 페이지 본문을 표현한다.

따라서 블로그 페이지 타입이 게시물이나 페이지 타입이 아니면 썸네일과 요약글을 표현하고 그 반대이면 숨긴다와 같은 말이다.