[코딩일지] 블로그 인기글, 카테고리, 댓글, 태그 순서 변경하기

---

#20230624 #HTML #CSS

 

---

오늘의 고민 : 발행한 글 이후 나타나는 항목 순서 변경은 어떻게 하는거지?

 

 

발행한 글 영역이 끝난 뒤 스크롤을 더 내리다 보면, 광고와 태그. 댓글다는 창과 같은 카테고리의 글 등 여러가지 옵션들이 나열되서 보여진다. 나는 그 순서를 바꾸고 싶었다.

 

현재 순서 : 광고 - 태그 - 다른글 - 블로그 인기글

원하는 순서 : 다른글 - 블로그 인기글 - 태그 - 광고

 

원하는 순서로 변경 하고싶었던 이유는, 글이 끝난 이후에 광고보다는 다른 글이나 인기글이 보여지는것이 유저들이 조금이나마 더 블로그에 오래 머물 수 있게 하지 않을까? 하는 마음에서였다.

 

 

 

---

 

 

#컴퓨터에서 보여지는 현재 순서

 

 

 

 

 

---

 

#모바일(휴대폰)에서 보여지는 현재 순서

 

 

 

 

 

 

---

반응형

---

 

 

#궁금증 해결하기 : 기본값으로 나열되어있는 설정 순서 바꿔주기

 

 

태그보다 발행된 글을 위로 돌리고 싶으면 어떻게?

 

꾸미기 > 스킨편집 > HTML 수정 > HTML 

해당 탭에들어가서 각각 '태그'와 '이전 발행글', '블로그 인기글' 항목들을 찾아 순서를 바꿔주면된다! (간단)

 

 

 

 

문제는 이 많은 HTML 틀 안에서 각각의 코드가 어떻게 새겼는지 모르기 때문에 찾는 것이 문제라는 것..

 

 

 

 

자 그럼 이렇게 450라인 쯤에 보이는 저 <s_tag_label>가 태그 관련된 코드들의 뭉텅이이고, 저기서  >로 된 화살표를 누르면 같이 합쳐져있던 코드들이 노출된다. ( > 누르면 ⋁ 이렇게 바뀌면서 펼쳐진다.) 

 

이 뭉텅이를 접힌상태이던, 펼치던 상관 없이 뭉텅이들끼리 한 세트이기 때문에, 이동할 때 꼭 같이 이동시켜줘야 한다.

 

 

관련글 → 관련글 뭉텅이
태그 → 태그 뭉텅이 Ex) <s_tag_label>

 

 

각각의 뭉텅이 해시태그 찾아내는 방법은. 숨겨져 있던 코드들을 펼쳐보면 아래와 같이 코드 값 중앙에 이런 식으로 표시가 되어있는데,

 

이때 저 주황색 친구의 이름을 읽어보면 알 수 있다. (지금 예시로 tag만 가져와서 이것과 관련된 코드들만 있음)

 

 

 

 

              <s_tag_label>

                <div class="tags">

                  <h2>태그</h2>

                  

                </div>

              </s_tag_label>

 

 

그리고 나서 이렇게 되어있는 뭉텅이를 기존 순서 (광고 - 태그 - 다른글 - 블로그 인기글)에서 원하는 순서(다른글 - 블로그 인기글 - 태그 - 광고)로 바꿔주면 끝이다! 

 

뭔가 간단한 듯 안간단하죠..? 허허..

 

---

728x90

---

 

#코드 순서 수정 후 화면들

 

 

순서를 바꾸고 나서의 화면들이다.

내가 원하던대로 태그부터가 아닌, 블로그 안에서 발행한 다른 글들이 먼저 표시된다. 아래 사진들을 보면, 다른글 - 블로그 인기글 - 태그  순서대로 기존에 내가 원하는 대로 순서가 변경된 것을 볼 수 있다.

 

하나 추가로, 광고 태그를 못찾아서ㅠ 해당 코드는 순서 재배열을 못했다, 아마 광고 배치 설정할 때 본문 아리쪽에 광고가 표시되도록 설정을 해놔서 따로 HTML코드가 아니라 설정에 의해 표시되고 있는게 아닐까 싶다. (지극히 혼자해본 예상으로 아닐수도 있음.)

 

 

---

 

 

#컴퓨터에서 보여지는 현재 순서

 

 

 

 

---

 

 

#모바일(휴대폰)에서 보여지는 현재 순서

 

 

 

 

 

 

---

그럼 이번에 나의 의문도 해결!

 

끝.

 

---