티스토리, 모바일 화면의 인기글을 블로그에 적용하는 방법

티스토리, 모바일 화면의 인기글을 블로그에 적용하는 방법



아래와 같이 변경 적용된 이미지처럼, 티스토리가 이전에는 위젯 형식과 치환 방식으로 블로그의 인기있는 글을 불러올 수 있었다.


아래의 이미지는 적용이 완료된 상태이며 인기글은 티스토리 누적 데이터에 따라 순서가 지속적으로 변경되며, 모바일에 볼 수 있는 6개의 글만 참조해서 불러올 수 있습니다.



하지만, 

반응형 스킨의 대세와 티스토리의 개편으로 인해 "/m" 모바일 화면에서만 인기글을 확인 할 수 있게 되어 살짝 불편하지는 않지만 반응형 스킨에서도 인기글을 볼 수 있으면 어떨까?하는 고민을 하고 있던 중...,





자하부공에 치환자를 변환하는 스크립트를 발견하게 된다.


항상 느끼는 것이지만 

탕비수다 스킨의 경우, 다른 곳의 스크립트나 스타일 방식을 적용하기가 매우 까다롭다.


묘한오빠 블로그를 찾아주시는 분들 중에 탕비수다 스킨을 사용하시는 분들이 많은 편이라 적용하는 방법을 공유합니다.




적용하는 방법은 이렇습니다.

원하는 사이드바에  아래와 같이 태그들을 삽입해 주면 되며, 스크립트 아래 그림도 참고하시면 됩니다



<s_sidebar_element>

  <!-- 인기 글 -->

  <div class="widget list">

<h3 class="header"><span>popular posts</span></h3>

<ul class="list_board popular-list">

<script>

$(document).ready(function(){

$.ajax({

type: "GET",

url: "/m/2018",   ▶▶ /m/2018, 에서 /2018은 포스팅된 글 중, 하나만 넣어 참조값으로 활용

 

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>

</ul>

  </div>

</s_sidebar_element>



묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 20

*

*

    • 그새 좋은 정보들이 많이 올라왔네요 ㅎㅎ 저는 나중에 글 수가 더 많아지면 적용해봐야겠어요 ㅋㅋ

    • 좋은 팁은 바로 적용 해야되요 ^^;
      안그러면 언제 사라질줄 모르거든요 ㅎㅎ

    • 방금 적용해봤는데 방법은 간단하네요. 그런데 생각지도 못한 글들이 표시돼서 우선은 생각 좀 해봐야겠어요 ㅋㅋ;

    • 그건 어쩔수가 없어요 ^^;
      저장된 누적 데이터를 뿌려주는 방식이라...,ㅎㅎㅎ
      양질의 포스팅을 많이 올리시다보면 바뀌니까 1일 1포스팅 하시면 됩니다

    • 오, 좋은 정보네요 항상 티스토리 모바일에서만 볼 수 있다는게 아쉬웠는데.
      링크타고 가니 저분은 제가 사용하는 스킨이랑 같은걸 쓰시네요 더 쉽게 적용할 수 있겠어요^^

    • 좋은 정보 맞지요 ㅅㅅ
      인기글 관련해서 몇 달 전부터 찾아보고 모바일 화면에서 스크립트를 하나씩 뒤지고 있던 중에 알게 되어 바로 적용했습니다. 청춘일기님 블로그에 바로 적용하시면 잘 어울릴것 같아요.
      보니까 이미지도 나오게 하는 글이 있더라구요 ^^

    • 인기글 이미지 불러오기

      <div class="section_relation">
      <h3 class="sectionview_tit"><span class="tit_sectionview">이 블로그 인기 글</span></h3>
      <ul class="list_relation"><ul>

      <script>
      $(document).ready(function(){
      $.ajax({
      type: "GET",
      url: "/m/2018",
      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", "");
      var strIMG = $(this).find(".link_relation .img_thumb").attr('src');
      $('.list_relation').append(
      '<li><a href="'+ strLink + '" class="link_relation">' + '<img src="'+ strIMG + '" class="img_thumb">' + '<span class="detail_relation">' + strTitle + '</span>' + '</a></li>'
      );
      });
      }
      });
      });
      </script>

      </div>

    • <!-- 땀똔님 이미지 + 인기글 -->
      <script>
      $(document).ready(function(){
      $.ajax({
      type: "GET",
      url: "/m/1",
      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", "");
      var strImg = $(this).find("img").attr("src"); // 썸네일 링크 불러오기

      var l_name = strLink.substring(1); // strLink의 값에서 슬래시를 제외한 나머지 부분을 추출
      l_name = "thumb_" + l_name;

      $('.popular_list').append( // CSS 적용이 쉽도록 각기 다른 속성값을 가지는 id 추가
      '<div id="'+ l_name +'" class="popular_thumb"><a href="'+ strLink + '" class="link_board"><img src="'+ strImg +'" title="'+ strTitle +'">' + strTitle + '</div>'
      );
      });
      }
      });
      });
      </script>

이전 글

다음 글