티스토리 팁 (8)
  1. 2012.05.08[JavaScript] 웹 브라우저의 즐겨찾기 추가 스크립트(1)
  2. 2012.03.05[JavaScript] 클릭 한번으로 고유주소(URL) 복사되게 하는 방법
  3. 2012.03.05[CSS] 구글 애드센스 광고를 특정페이지에 노출되지 않게 하는 방법
  4. 2012.03.04티스토리 검색 결과, 카테고리 글, 태그 리스트에 애드센스 삽입하는 방법
  5. 2012.03.03티스토리에 구글 애드센스 (AdSense) 섹션 타겟팅 적용하는 방법
  6. 2011.09.17[JavaScript] 티스토리 접속자를 2차 도메인으로 연결해주는 방법
  7. 2011.08.04티스토리에 구글 번역기(Google Translate Web Element) 설치 방법
  8. 2010.11.21[JavaScript] 티스토리 기본 단축키 및 사용자 단축키 지정
[JavaScript] 웹 브라우저의 즐겨찾기 추가 스크립트

현재 페이지 즐겨찾기 추가 기능

즐겨찾기 추가 기능은 JavaScript로 구현하여 웹 브라우저의 즐겨찾기 추가 기능을 활용합니다.

Internet Explorer, Firefox, Opera에서만 지원하며, 그 외의 웹 브라우저는 알림메시지를 보여줍니다.

현재 페이지 즐겨찾기 추가 구현 JavaScript

JavaScript 코드 안내
  • • 아래의 링크를 클릭하면 기능을 시험해보실 수 있습니다.

JavaScript 코드 적용 방법 및 다운로드

JavaScript 코드 삽입 화면
  • 스킨 페이지(Skin.html)의 <head> 와 </head> 사이에 아래의 코드가 적용되어야 합니다.

<head>
<script>
function addBookmark(){
//var title = "[Viewit] 통신, IT, 모바일, 스마트폰 앱스 블로그";
//var url = "http://viewit.kr";
var title = document.title; //현재 보고 있는 페이지의 Title
var url = location.href; //현재 보고 있는 페이지의 Url
if(window.sidebar && window.sidebar.addPanel){ // Firefox
window.sidebar.addPanel(title, url,"");
}
else if(window.opera && window.print){ // Opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all){ // Internet Explorer
window.external.AddFavorite( url, title);
}
else{
alert("이용하시는 웹 브라우저는 기능이 지원되지 않습니다.\n\nCtrl+D 키를 누르시면 즐겨찾기에 추가하실 수 있습니다.");
return true;
}
}
</script>
</head>

JavaScript 코드 사용 방법
  • 활용할 때에 사용해야 할 코드입니다.

<a href="javascript:addBookmark();">이 페이지를 즐겨찾기에 추가하기</a>

JavaScript 코드 문서 다운로드

내용 출처/참고 자료 Lael's World (http://lael.be/469)
1 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[JavaScript] 클릭 한번으로 고유주소(URL) 복사되게 하는 방법

클릭시 고유주소(URL)를 복사하는 기능

자동 복사 기능은 JavaScript를 활용하여 구현해볼 수 있습니다.

(아래와 같이 복사 버튼을 클릭했을 때 클립보드에 클립보드에 복사할 수 있게 하는 기능입니다.)

Google 크롬에서는 작동되지 않습니다.

클릭시 자동 복사 구현 JavaScript

JavaScript 코드 안내
  • • 아래의 링크를 클릭하면 기능을 시험해보실 수 있습니다.

고유주소(URL) 복사 기능 적용 화면
  • • 스킨 페이지(Skin.html)내의 <header> 와 <header> 사이에 아래의 코드를 삽입하시기 바랍니다.

<header>
<script language="JavaScript">
// http://viewit.kr
function copyUrl(){
if(window.clipboardData.setData('Text', location.href)){
alert('선택하신 게시물의 고유주소(URL)가 클립보드에 복사되었습니다.\n\Ctrl + V 또는 붙여 넣기를 선택하여 이용하시기 바랍니다.');
}
}
//-->
</script>
</header>

JavaScript 코드 문서 다운로드

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[CSS] 구글 애드센스 광고를 특정페이지에 노출되지 않게 하는 방법

구글 애드센스 광고를 특정페이지에 노출되지 않게 하는 방법

부득이하게 특별한 상황으로 인해 특정 페이지에 광고를 노출되지 않게 해야 할 경우에 이용하실 수 있습니다.

구글 애드센스 광고 노출 막기

일반적으로 애드센스 광고틀을 만들 때 <div class="이름">애드센스 코드</div>와 같은 방식으로 하는 게 일반적입니다.

이러한 경우, div 속성 중 display:none 값을 이용하여 간단하게 애드센스 광고 노출을 막을 수 있습니다.

애드센스 광고 노출 막기 이용안내
  • • 아래는 div 광고틀의 값이 GoogleAdSense로 되어 있을때의 코드입니다. (예: <div class="GoogleAdSense">애드센스 코드</div>)

<style type="text/css">
.GoogleAdSense { width:0px;height:0px;display:none !imporant; }
</style>

CSS 코드 문서 다운로드

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

티스토리 검색 결과, 카테고리 글, 태그 리스트에 애드센스 삽입하는 방법

검색 결과, 카테고리 글 전체보기, 태그 리스트 페이지에 애드센스 삽입

간단한 코드 삽입만으로 자신이 운영하는 티스토리 블로그 페이지 전체에 광고를 삽입할 수 있습니다. (아래 이미지 참조)

애드센스 광고 삽입하기 [검색 결과 및 카테고리 글 전체 보기] 페이지

섹션 타겟팅 적용 HTML 태그
  • • 티스토리 스킨(skin.html ) 페이지 내에서  를 찾아서 아래와 같은 내용이 있는지 확인합니다.

(아래의 내용을 클릭하면 코드가 복사됩니다.)


[검색 결과 및 카테고리 글 전체 보기] 페이지 광고 적용 화면
  • • 스킨(skin.html) 페이지에 다음과 화면과 같이 코드가 삽입되어있어야 합니다.

<s_list>
<h2>
'[ ##_list_conform_## ]'에 해당하는 글 [ ##_list_count_## ]개</h2>
<-- 검색 결과 광고 -->
광고 코드 삽입란 (728x90 광고 사이즈 추천)
<-- 검색 결과 광고 -->

애드센스 광고 삽입하기 [태그 리스트] 페이지

섹션 타겟팅 적용 HTML 태그
  • • 티스토리 스킨(skin.html ) 페이지 내에서  를 찾아서 아래와 같은 내용이 있는지 확인합니다.

(아래의 내용을 클릭하면 코드가 복사됩니다.)


[태그 리스트] 페이지 광고 적용 화면
  • • 스킨(skin.html) 페이지에 다음과 화면과 같이 코드가 삽입되어있어야 합니다.

<s_tag>
<h2>태그 (Tag)</h2>
<-- 태그 리스트 광고 -->
광고 코드 삽입란 (728x90 광고 사이즈 추천)
<-- 태그 리스트 광고 -->

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

티스토리에 구글 애드센스 (AdSense) 섹션 타겟팅 적용하는 방법

애드센스 섹션 타겟팅(AdSense Section Targeting)

섹션 타겟팅을 이용하면 사이트 콘텐츠에 맞는 광고를 찾을 때 더 큰 비중을 두거나 무시하길 원하는 섹션을 지정할 수 있는데, 이러한 설정을 통해 웹사이트에서 게재되는 광고의 타겟팅 정확도를 높일 수 있습니다.

섹션 타겟팅을 이용하려면 애드센스 코드에 특수 HTML 코멘트 태그를 추가해야 합니다. 이 태그는 광고 타겟팅에서 더 중요하거나 덜 중요한 것으로 지정하려는 섹션의 시작과 끝을 표시하게 됩니다.

애드센스 섹션 타겟팅 적용하는 방법

섹션 타겟팅 적용 HTML 태그
  • • 티스토리 스킨(skin.html ) 페이지 내에서  를 찾아서 아래와 같이 시작과 끝 코드를 삽입합니다.

(아래의 내용을 클릭하면 코드가 복사됩니다.)


섹션 타겟팅 적용 HTML 태그 적용 화면
  • • 스킨(skin.html) 페이지에 다음과 화면과 같이 코드가 삽입되어있어야 합니다.

<!-- google_ad_section_start -->
##_article_rep_desc_##
<!-- google_ad_section_end -->

섹션 타겟팅 제외 적용 HTML 태그


섹션 타겟팅 제외 적용 HTML 태그 적용 화면
  • • 스킨(skin.html) 페이지에 다음과 화면과 같이 코드가 삽입되어있어야 합니다.

<!-- google_ad_section_start(weight=ignore) -->
##_article_rep_desc_##
<!-- google_ad_section_end -->

애드센스 섹션 타겟팅에 관한 설명

자신이 원하는 개수만큼의 섹션에 대해 섹션 타겟팅을 지정할 수 있습니다. 하지만, Google은 결과를 보증하지 않으며 Google 크롤러가 사이트 변경사항을 인식하기까지 최대 2주가 소요될 수 있습니다.

이 기능이 제대로 작동하려면 섹션 타겟팅 태그 안에 상당량의 콘텐츠가 있어야 합니다. 콘텐츠가 충분하지 않으면 관련성이 낮은 광고가 게재되거나 광고가 전혀 게재되지 않을 수 있습니다. 또한, 이 기능은 사이트의 관련 콘텐츠에서 중요 섹션을 지정하는 데만 사용해야 합니다. 광고 타겟팅을 조작하여 페이지 콘텐츠와 관련없는 광고가 게재되게 하는 것은 애드센스 프로그램 정책에 위배됩니다.

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[JavaScript] 티스토리 접속자를 2차 도메인으로 연결해주는 방법

티스토리 접속자를 2차 도메인으로 자동으로 페이지를 전환하는 방법

JavaScript를 이용하여 ID.Tistory.com 접속자를 2차 도메인 페이지로 접속하게 하는방법입니다.

아래 주황색의 글씨에 보이는 항목을 수정하여 사용 가능하며, <head> 와 </head> 사이에 코드를 삽입해야 합니다.

<script type="text/javascript">
<!--
//자신의 티스토리 주소 입력
var url1 = 'viewit.tistory.com';

//자신의 독립 도메인 입력
var url2 = 'viewit.kr';
var online = document.URL;

if(online.match(url1)) document.location.href = online.replace(url1,url2);

//-->
</script>

JavaScript 코드 문서 다운로드

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

티스토리에 구글 번역기(Google Translate Web Element) 설치 방법

티스토리에 Google에서 제공하는 언어 번역기를 설치할 수 있습니다.

국내 거주 외국인 또는 외국에서 방문하는 방문객을 위한 언어 번역기를 설치해보세요.

구글 번역기(Google Translate Web Element) 설치 방법

다음의 설명을 확인하시기 바랍니다.
  • • 다음의 구글 번역기 사이트로 방문합니다. Google Translate Web Element
  • • 스텝 1: 번역 요소의 유형 - (a) 전체 웹페이지를 번역 추가 (b) 웹 페이지의 섹션으로 번역 추가
  • • 스텝 2: 언어 선택 - 웹페이지의 언어 선택. (※ 한국어로 운영중이니 'Korean'을 선택하시면 됩니다.)
  • • 스텝 3: 번역 언어와 번역 도구 모양 등을 지정하여 설정할 수 있습니다.
  • - 번역 언어(Translation languages): 모든 언어(All languages) 선택
  • - 표시 방법(Display mode): 인라인(Inline) 선택 (※ 티스토리의 사이드바에 설치하기 위함입니다.)
  • - 고급(Advanced): 'Automatically display the translation banner for the users speaking other languages than your page language (자동 페이지 언어 이외의 언어를 사용하는 사용자를위한 번역 배너를 표시)' 항목에 체크합니다. (※ 그외 항목은 선택하지 않아도 됩니다.)
  • • 스텝 4: 번역기 코드 복사와 티스토리의 스킨에 적용하여야 합니다.
  • - 티스토리의 관리자 페이지 > 스킨 > 'HTML/CSS 편집' 페이지로 이동합니다.
  • 번역기 도구를 설치할 적당한 위치를 지정하여 코드를 삽입합니다.

<s_sidebar_element>
<!-- Google 번역기 -->
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'ko'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</s_sidebar_element>

※ 스킨(skin.html)의 사이드바 위치:
<s_sidebar_element>
블로그 이미지, 카테고리 등의 각종 사이드바 모듈
</s_sidebar_element>

HTML 코드 문서 다운로드

구글 번역기를 사이드바에 설치 방법
  • • 스킨(skin.html)에 코드를 적용하고 다시 스킨 > 사이드바 설정으로 이동합니다.
  • • 사이드바의 기본 모듈에서 Google 번역기를 선택하고 '사이드바 꾸미기'로 추가하고 적용하면 됩니다.
  • • Viewit 블로그에 현재 적용된 화면입니다.

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)

[JavaScript] 티스토리 기본 단축키 및 사용자 단축키 지정

티스토리의 기본 단축키 설명

티스토리 기본 단축키 (본문 화면)

  • Q - 관리자 페이지
  • A - 이전글 보기 / S - 다음글 보기
  • Z - 사이드바 최신 글로 이동
  • X - 사이드바 최신 댓글로 이동
  • C - 사이드바 최신 트랙백으로 이동

티스토리 기본 단축키 (글쓰기 화면)

  • 굵게: Ctrl+B | 밑줄: Ctrl+U | 기울임 Ctrl+i | 취소선: Ctrl+D
  • 좌측 정렬: Ctrl+, | 중앙 정렬: Ctrl+. | 우측 정렬: Ctrl+/
  • 번호매기기: Ctrl+Alt+O | 글머리기호: Ctrl+Alt+U | 들여쓰기 : Tab | 내여쓰기: Shift+Tab
  • 실행취소: Ctrl+Z | 다시실행: Ctrl+Y | 링크: Ctrl+K | 인용 Ctrl+Q
  • 효과 제거: Ctrl+Alt+X - 넓게쓰기: Ctrl+M - 임시저장: Ctrl+S - 하단탭 이동: Ctrl+~

사용자 임의의 단축키 사용 방법

JavaScript를 이용하여 사용자 임의 지정 가능한 단축키를 지정할 수 있습니다.

아래 주황색의 글씨에 보이는 항목을 수정하여 사용 가능하며, <head> 와 </head> 사이에 코드를 삽입해야 합니다.

<script type="text/javascript">
<!--

var key = new Array();

/** 단축키 정의 - http://viewit.kr **/
key['n'] = "/admin/entry/post";
key['h'] = "/";
key['l'] = "/location";
key['t'] = "/tag";
key['m'] = "/media";
key['g'] = "/guestbook";

function getKey(keyStroke) {
 if ((event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA')){
  isNetscape=(document.layers);
  eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
  which = String.fromCharCode(eventChooser).toLowerCase();
  for (var i in key)
   if (which == i) window.location = key[i];
 }
}
document.onkeypress = getKey;
//-->
</script>

JavaScript 코드 문서 다운로드

0 Comment,  0  Trackback

본 게시물에 대한 질문은 댓글을 통하여 받습니다. 바른말, 고운 말을 사용하여 남겨주세요. :)