티스토리 블로그에 이 블로그 인기 글 넣기[티스토리 인기 글 #1스킨]

반응형

현재 티스토리에는 인기 글 치환자가 생겨 더 이상 아래 내용은 필요 없게 되었습니다.

#1스킨이 아닌경우 또는 다른 디자인 인기글은 아래 주소

http://boogong.tistory.com/56


티스토리 모바일 버전 본문 하단을 보면 “이 블로그 인기 글”이란게 있습니다. PC 버전과 반응형 버전에는 없고 티스토리 자체 모바일 버전에만 있어 자바스크립트를 이용해 모바일 버전에 있는 "이 블로그 인기 글"을 티스토리 반응형 기본 스킨 #1 스킨에 적용해 보려 합니다.


※참고

반응형 사용자가 티스토리 자체 모바일 버전을 보시려면 PC에서 본인의 티스토리 주소 끝에 m을 입력하시면 됩니다. 예)http://주소.tistory.com/m 아무 포스팅이나 들어가서 사이트 하단을 보면 이 블로그 인기 글이 있습니다.


우선 아래와 같이 티스토리 #1 스킨 본문 하단에 "이 블로그 인기 글"을 넣어 보았습니다.

디자인은 #1스킨 "카테고리의 다른 글"과 비슷 하게 했습니다. 블로그 인기 글 설치에는 3가지 코드가 들어갑니다.(HTML과 CSS 그리고 자바스크립트)


1. Html 코드부터 설치? 하도록 합니다. 우선 티스토리 관리자 페이지에서 HTML 편집 창으로 갑니다.

편집 창에서 <div class="area_view"> 이것을 찾습니다. 아래 코드를 복사하여 <div class="area_view"> 이것이 끝나는 곳에 아래 그림처럼 코드를 넣습니다. 


 <!-- #1 본문 하단 이 블로그 인기 글 --> 
 <div class="bottom-popular-posting">
     <h4>'<span>popular posts</span>' 이 블로그 인기 글</h4>              
        <ul class="popular-list"></ul>
 </div>

2. 이 번에는 아래 자바스크립트 코를 복사해 넣겠습니다.

코드를 붙여넣기 할 위치는 HTML 편집 창 아래를 보시면 </body>가 있습니다. 이것 위에 넣어 주시면 됩니다. 

<script>
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "/m/4", // /4 숫자 부분에 본인의 포스팅 뒷 주소를 넣으세요
        dataType: "html",
        cache: false,
        success: function (html) {
            $(html).find('.list_relation li').each(function () {
                var strTitle = $(this).find('.tit_relation').text();
                var strLink = $(this).find(".link_relation").attr('href').replace("/m", "");
                $('.popular-list').append(                   
                    '<li><a href="'+ strLink + '" class="link_board">' + strTitle + '</a></li>'
               );
            });
        }
    });

});
</script>

코드 중에서 url: “/m/4” 이 부분에서 숫자 4는 제 포스팅 글 주소 끝부분입니다. 각자 포스팅 시작하는 주소가 다르니 삭제되지 않은 살아 있는 포스팅 주소 끝부분을 입력하시면 됩니다. 제 블로그의 경우는 4번부터 시작합니다. 설명이 어렵네요~ /m/내 포스팅 주소 아무거나 입니다.

예) 내 블로그 포스팅 주소 http://boogong.tistory.com/54 이것중 맨 막지만에 있는 숫자54로 하면 됩니다. 그러면 url: “/m/54” 이렇게 되겠지요.


3. 마지막으로 스타일 코드입니다. HTML 편집 창에서 저장하시고 CSS 편집 창으로 이동합니다.

CSS 편집 창 맨 아래에 아래 코드를 붙여넣으시고 저장하고 나오시면 됩니다.

/* 본문 하단 이 블로그 인기 글 */
.bottom-popular-posting {width:100%; color: #909090; overflow: hidden; margin: 15px 0 0;}
.bottom-popular-posting h4 {padding: 0 0 7px; border-bottom:1px solid #eee;font-size:14px; color:#666; font-weight: normal; line-height:1.5;}
.bottom-popular-posting h4 span{color: #3db39e; font-weight: bold;}
.bottom-popular-posting .popular-list{margin-top: 15px;}
.bottom-popular-posting .popular-list li {float: left; width: 50%; word-break: break-all; overflow: hidden;line-height: 1.5;}
.bottom-popular-posting .popular-list li:nth-child(even) a { padding-left:10px; }
.bottom-popular-posting .popular-list li a { overflow:hidden;max-width:255px;font-size:12px;white-space:nowrap;text-overflow: ellipsis;color:#666; border:0;display:inline-block;}


@media only screen and (max-width:820px) {
    .bottom-popular-posting {margin: 10px 0; border-top:1px solid #ebebeb; border-bottom:1px solid #eee; padding:15px 0; width:auto}
    .bottom-popular-posting h4 {padding:0 15px; border:0;}
    .bottom-popular-posting .popular-list{ margin-top:10px; overflow:hidden; display:block }
    .bottom-popular-posting .popular-list li {float: none; width:100%; margin-bottom:5px;padding:0 15px;}
    .bottom-popular-posting .popular-list li:nth-child(even) a { padding-left:0; }
    .bottom-popular-posting .popular-list li a {font-size:15px; color:#333; max-width:230px;}
}

여기까지 하셨으면 잘 적용이 되었는지 확인하시면 되겠습니다. 


이번에는 #1스킨 하단에 보면 사이드바 위젯 들이 있습니다.




하단 사이드바 위젯에 이 블로그 인기 글을 추가해 보도록 하겠습니다.

위에 설명한 본문 하단 블로그 인기 글을 적용하셨다면 HTML 코드만 넣으시면 됩니다.

위치는 HTML 편집 창에서 <!-- 최근에 올라온 글 -->를 찾아 그 아래에 넣으면 됩니다.


<!-- #1 하단 사이드바 위젯용 -->
<s_sidebar_element>
	<!-- 이 블로그 인기 글 -->
	 <div class="box_aside popular-posting">
		<strong>이 블로그 인기 글</strong>
		<ul class="list_board popular-list"></ul>
	 </div>							
</s_sidebar_element>        

코드 삽입이 끝났으면 저장하고 나오셔서 블로그로 가 확인하시면 됩니다.


※참고: 만약 사이드바 위젯만 적용하고 싶으시면 위 코드와 자바스크립트 코드만 넣으시면 됩니다. CSS 코드는 필요 없습니다. 다음 편에는 #2 스킨에 이미지가 있는 블로그 인기 글을 포스팅 하겠습니다.

#1스킨이 아닌경우 또는 다른 디자인 인기글은 아래 주소

http://boogong.tistory.com/56

티스토리 블로그 본문 하단에 블로그 인기 글 넣기2


반응형
그리드형