티스토리블로그에 글쓰기링크다는방법, 각종 링크 달아보자!

안녕하세요 일회용기전문, 포장용기전문 쿡팩입니다.

티스토리는 네이버블로그와 달리 유저가 직접 html, css등을 

직접 편집할 수 있어서 각자 사용자들의 취향에 맞게 

편집한 다양한 디자인의 블로그가 있어요.

물론 html, css공부하려면 어렵죵..ㅠㅠ

저도 웹개발쪽에만 일을해보고 웹디쪽은 공부해본적이 없어서.. 

저에게도 굉장히 어려워요.. 

그래도 간단한 html은 할줄알아서!~~ 이렇게 오늘 포스팅을 올립니다ㅎㅎ

스킨이 모두 그런건 아니지만

하필 제가 적용한 티스토리블로그 스킨들은 (제가만든게 아니라 무료배포용)

글쓰기 버튼이 없어 글쓰기 페이지 접속과 

블로그 관리자 페이지에 들어가기가 좀 불편하더라구요.

​

보통은 티스토리블로그스킨 우 상단바 My를 클릭후 관리또는 

글쓰기 페이지에 들어가시면 됩니다.

아니면 페이지 맨 아래에 링크가 있긴한데 글을 3개씩 노출시키는 

제 스킨의 구조상 스크롤을 한참내려야ㅠㅠ 나옵니다..

그.래.서

그냥 티스토리블로그 글쓰기와 통계관리 링크를 

스킨에 하나 만들기로 결정했습니다.

제 포스팅만 따라오시면 금방 제작하실 수 있으니~~

놓치지 말고 따라오셔요~~ ^^

1. 먼저 링크를 달 부분이 어딘지를 파악하셔야 해요. 저 같은 경우엔 

홈 ㅣ 태그 ㅣ 미디어로그 ㅣ 위치로그 ㅣ 방명록 밑에 링크를 

추가하려해요^^

링크를 달 부분을 찾는 방법은 크롬기준화면이지만 윈도우도 같아요.

F12를 눌러 개발자모드를 실행해요.

작아서 잘 안보이긴 하지만 네모에 마우스가있는 저 버튼을 클릭하신뒤에

링크를 달 부분에 가져다 되면 우측화면처럼 파란색 영역들이 뜰꺼에요.

그 부분에 가져다 대고 클릭을 하시면 좌측처럼 코드들이 막 뜹니다.

일단 이부분 기억해 놓으셔야해요. 

그 다음에

웬만하면 페이지를 남겨놓으시고 새 탭을 여셔서 티스토리블로그 

관리자페이지에 들어가시면되요. 

크롬화면기준>>

윈도우화면기준>>

2. 관리자 모드에 좌측 메뉴에서 스킨편집을 클릭하세요!

3. 우측에 html편집을 클릭하세요~

4. 우측에 코드들이 주르륵 뜰꺼에요. 

거기서 아까 페이지에서 찾아놓았던 위치를 찾아가야해요~

위에사진이 지금 열린 스킨편집창이고 밑에사진이 아까 찾아놓은 위치에요.

div태그 class명인 list_blogmenu아래에 넣으면 되는데

개발자도구에서 열어놓은 페이지는 

현재 열려있는 페이지값을 나타내고 있어서

조금더 상세하게 나와서 다르게 보이는점! 꼭 알고넘어가셔야해용

ex)

• 홈
• 태그
• 미디어로그
• 위치로그
• 방명록

란 코드가 진짜페이지에선 

     <ul>

          <li class="t_menu_homefirst">...</li>

           .....

          <li....>...</li>

     </ul>

이렇게 나온다는 것 !!입니당.. 

뭐 일단 넘어가시궁..

div라는게 html에서 특정범위를 지칭한다고 이해하시면 편하실건데

div안쪽에

• 홈
• 태그
• 미디어로그
• 위치로그
• 방명록

다음에 글쓰기랑 통계링크를 추가할 

예정이에요. div안쪽이란말은 <div>와 </div>사이라는말 이구요!!

여러 div가 있는데 아까 위에서본 

class명이 list_blogmenu란 div사이에 넣어주시면되용

간단한 html태그만 사용할게요!

5. 우측과 같이 코드를 넣어주셔요. 그다음 적용버튼클릭!

<font color="white">

     <a href="https://kbj87.tistory.com/manage/entry/post"> #글쓰기 </a>

        &nbsp;&nbsp;&nbsp;

     <a href="https://kbj87.tistory.com/manage"> #통계 </a>

</font>

 위에 코드 가져다 붙이시면되요.

궁금해하시는분들을위해!! html코드에 대해 간단한 설명 덧붙일게요.

font는 말그대로 글씨를 뜻하는 태그고 size, 색상, 볼드체등 간단한 

글자관련 값을 조정 할 수 있어요. color="white"여기서

white자리에 다양한 color 영문명을 넣어 바꿔주시면되요~^^

&nbsp;는 html언어에서 띄어쓰기를 뜻하는거에요.

html에선 스페이스를 열번눌러도 1번만 누른걸로 인식이 되기때문에

&nbsp; (콜론 잊어먹으시면안됨)

을 여러번 반복해서 사용하셔야 해요.

a태그는.. 링크를 걸때 주로 많이 사용합니다.

보통 <a href=""></a>로 href에 "" << 이곳에

가고싶은 링크주소를 넣어주시면되요.

6. 이제 적용이 되었고 티스토리블로그에 글쓰기링크, 관리자링크가 잘

들어갔는지 확인작업만 하면 됩니다. 

작업하던 탭은 남겨놓고 새탭을열어 티스토리에 들어가보세요~

이렇게 노출이 되셨나요~? 노출되셨다면 #글쓰기 링크 한번 클릭해서

글쓰기로 넘어가는지 확인해보세요~ ^^

7. 전 잘 넘어가지네요~ ^^ 

여기까지 티스토리블로그에 글쓰기 링크 생성, 

관리자 링크 생성 방법에 대해 포스팅해보았습니다. 

이제 이걸 응용하는 법에 대해 조금만 더 설명할건데 

그건 필요없으신 분들은 다음 포스팅에 뵙도록할게요^^

8. 저희 홈페이지와 네이버블로그링크도 좀 추가하려고 해요. 

이왕이면 다양한 링크 달줄알면 좋잖아요 ^^

다시 티스토리블로그 html편집창에 와서 html편집을 누른뒤에 

아래 코드처럼 넣으시고 싶은 링크를 넣어주세요. 

복사하기 편하게 코드 넣어드릴게요.

넣고 싶으신 한글 값과 링크만 수정하시면 됩니다. 

코드넣고 적용버튼 누르면 끝!

<font color="white">

<a href="https://kbj87.tistory.com/manage/entry/post">

#글쓰기

</a>

&nbsp;&nbsp;&nbsp;

<a href="https://kbj87.tistory.com/manage">

#통계

</a>

&nbsp;&nbsp;&nbsp;

<a href="http://cookpack.co.kr/" target="_blank">

#쿡팩홈페이지

</a>

&nbsp;&nbsp;&nbsp;

<a href="https://blog.naver.com/jnaraa" target="_blank">

#쿡팩네이버블로그

</a>

</font>

 

9. 티스토리블로그 메인에 다시 들어가보시면 

이렇게 링크가 멋지게 생성된 것을 볼 수 있습니다!!

여기까지 티스토리 블로그에 링크다는법!~ 포스팅이었어요.~~

이상~~ 티스토리 블로그에 글쓰기링크다는법!! 이었어요!

감사합니다~~~

​

--광고--

마지막으로 저희 쿡팩은 일회용기, 배달용기, 포장용기 전문 

취급업체입니다.

다양한 일회용기 취급하고있습니다.

각종 일회용기 도소매문의 환영합니다.

문의는 홈페이지에 기재된 연락처 또는 

홈페이지 문의게시판으로 넣어주세요^^

성실한 답변 드리겠습니다. 감사합니다. 좋은하루 보내세요!