티스토리 공감 버튼에 문구 추가 Tistory empathy button

웹 개발/티스토리 2017. 9. 7. 23:26

티스토리 공감 버튼에 문구 추가 Tistory empathy button

티스토리를 운영하다보면 가끔 사람들이 보고가는지 아니면 글의 내용이 부족해서 관심이 없는것인지 알고 싶은 경우가 있습니다. 이런 경우 티스토리에서는 "공감"이라는 버튼을 추가해놓아서 방문자들이 해당글이 좋은지 표현하고 갈 수 있게되어있습니다. 단순히 공감버튼만으로 만족이 안되는경우, 추가 문구를 넣어서 방문자들에게 공감버튼을 잘 보이게끔 할 수 있습니다.

공감 버튼이 추가된 글의 구조 파악

공감 버튼이 생성된 글의 소스코드를 보면 아래와 같은 구문이 추가되어있습니다.
각각 Class와 ID가 주어져있는것을 볼 수 있습니다.

<div class="daum_like_wrapper"><iframe class="daum_like_button" id="daum_like_button_659" frameborder="0" scrolling="no" allowTransparency="true" </iframe></div>

공감문구를 삽입하기 위한 제이쿼리 스크립트 추가

공감버튼 부분에 문구를 추가하기 위해선 JQuery(제이쿼리)를 사용해야합니다.
관리자 메뉴에서 꾸미기 - HTML/CSS 메뉴를 클릭해서 HTML 편집기로 갑니다.
<head> 와 </head> 사이에 아래 스크립트를 삽입합니다.

<script src="http://code.jquery.com/jquery-git.js"></script>

문구를 삽입하기 위한 위치 지정 및 문구 삽입

</body> 바로 윗부분에 아래 스크립트를 삽입합니다.
여기서 ".insertAfter"는 공감버튼 바로 아랫부분에 문구가 추가되며, ".insertBefore"로 변경하면 공감버튼 바로 윗부분에 문구가 추가됩니다.

<script type='text/javascript'>
$('<p><center><font color="#b30000"><strong>"공감"</font>은 로그인 없이 클릭만으로 큰 힘이 됩니다.</strong></center></p>').insertAfter($('.daum_like_button'));
</script>

이 스크립트는 모바일 버전에서는 적용되지 않습니다. (데스크탑 버전에서만 적용됩니다.)

업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

저작자표시 비영리 변경금지

'웹 개발 > 티스토리' 카테고리의 다른 글

티스토리 광고 설치 Tistory adsense (0)	2017.07.04
티스토리 드래그 우클릭 방지 Disable Drag Right Click (0)	2017.06.02
티스토리 다음 애드핏 광고 넣기 (Tistory daum Adfit) (0)	2017.02.02
티스토리 배경화면 변경 방법 (Tistory blog background) (0)	2016.12.29

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,

티스토리 광고 설치 Tistory adsense

웹 개발/티스토리 2017. 7. 4. 12:34

다음에서 제공하는 블로그 플랫폼인 티스토리의 경우 다음 애드핏이라는 모바일 전용 광고를 설치할 수도 있지만, 외부 광고도 부착할 수 있게 허용되어 있습니다. 블로그의 수익성을 확보하기 위해서는 다음에서 제공하는 애드핏으로는 수익이 많지 않으므로, 구글에서 제공하는 애드센스가 필수적입니다.

대표적인 광고로 구글의 애드센스를 설치하는 방법입니다.

먼저, 본인의 구글 애드센스 사이트에 접속합니다. (https://www.google.com/adsense)
왼쪽 메뉴에서 "내 광고 - 광고 단위"를 클릭합니다.
티스토리에 설치할 "새 광고 단위"를 만듭니다. (일반적으로 반응형으로 만듭니다.)

새로운 광고가 만들어졌으면, 해당 광고의 소스코드를 복사하여 메모장에 붙여놓습니다.

티스토리 관리 - 플러그인 - 플러그인 설정 - 수익 (오른편 화면 중간 윗부분) 을 차례대로 클릭합니다.

구글 애드센스 항목의 오른편 톱니바퀴 모양을 클릭합니다.

각각의 광고 배치에 따라서 아까 메모장에 복사해놓은 광고 소스코드를 붙여넣기하고 밑의 저장 버튼을 클릭합니다.

완성 후 약 30~ 1시간안에 광고가 나타나기 시작합니다.

여기서부터는 티스토리 중간 광고 삽입 방법입니다.

티스토리에서는 자동으로 중간광고 삽입해주는 기능이 없으므로, 새로운 글을 포스팅할때마다 일일이 광고를 넣어줘야하는 번거로움이 있습니다.
새 글을 완성하기전, 오른편 상단의 "HTML" 부분의 체크표시를 합니다.

그러면, 새로운 글의 소스코드가 보이는데, 광고를 보이게하고 싶은 위치를 정해서 앞에서 복사해두었던 구글 애드센스의 새 광고 소스코드를 붙여넣습니다.

업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

저작자표시 비영리 변경금지

'웹 개발 > 티스토리' 카테고리의 다른 글

티스토리 공감 버튼에 문구 추가 Tistory empathy button (0)	2017.09.07
티스토리 드래그 우클릭 방지 Disable Drag Right Click (0)	2017.06.02
티스토리 다음 애드핏 광고 넣기 (Tistory daum Adfit) (0)	2017.02.02
티스토리 배경화면 변경 방법 (Tistory blog background) (0)	2016.12.29

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,

티스토리 드래그 우클릭 방지 Disable Drag Right Click

웹 개발/티스토리 2017. 6. 2. 10:12

다음 티스토리를 운영하면서 마우스 우클릭 또는 드래그를 방지하는 기능이 필요한 경우가 생깁니다. 이 경우 코드를 삽입하여 두 기능을 활성화 시킬 수 있습니다.
먼저 "티스토리 관리 - 꾸미기 - HTML/CSS 편집"을 차례대로 클릭합니다.

오른편 소스코드에서 <Body>를 찾기로 검색합니다. (CTRL + F 키를 눌러서 검색)

해당 코드를 아래와 같이 변경합니다.

<body id="" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

저작자표시 비영리 변경금지

'웹 개발 > 티스토리' 카테고리의 다른 글

티스토리 공감 버튼에 문구 추가 Tistory empathy button (0)	2017.09.07
티스토리 광고 설치 Tistory adsense (0)	2017.07.04
티스토리 다음 애드핏 광고 넣기 (Tistory daum Adfit) (0)	2017.02.02
티스토리 배경화면 변경 방법 (Tistory blog background) (0)	2016.12.29

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,

티스토리 다음 애드핏 광고 넣기 (Tistory daum Adfit)

웹 개발/티스토리 2017. 2. 2. 12:40

티스토리를 운영하면서 광고를 넣을 경우, 구글의 애드센스 광고를 삽입하거나 또는 다음에서 운영하는 다음 애드핏 광고를 삽입할 수 있습니다. 이번글은 다음에서 운영하는 다음 애드핏 광고를 신청하는 방법에 대해 알려드리겠습니다.
애드핏 광고는 모바일에서만 작동합니다. 일반 데스크탑에서는 보이지 않습니다.

먼저 다음 애드핏 사이트에 접속합니다. (https://adfit.biz.daum.net/)

위쪽 탭중에 광고관리탭에서 "새 매체" 버튼을 클릭합니다.

매체명을 입력하고 매체유형은 "Web" 을 선택합니다. 매체 고유값은 원하는 이름으로 입력 후 파랑색 등록하기 버튼을 클릭합니다.

광고 단위 이름을 입력하고 모바일에서 광고가 보일 위치를 선택한 후 밑의 파랑색 버튼을 클릭합니다.

광고의 스크립트가 발행되면 복사를 해놓습니다.

티스토리의 관리메뉴에서 플러그인 메뉴로 들어가면 수익분야에서 다음 애드핏을 선택한 후, 복사해놓았던 스크립트를 붙여넣기하면 완성됩니다.
위와 같이 완료 후, 모바일로 들어가면 광고가 보이는데 실제 승인된것이 아니기때문에, 다음에서 심사 후 승인될때까지 기다려야 합니다. (보통 2~3일 정도 걸립니다.)

업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

저작자표시 비영리 변경금지

'웹 개발 > 티스토리' 카테고리의 다른 글

티스토리 공감 버튼에 문구 추가 Tistory empathy button (0)	2017.09.07
티스토리 광고 설치 Tistory adsense (0)	2017.07.04
티스토리 드래그 우클릭 방지 Disable Drag Right Click (0)	2017.06.02
티스토리 배경화면 변경 방법 (Tistory blog background) (0)	2016.12.29

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,

티스토리 배경화면 변경 방법 (Tistory blog background)

웹 개발/티스토리 2016. 12. 29. 15:40

티스토리 블로그를 운영하면서 공개되어 있는 스킨을 적용시 배경화면을 변경하는 방법입니다.
티스토리 관리 - HTML/CSS 편집 메뉴로 들어가면 아래와 같이 Body 구분으로 시작하는곳이 있거나 아니면 없으면 추가합니다.

body {

background-color: #fff;

background-image: url('./배경화면파일명.jpg');

background-attachment: fixed;

background-repeat: no-repeat;

background-position: center center;

background-size: cover;

}

위와 같이 변경하시면 됩니다.

CSS 배경관련 명령어
1. background-image: url(이미지주소);
2. background-size:
  1. auto; 원본 크기
  2. 100px; 픽셀크기 지정
  3. 50%; 비율 지정
  4. contain; 가로 세로 비율 유지, 이미지 중심으로 늘려준다 (화면 크기에 따라서 배경화면이 잘리거나 빈 공간이 생길 수 있습니다.)
  5. cover; 가로 세로 비율 유지, 요소 중심으로 커진다
3. background-repeat:
  1. repeat; 반복 채움
  2. no-repeat; 반복 없이 하나만
  3. repeat-x; 가로만 반복
  4. repeat-y; 세로만 반복
4. background-attachment:
  1. scroll; 스크롤을 움직임에 맞춰서 배경이 위로올라가거나 아래로 내려간다
  2. fixed; 배경이 고정됨 (스크롤을 움직여도 배경만 그대로)
5. background-position : center / left / right / top / bottom; 기준위치
  1. 0% 0%; 좌측상단
  2. 100% 100%; 우측하단

업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

저작자표시 비영리 변경금지

'웹 개발 > 티스토리' 카테고리의 다른 글

티스토리 공감 버튼에 문구 추가 Tistory empathy button (0)	2017.09.07
티스토리 광고 설치 Tistory adsense (0)	2017.07.04
티스토리 드래그 우클릭 방지 Disable Drag Right Click (0)	2017.06.02
티스토리 다음 애드핏 광고 넣기 (Tistory daum Adfit) (0)	2017.02.02

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,

'웹 개발/티스토리'에 해당되는 글 5건