오디세이 스킨 글 수정 삭제 버튼 추가하기

티스토리 블로그는 글을 수정하고 삭제하려면 네이버 블로그보다 조금 번거롭습니다. 그래서 글 제목 부분에 수정과 삭제 버튼을 직접 추가하는 방법에 대해 알아보겠습니다. 

 

목차

 

원래 티스토리 글 수정/삭제

우선, 티스토리를 처음 시작하시는 분들이라면, 글 수정과 삭제를 어떻게 해야할지 난감하신 분들도 계실겁니다. 저도 처음엔 한참 찾았습니다. 그래서 html로 수정 삭제 버튼을 추가하지 않고 기존 티스토리 시스템에서 글을 수정하고 삭제하는 방법을 먼저 알려드리려 합니다. 

 

티스토리 PC, 티스토리모바일앱에서 글을 수정하고 삭제하는 방법입니다. 캡처를 떠서 이미지와 자세히 설명하였으니 도움되시기 바랍니다.

티스토리 블로그 글 수정하고 삭제하는 방법(PC와 모바일앱)

 

티스토리 글 수정/삭제 추가하기(1)

티스토리 오디세이스킨 제목 배경 부분

▲티스토리 글을 수정하고 삭제하는 html은 원하는 곳에 추가할 수 있습니다. 스킨 디자인과 사용하는 환경에 따라 수정과 삭제라는 단어를 보이게 할 수 있습니다. 

 

저는 오디세이 스킨을 사용중입니다. 많은 분들은 제목 배경을 없애시지만 저는 오히려 제목배경을 Black으로 만들어 가독성을 높여서 제목 배경 부분을 적극 활용하고 있습니다. 제목 배경 부분에는 글의 카테고리, 글의 제목, 글을 발행한 날짜가 있는데요. 저는 바로 그 날짜 뒤에 글을 수정하고 삭제할 수 있는 기능을 추가했습니다. 

 

그러니 내가 스킨 어느 부분에 글을 수정하고 삭제할 수 있는 버튼(문구)를 넣을지 생각하셔서 그 부분에 html을 추가하시면 됩니다. 

 

티스토리 글 수정/삭제 추가하기(2)

수정/삭제 버튼을 추가할 위치를 정했다면, 티스토리에서 스킨 편집에 들어가서 html 을 클릭합니다. 본문글이 시작하기 전 제목 배경 부분에 글 수정/삭제 기능을 넣기 때문에 html 의 300 근처에 아래 코드가 보일 겁니다. 

 <!-- s_permalink_article_rep / 뷰페이지 -->
 <s_permalink_article_rep>
     <!-- 이미지가 없는 경우 article-header-noimg -->
     <div class="article-header" <s_article_rep_thumbnail></s_article_rep_thumbnail>>
       <div class="inner-header">
         <div class="box-meta">
            <p class="category">💡Blog/블로그 코딩</p>
            <h2 class="title-article">오디세이 스킨 글 수정 삭제 버튼 추가하기</h2>
            <div class="box-info">
                <span class="writer">진짜프리덤</span>
                <span class="date">2022. 6. 27. 00:28</span>
            </div>
          </div>
        </div>
      </div>

 

혹시 이 부분에 적혀있는 코드가 무엇을 뜻하는지 궁금하시다면, 아래글을 참고하시면 저 html 코드가 바로 글의 제목 배경에 해당하는 부분이라는 것을 알 수 있습니다. (오디세이 스킨 글제목 배경, 글제목과 CSS 용어 설명 자세히 보기)

 

즉, 오디세이 스킨은 article-header 가 제목 배경 부분을 의미하기 때문에 그 부분 div class 인 것입니다. 저처럼 글 제목 배경 부분에서 날짜 뒤에 수정과 삭제 버튼을 추가하고 싶으시다면, 바로 위에서 date 아랫 줄에 수정과 삭제 관련 html코드를 추가하면 됩니다. 

 

 

수정/삭제 버튼 html 코드 

날짜 아래 아래 코드를 복사해서 붙여, 꼭 화면 상단의 적용 버튼을 눌러 적용을 완료하시기 바랍니다. 

<span> 
 <s_ad_div> 
   <a style="color: #fff; text-decoration: none;" href="">수정</a> 
   <a style="color: #fff; text-decoration: none;" href="#" onclick="">삭제</a> 
 </s_ad_div> 
</span>

 

*참고로 오디세이스킨이 아니라면, html,CSS 용어가 달라져서 article-header 가 제목 부분이 아닐 수 있습니다. 그리고 저 위치는 오디세이 스킨에서 제목 배경의 날짜 뒤 (날짜와 같은 줄) 입니다. 다른 위치에 글 수정/삭제 버튼을 추가하시려면 그 해당 위치에 대한 html 부분을 찾아서 코드를 추가하셔야 합니다. 

 

이제 티스토리에서 글을 발행한 후, 수정할 부분이 보이면 바로 그 화면에서 글을 수정하고 삭제할 수 있습니다. 저는 정말 이 부분이 제일 유용한 html 같습니다.ㅎㅎ 

 

티스토리 블로그를 사용하시는 분들께 도움되시기 바랍니다. 

감사합니다.