티스토리 사이드바 인기글 추가

티스토리 사이드바 인기글 추가

                                                            - 닌맘의 나를 그리다. - 

필자는 우회없이 오직 티스토리 블로그만으로 애드센스 최종 승인 이후 광고가 정상적으로 잘 나오고 있습니다. 

애드센스 최종승인 후기

하지만 다른 블로거들처럼 블로그가 허전해 보여서 어떻게 꾸밀지 고민하던 중 최근 필자의 블로그의 인기글을 방문자들에게 좀 더 소개해보고 싶어 사이드바에 위 사진과 같이 인기글 리스트를 추가하였습니다.   

마음에 드시는 분들은 이제부터 인기글 리스트 추가 방법을 참고하시면 됩니다. 

먼저 티스토리 블로그 관리자 페이지에서 스킨편집 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 이런식으로 변경하면 됩니다. 

이제 본인의 블로그 사이드바에 인기글 리스트가 설정되었습니다.