blogger | 각종 스니펫 글자 수 조정 및 링크 설정

스니펫 링크 필요성

블로그 사용자들이 그 어느 때 보다 보다 스마트폰에 의존하고 있음은 주지의 사실이다. 따라서 구글도 정책상 모바일 사용 편의성에 주력하고 있다. 그러므로 블로그 운용 시 모바일 편의성을 고려하는 것은 상위 노출과 독자 확보에 중요한 요소가 된다는 것은 합당한 추론이 된다.
스마트폰에서 최신 글과 인기 글 및 추천 글은 사용자들이 블로그 게시 글을 쉽게 파악하고 링크를 통하여 접근하는 데 매우 중요하다. 하지만 대부분 섬네일 이미지와 제목에만 링크가 설정되어 클릭 영역이 협소한 관계로 상당히 불편하다. 하지만 아래의 코드를 추가하거나 수정하면 간단하게 스니펫을 추가하고 길이(글자 수)를 조정할 수 있다. 또한 그곳에 구글처럼 클릭할 수 있도록 링크를 설정하여 가독성을 최대할 수 있는 방법을 소개한다.

  <div class='post-body'>
   <a expr:href='data:post.url'>
   <b:eval expr='data:this.postDisplay.showSnippet 
?snippet(data:post.body,{length: 160}) : &quot;&quot;'/></a></div>

링크 설정 방법

스니펫을 추가하고 링크를 설정하는 것은 의예로 대단히 간단하다. 위의 코드를 복사하여 추천 글과 인기 글 및 최근 글 위젯 위치에 붙여넣기만 하면 된다.

다만 그 위치를 파악하기 위해서는 기본적인 HTML 지식이 필요하다. 블로그 최상위 메뉴의 테마에 진입하여 HTML 편집창을 열고 Ctrl+F를 활용하여 위치를 검색하면 된다.

코드의 첫 번째 줄은 스니펫이 박스를 출력하는 코드이며,

코드의 두 번째 줄은 스니펫을 클릭 시 해당 게시물로 연결되는 링크 코드이며,

코드의 세 번째 줄은 스니펫의 길이(글자 수)를 설정하는 코드이다.

추천 글 스니펫 링크

 <b:with value='&quot;featured-post&quot;' var='snippetPrefix'>
  <div class='post-body'>
      <a expr:href='data:post.url'>
      <b:eval expr='data:this.postDisplay.showSnippet ? snippe(data:post.body, {length: 160}) : &quot;&quot;'/></a></div>

최근 글 스니펫 링크

<b:include data='post' name='postTitle'/>          
    <a expr:href='data:post.url'>    
    <b:eval expr='snippet( data:post.body, { length: 100 })'/>    
                </a>   </div>       
                </b:if>

인기 글 스니펫 링크

<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
      <div class='post-body'>
      <a expr:href='data:post.url'>
      <b:eval expr='data:this.postDisplay.showSnippet ? snippe(data:post.body, {length: 100}) : &quot;&quot;'/></a></div>

각 위젯 별 코드의 첫째 줄은 해당 위젯의 위치를 나타낸다. 따라서 첫 째 줄의 키워드를 검색하여 위치를 파악한 다음 바로 아래 코드를 붙여 넣으면 된다.

파란색 링크 배경 없애기

<style>
input, textarea, button, select, a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>

링크 배경 효과 만들기

효과를 적용할 div나 스니펫에 아래의 class(ripple)이름을 부여한다. div가 없는 스니펫의 경우 다음 처럼 div를 만들어야 한다. class 이름은 사용자의 편의에 따라 임의로 정하면 된다

<div class="ripple">

<!--스니펫 코드-->

</div> 

주로 모바일에 해당하므로 아래의 코드를 스킨의 모바일 영역에 탑재해야 한다. 모바일 영역은 스킨의 head 구역 안에 다음처럼 스타일을 지정하면 된다.

<!--모바일 영역-->
<b:if cond='data:blog.isMobile'> 
<style>

</style>
</b:if> 

모바일 스니펫 링크 효과 코드

.ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}

<script>
console.log("Hello, World!");
</script>

의 관련글