728x90

수성비전자방입니다. 최근 수성비전자방의 스킨을 수정했습니다. 이번에 공감 버튼 쪽을 좀 건드려 보았는데요,

 

원래 이렇게 생긴 것을

 

이렇게 저만의 버튼을 넣었습니다. 오늘은 이렇게 나만의 버튼을 추가하는 방법을 알아보겠습니다.

 

이 방법은 특수합니다. 원래 티스토리 공감, 구독 버튼이 치환자가 따로 제공되지 않고 본문 치환자로 퉁쳐지는데요. 그렇기 때문에 공감 버튼과 구독 버튼 사이에 자신만의 버튼을 넣기가 까다롭습니다.

그래서 저는 자바스크립트를 사용할 건데요, HTML DOM을 사용하겠습니다. 그 전에 먼저 예제 파일을 제공해 드리겠습니다. 연습하실 분들은 사용하시기 바랍니다.

 

예제 파일.zip
0.00MB

 

첨부파일을 압축해제 해주세요. 그러면 파일이 두 개 있을 것입니다. 그 중 index.html 파일을 소스코드 편집기로 실행하세요.

(실제 티스토리 스킨 수정하실 때에는 블로그관리→스킨 편집→HTML 편집으로 들어가시거나 스킨을 내려받아 압축해제 하신 후 skin.html을 소스코드 편집기로 실행하시면 되는 것 아시죠?)

 

그러면 소스코드가 보일텐데 </body> 바로 위에

 

1
2
3
<script type="text/javascript>
 
</script>
cs

 

를 입력하여 <script type="text/javascript>와 </script> 사이에 자바스크립트를 작성하겠습니다.

 

HTML DOM

DOM은 Document Object Model의 약자입니다. HTML DOM를 사용하면 자바스크립트를 이용해 본문을 수정할 수 있습니다. 이 글에서 설명하는 것이 대부분 HTML DOM이라고 생각하시면 되겠습니다.

 

createElement
1
2
3
4
5
var button = document.createElement("a");
button.textContent = "구글 웹 접속";
button.className = "mybutton";
button.href = "https://www.google.com";
button.target = "_blank";
cs

 

createElement를 이용하여 HTML 요소를 만들 수 있습니다.  하나하나 알아보겠습니다.

 

var button = document.createElement("a");

우선 변수를 만듭니다. 변수 이름은 마음대로 하셔도 됩니다. 저는 button으로 해 보겠습니다.

괄호 안에는 태그 이름을 넣습니다. div를 입력하시면 div 요소가 생성되고, 저처럼 a를 입력하시면 a 요소(하이퍼링크)가 생성됩니다.

 

button.textContent = "구글 웹 접속";

지금부터 제가 빨간색으로 쓰는 것은 전부 다 위에서 선언한 변수 이름으로 합니다.

큰따옴표 안에는 웹페이지에서 표시할 텍스트(본문)를 넣습니다.

 

button.className = "mybutton";

class 이름을 적습니다.

 

button.href = "https://www.google.com";

제가 a 요소를 만들었기에 가능한 부분입니다. 웹 주소를 입력합니다.

 

button.target="_blank";

역시 제가 a 요소를 만들었기에 가능한 부분입니다. 이것을 붙이면 하이퍼링크를 클릭했을 때 새탭으로 열리게 합니다.

 

이렇게 스크립트를 작성하면 결과적으로 아래와 같은 HTML을 작성한 것과 동일한 효과가 발생됩니다.(물론, 아직 변수 상태이기 때문에 화면에 출력되지는 않습니다.)

 

1
<a class="google" href="https://www.google.com" target="_blank">구글 웹 접속</a>
cs

 

이제 실제로 이것을 화면에 출력해 보겠습니다.

 

querySelector

화면에 출력하기 위해 querySelector를 출력하겠습니다. querySelector는 아래와 같이 사용합니다.

 

document.querySelector("tag또는ID또는class");

 

괄호 안에 CSS에서처럼

tag를 입력할 때는 그냥 입력하시면 되고(ex. document.querySelector("p"); ),

ID를 입력하실 때는 앞에 #을 붙이시고(ex. document.querySelector("#identification"); ),

class를 입력하실 때는 앞에 .을 붙이시면 됩니다(ex. document.querySelector(".classroom"); ).

 

실제 티스토리 공감 버튼도 그렇고, 제가 첨부해 드린 예제 파일도 그렇고 공감 버튼은 <div class="container_postbtn #post_button_group">와 </div> 사이에 들어 있습니다.(여기서 말하는 '실제 티스토리'는 2020년 12월 8일 기준으로 개발자 도구를 이용하여 확인했습니다.)

class 이름 사이에 공백이 들어 있는데 이는 container_postbtn라는 이름과 #post_button_group라는 이름을 둘 다 가진 것이라고 합니다.(사실 이 부분은 자세히 알아보지 못했습니다. 죄송합니다.)

저는 container_postbtn에 주목하겠습니다. 아래와 같이 소스코드를 작성하시면 됩니다.

 

document.querySelector(".container_postbtn").append(button);

 

이렇게 하면 자바스크립트로 작성한('코딩한'인가?) 내용이 웹페이지에서 출력됩니다.

 

방금 만든 하이퍼링크가 공감 버튼과 구독 버튼 사이에 쏙 들어갔습니다. 왜 그런 걸까요? (로딩 속도 차이인가?)

아! 그리고 아직 버튼 모양이 아니라서 실망하신 분들이 있을 수 있는데 그건 마지막으로 설명해 드릴 CSS를 사용하여 버튼 모양으로 만들면 됩니다.

 

버튼을 2개 이상 만들고 싶을 때

자신만의 버튼을 2개 이상 만드셔도 됩니다. 우선 소스코드를 보여드리겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var button = document.createElement("a");
button.textContent = "구글 웹 접속";
button.className = "mybutton";
button.href = "https://www.google.com";
button.target = "_blank";
 
var green = document.createElement("a");
green.textContent = "네이버 접속";
green.className = "mybutton";
green.href = "https://www.naver.com";
green.target = "_blank";
 
document.querySelector(".container_postbtn").append(button);
document.querySelector(".container_postbtn").append(green);
cs

 

변수를 각각 만드시고, document.querySelector도 각각 입력하시면 됩니다.(물론 변수 이름은 바꿔서.)

className은 굳이 다르게 하실 필요는 없습니다.

 

CSS

버튼에 스타일을 지정하기 위해서는 CSS가 필요합니다. 원래 티스토리 스킨 수정할 때 블로그관리→스킨 편집→HTML 편집 으로 들어가 보면 CSS를 편집할 수 있는 탭이 따로 있습니다. 스킨을 내려받아서 수정하시는 경우 또는 제가 첨부해 드린 예제 파일을 사용하시는 경우 style.css 파일이 있을 겁니다. 거기서 수정하시면 됩니다.

 

1
2
3
4
5
6
7
8
.container_postbtn .mybutton {
    float: left;
    padding: 0 9px;
    border-radius: 30px; 
    border: 1px solid #959595;
    border-color: rgba(185,185,185,0.5); 
}
 
cs

 

이 소스 코드를 CSS 파일 소스코드에서 어디에 작성하시든 상관은 없습니다.(맨 아래 작성하셔도 됩니다.) 이번에도 하나하나 알아보겠습니다.

 

.container_postbtn .mybutton

'container_postbtn'이라는 class 안에 있는 'mybutton'이라는 class에 적용한다는 뜻입니다.

 

중괄호 안에 있는 것은 티스토리 공감 버튼의 스타일을 그대로 가져온 것입니다.(개발자 도구에서 확인할 수 있습니다.) 이 중 몇 가지만 알아보자면

 

border-radius: 30px;

이건 버튼을 둥글게 만듭니다.

 

border-color: rgba(185,185,185,0.5);

이건 버튼 테두리 색상입니다.

 

완성

위 사진은 예제 파일을 이용하여 만들었을 때의 결과입니다.

혹시나 하는 마음으로 완성 파일도 첨부해 드리겠습니다.

 

완성 파일.zip
0.00MB

 

저의 글을 읽어 주셔서 감사합니다.

이렇게 티스토리 공감 버튼 뒤에 나만의 버튼 추가하기에 대해 알아보았습니다.

글에 오류가 있거나 질문이 있으시다면 댓글 달아주세요.

다음에 만나요!

 

댓글을 달아 주세요

728x90

안녕하십니까? 수성비입니다. 오랜만이네요! 오늘은 몇 주 전부터 예고한 티스토리에 네이버 이웃커넥트 설치하기입니다. 사실 중간고사 끝나자마자 올리려고 했는데 하필 그 때 포토업로더 오류가 일어났네요. 오늘은 괜찮습니다! 잘 되네요.^^

 

1. 일단 여러분의 네이버 누리사랑방으로 들어가 주세요.

*누리사랑방은 blog를 의미하는 우리말입니다.

2. 관리로 들어갑니다.

 

3. 이웃 그룹 관리로 들어갑니다.

그런데 1~3을 간단히 줄일 수 있다는 사실!

http://blog.naver.com 에서 이웃 관리 들어가시면 됩니다.^^(다만 적절한 사진을 찍지 못해서 사진을 찍어둔 방법으로 알려드렸습니다. 중요한 건 이웃 관리로 가야 한다는 것.)

 

4. 이웃커넥트 설치하기로 들어갑니다.


 

5. 다른 블로그로 퍼가기를 누릅니다.

6. 위젯 종류를 선택합니다.

7. 위젯을 사용할 블로그 주소(티스토리 주소)를 입력하고 대표블로그로 사용하는 것에 체크합니다.

*여기서 주소 뒤에 rss 붙여야 한다는 분들 계신데 제가 두 가지 다 해봤을 때 rss 있는것과 없는 것의 차이를 잘 모르겠네요.

8. 위젯 스타일부터 디자인까지 여러분 취향에 따라 설정합니다.

9. 퍼가기를 합니다.

 

10. 이 위젯코드는 복사해서 메모장에 붙여넣고 저장해 두시는 것이 좋습니다.

(잃어버리면 재발급 해야 함.)

 

11. 이제 여러분의 티스토리 관리자로 들어갑니다. 관리자가 개편된 관계로 사진이 약간 흐트러지는 점 양해 부탁드립니다.

12. (위 사진①)플러그인으로 들어갑니다.

13. (위 사진②)배너 출력을 활성화합니다.

 

14. (위 사진①)사이드바로 들어갑니다.

15. (위 사진②)HTML 배너출력을 추가합니다.

 

16. 위 사진에서 네모 표시한 줄 4개 단추를 드래그해서 위치를 조정합니다.

이 때 알툴바 등의 우클릭 제한 해제 기능을 해제하시기 바랍니다!

17. 편집을 누릅니다.

 

18. 이름을 입력합니다.(위 사진에서 파란색으로 지운 것은 사진과 제가 적용한 것이 불일치해서 여러분의 혼란을 줄이기 위한 것으로 이름은 여러분 마음대로 지으셔도 됩니다.)

19. HTML 소스를 입력합니다. 아까 복사한 이웃커넥트 위젯코드를 그대로 붙여넣으셔도 되고, 가운데 정렬하고 싶으시면

<center>

이웃커넥트 위젯코드

</center>

이렇게 넣어주시면 됩니다. 개인적으로 가운데 정렬이 예쁘다고 생각합니다.

 

20. 변경사항 저장합니다.

 

21. 이웃커넥트가 적용된 것을 보실 수 있습니다.

 

그런데 여기 문제가 있습니다! 인터넷에서 보면 다른 분들은 티스토리에서 쓴 글이 이웃새글에 뜨던데 저는 안 그러네요.. 엄마께 이웃 추가를 부탁드렸는데 제 글이 안 뜹니다. 그래도 네이버에서 티스토리로 연결되긴 하지만.. 업데이트순으로 이웃을 보다 보면 티스토리는 제일 아래로 내려가게 되서 말이죠... rss로 등록해도 마찬가지입니다. 해결 방법 아시는 분을 댓글 달아주세요..

티스토리 사용자끼리는 링크 기능을 사용하는 것이 좋을 것 같다는 생각이 듭니다.

(스킨에다가 링크 기능을 넣어야 겠네요...)

(정정합니다. 문제 없습니다.)

 

다음에 만나요!

 

댓글을 달아 주세요

728x90

안녕하십니까? 수성비입니다. 원래 오늘은 네이버 이웃 커넥트에 대한 글을 쓰려고 했는데 티스토리가 개편되어 그 글부터 쓰려고 합니다.

티스토리 관리자로 들어가면 위와 같이 뜹니다. 이건 넘겨 가면서 보시면 되니 제가 직접 확인한 것으로 설명해 드리겠습니다.

우선 관리자가 바뀌었습니다. 주소가 바뀌었는데

http://자신이설정한주소.tistory.com/manage 로 접속하셔야 합니다.(admin→manage)

아니면 그냥 마우스로 클릭해서 들어가셔도 되구요.

 

[누리사랑방에 메뉴를 추가/삭제하고 순서를 바꾸실 수 있습니다.]

저는 Flatinum 스킨을 수정해서 쓰고 있는데 메뉴를 지원하지 않네요. 메뉴 기능을 쓰려면 스킨 HTML에

[##_blog_menu_##]

위와 같은 치환자가 있어야 합니다. 개편 전에 Flatinum에 메뉴 치환자를 넣어 봤는데 흐트러지더라구요.

 

[계정 단위의 관리 기능이 명확하게 분리되었습니다.]

블로그관리는 계속 보고 있으니 계정 관리를 보여 드리겠습니다. 이전에는 로그인 기기 관리 같은 거 명확하지 않아서 불편했는데 이제 명확하게 분리되니 쓰기 편할 것 같습니다.

 

[활동 피드백을 한 알림창에서 확인할 수 있습니다.]

오른쪽 위 프로필사진을 누르면 알림창이 뜨는데 저는 아직 알림이 없네요..

티스토리에서 제공한 사진을 보여드리겠습니다. 티스토리 모바일 앱처럼 나오는 것이 보기 좋아 보이네요.(모바일 앱에서는 저게 편하거든요.^^)

 

[고정된 콘텐츠는 페이지 기능으로 만들 수 있습니다.]

일단 저는 당장 쓸 건 아니구요. 나중에 필요하면 그 때 쓰기로 하죠. Flatinum 스킨에 사진 기능도 안 쓰는데...

일단 그것보다 위 사진에서 파란색으로 표시한 콘텐츠 부분이 마음에 듭니다. 글 관리, 페이지 관리, 공지 관리, 서식 관리가 나뉘어 있어서 관리하기 편합니다.

 

[카테고리 관리]

우선 콘텐츠카테고리 관리로 들어갑니다.

카테고리 추가입니다. 큼직큼직 해서 좋네요.^^

카테고리 이름 입력하시면 됩니다.

③~④이게 정말 마음에 듭니다. 주제 선택을 여기서 바로 할 수 있어서 편합니다. 이전에는 주제 선택은 따로 해야 했어서 불편했는데 이렇게 한꺼번에 할 수 있어서 좋습니다.

확인하시면 카테고리 추가 완료!

티스토리 운영 오래 하신 분들은 아시겠죠? 필수적으로 해야 하는 저장입니다.


 

원래 각 카테고리 왼쪽의 줄 4개 부분을 드래그하면 카테고리가 옮겨져야 하는데 잘 안 되더라구요.. 카테고리를 다른 카테고리에 소속되게 하려면 품을(?) 카테고리에서 '추가'를 눌러 추가하셔야 합니다.(위 사진이 잘못되었네요.. 수정이 아니라 추가입니다.)

 

[꾸미기 설정]

이것저것 손볼 것이 많습니다. 특히 저는 기본 화면에서 표시할 글 개수, 댓글 보이게 하기 등을 설정했네요.^^

 

[이 밖에 변경/종료된 기능]

1. 인터넷 익스플로러(이하 'IE') 10 미만 브라우저 지원 종료→IE를 업데이트하거나 크롬, 파이어폭스, 오페라를 쓰라네요. 저는 지금 IE 11을 쓰고 있습니다. 방문자 여러분들은 엣지를 쓰셔도 됩니다.(그냥 Windows 10을 쓰는 게 편합니다.)

2. 키워드 표시 방법 변경: 이건 저도 잘 모르겠어요. 티스토리에서 알려드립니다.(http://notice.tistory.com/2399)를 참고해 주세요.

3. 카테고리 스타일 종료: 저는 이미 예쁜 스킨을 쓰고 있어서..ㅎㅎ 상관이 없네요.

4. 종료된 플러그인: 유입 경로, 방문자 통계, 검색어 통계, CCL 표시, 내 모바일 티스토리 QR 코드

대신 플러그인을 활성화하지 않아도 기본 표시되거나 설정 메뉴에서 쉽게 설정할 수 있도록 개선되었다고 하네요.

5. 티스토리 메일(@tistory.com) 기능 종료: 어차피 저는 안 쓰던 기능이라 상관이 없네요.

 

[앞으로 있을 변화에 대해서]

1. 플래시 제거: 이제 엣지로도 글을 쓸 수 있게 될까요? 현재 플래시 때문에 엣지를 못 쓰거든요.. 플래시가 제거되면 스마트폰으로도 PC처럼 글을 쓸 수 있게 될지도 모르죠.

2. 에디터 개편: 어떤 개편이든 상관 없는데 HTML 기능만은 유지해 주셨으면 합니다.

아! 하나 더. 사진 여러 개 올리면 중간 중간 줄바꿈(<br>) 넣어주셨으면 좋겠어요.

3. 앱 개편: 이거 진짜 필요합니다. 출시된 지 얼마나 됐는데 아직도 1.2.5라니... 플래시 제거와 함께 모바일 앱 기능이 늘어났으면 좋겠네요.

4. 티스토리 홈 개편: 지금도 예쁜데 더 좋아지시겠다면 말리지는 않죠. 다만 사용자들의 누리사랑방 스킨은 지금 그대로 두는 것이 좋을 것 같습니다. 그런 거 바뀌면 스킨 수정하느라 힘들거든요.

 

다음에 만나요!





 

댓글을 달아 주세요

728x90

안녕하십니까? 수성비입니다. 3주 이상 글을 못 올렸죠? 그동안 반응형 스킨 등 할 일이 많았습니다.. 그래도 저번주에 사이트맵을 만들어 놓으면서 사진들을 좀 찍어 놓았기 때문에 오늘 이렇게 글을 올리네요.

 

티스토리X네이버 프로젝트 첫번째! '사이트맵 만들어서 네이버 웹마스터 도구에 등록하기'입니다.

※티스토리 주소 입력하실 때 사진 보고 따라하시다가 실수로 수성비 전자방 주소를 입력하지 않도록 주의하세요!

 

1. http://www.check-domains.com/sitemap/ 로 접속합니다.

2. (위 사진 ①)Site URL(본인 티스토리 주소)을 입력합니다.

3. (위 사진 ②)Always로 선택합니다.

4. (위 사진 ③)Create Sitemap을 클릭합니다.

예를 들겠습니다. 여러분의 티스토리 주소가 http://고유필명.tistory.com/ 이라고 치면 http://고유필명.tistory.com/ 에 소속된 모든 페이지가 사이트맵에 기록(?)됩니다. 글, 태그, 카테고리 같은 것이 많을수록 오래 걸리겠죠?

5. 완성되면 XML sitemapDownload합니다.

(Broken Links는 필요 없는데 궁금하시면 내려받아 확인하시면 됩니다.)

 

6. 여러분의 티스토리 누리사랑방으로 들어가셔서 글쓰기로 들어갑니다.

7. (위 사진①~⑤)5번에서 내려받은 XML sitemap을 첨부합니다.

8. (위 사진에 미처 나타내지 못했지만 중요합니다.)비공개로 설정합니다.

9. (위 사진⑥)발행합니다.

10. 비공개로 발행한 글에 들어가서 첨부한 사이트맵 파일을 오른쪽 클릭하고 속성으로 들어갑니다.

 

11. 위 사진에서 파란색으로 표시한 부분의 주소(URL)가 필요합니다. 다른 사람들은 attachment 뒷부분만 복사하라고 설명하는데 저는 굳이 그런 설명이 없어도 여러분이 알아서 똑똑하게 해 나가실 거라 생각합니다.

 

Q. 비공개로 글을 작성하지 않고 그냥 스킨 파일 업로드로 하면 안 되나요?

A. 제가 해 봤는데 주소가 티스토리 주소로 시작하지 않습니다. 따라서 글을 작성해야 합니다. 공개로 하실 필요는 없고 비공개로 올리시면 됩니다.

12. 네이버 웹마스터 도구로 들어가셔서 사이트맵을 등록할 티스토리(사이트)를 들어갑니다.

13. 왼쪽 요청 메뉴에서 사이트맵 제출로 들어갑니다.

14. 빈칸에 사이트맵 주소를 채워 주시면 됩니다.

 

제가 복사하라고 한 주소는

http://고유필명.tistory.com/attachment/어쩌고저쩌고... 였을 겁니다.

그런데 http://고유필명.tistory.com/ 은 이미 쓰여져 있죠?

attachment/어쩌고저쩌고... 만 입력해 주시면 됩니다.

여러분은 똑똑하시니까 이런 건 알아서 하실 수 있죠?^^

 

15. 확인하시면 끝납니다.

 

인내심이 필요한 작업이었습니다. 하지만 일단 해 두시고 여러분의 티스토리를 가꿔 나가시는 게 좋겠죠?

 

다음에 만나요!





 

댓글을 달아 주세요