티스토리 사이드바 인기글 추가
- 닌맘의 나를 그리다. -
필자는 우회없이 오직 티스토리 블로그만으로 애드센스 최종 승인 이후 광고가 정상적으로 잘 나오고 있습니다.
하지만 다른 블로거들처럼 블로그가 허전해 보여서 어떻게 꾸밀지 고민하던 중 최근 필자의 블로그의 인기글을 방문자들에게 좀 더 소개해보고 싶어 사이드바에 위 사진과 같이 인기글 리스트를 추가하였습니다.
마음에 드시는 분들은 이제부터 인기글 리스트 추가 방법을 참고하시면 됩니다.
먼저 티스토리 블로그 관리자 페이지에서 스킨편집 HTML 편집을 클릭합니다.
CSS 를 눌러서 커서를 맨 밑으로 내린 후 코드를 입력합니다.
.sidebar-popular-posting{overflow: hidden;} .sidebar-popular-posting .tit-related{font-size: 16px; margin: 10px 0;} .sidebar-popular-posting ul{list-style:none; padding: 0; margin: 0; overflow: hidden;} .sidebar-popular-posting .popular-list-wrapper li {margin-bottom: 10px;} .sidebar-popular-posting .popular-list-wrapper .post-image { width: 60px; height: 60px; float: left; display: block; background-color: #DADADA; background-position: center center; background-repeat: no-repeat; overflow: hidden; } .sidebar-popular-posting .popular-list-wrapper .post-image img:hover {opacity: 0.6;} .sidebar-popular-posting .popular-list-wrapper .post-content a { text-decoration:none; font-size: 14px; padding-top: 10px; margin-left: 70px; display:-webkit-box; display:-ms-flexbox; display:box; overflow: hidden;
height: 60px; line-height:20px; white-space: normal; text-overflow: ellipsis; vertical-align:middle; word-break:break-word; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .sidebar-popular-posting .popular-list-wrapper .post-content a:hover { color: #a161bf; } |
다음으로 HTML에서 </S_sidebar_element> 를 찾아 아래서 본인이 원하는 사이드바 위치에 코드를 입력합니다.
<!-- 사이드바 인기글 리스트 --> <s_sidebar_element> <!-- 사이드바 인기글 리스트--> <div class="sidebar-popular-posting"> <h4 class="tit-related">Popular posts - 블로그 인기 글</h4> <ul class="popular-list-wrapper"></ul> </div> </s_sidebar_element> <!-- 사이드바 인기글 리스트 끝 --> |
HTML에서 </body>를 찾아 바로 위에 스크립트 코드를 입력합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $.ajax({ type: "GET", url: "/m/4", // dataType: "html", cache: false, success: function (html) { $(html).find('.list_relation li').each(function (i) { var strTitle = $(this).find('.tit_relation').text(); var strLink = $(this).find(".link_relation").attr('href').replace("/m", ""); var strImgSrc = $(this).find('.img_thumb').attr('src').replace("https:", ""); strImgSrc = strImgSrc.replace('S272x320', 'C60x60'); if (i === 6) { // return false; } $('.popular-list-wrapper').append( '<li class ="post">' + '<div class="post-image"><a href="'+ strLink + '"><img src="' + strImgSrc + '"class="img-thum" alt="Popular posts image"></a></div>' + '<div class="post-content"><a href="'+ strLink + '" title="' + strTitle + '">' + strTitle + '</a></div>' + '</li>' ); }); } }); }); </script> |
스크립트 코드에서 url: "/m/4" 부분에서 숫자 4를 본인 포스팅 중 지우지 않을 주소 끝부분으로 하면 됩니다.
예를들면 https://minvely9504.tistory.com/2 이런식으로 변경하면 됩니다.
이제 본인의 블로그 사이드바에 인기글 리스트가 설정되었습니다.
'IT 정보 > 티스토리' 카테고리의 다른 글
| 티스토리 방문자 늘리기 tip 이것도 하셨나요? (0) | 2019.03.07 |
|---|---|
| 티스토리 블로그 방문자 늘리기 해보자 (1) | 2019.03.07 |
| 티스토리 사이드바 최근에 올라온 글 리스트 추가 방법 (0) | 2019.02.24 |
| 티스토리 구글 유입 꿀팁 공유 (0) | 2019.02.07 |
| 티스토리 네이버 검색 팁, 웹마스터도구와 RSS제출 (1) | 2019.02.07 |
생활정보19
금융, 복지, 교육 등 핫한 정보를 알려드려요
