티스토리 포스트 내에서 스트립트를 사용할 경우 글쓰기 화면의 오른쪽 상단의 HTML박스를 체크한 후 <script></script> 태그 안에 스크립트를 적어주면 됩니다. 

다만, 스크립트 사용시 주의 할 점은 HTML 모드에서 스크립트를 작성한 후 HTML박스를 체크 해제하여 위지윅모드에서 글을 수정하면 안된다는 것입니다. 위지윅모드에서 글을 수정하게 되면 스크립트가 작동하지 않게 됩니다. 

따라서 위지윅모드에서 먼저 UI를 위한 html 태그들을 작성하고 그 후 가장 마지막에 스크립트를 작성한 후 포스트를 저장해야 합니다. (포스트를 작성하다가 맨 마지막에 스크립트 부분만 잘라내기 한 후 HTML 모드에서 맨 위에 붙여넣기 한 다음 바로 저장해 주는 식으로 하면 됩니다.
저작자 표시 비영리 변경 금지
신고
Posted by 플라스틱라디오
두가지 방법이 있는데 두 방법 모두 skin.html 을 수정해야 합니다.


1. <body> 태그onload="expandTree()"를 추가 합니다.
    <바디 onload="expandTree()"> 



2. [샵샵_category_샵샵] 치환자_list를 추가합니다.
    
        
        

카테고리

[샵샵_category_list_샵샵]



출처 : http://blutom.tistory.com/320
저작자 표시
신고
Posted by 플라스틱라디오

티스토리 기본 단축키  

티스토리에서는 편리하게 블로그의 메뉴로 이동할 수 있도록 단축키를 제공하고 있습니다. 티스토리의 기본 단축키는 다음과 같습니다.

A : 이전 페이지
S : 다음 페이지
J : 아래로 이동
K : 위로 이동 태터툴즈 단축키
Q : 관리자 모드
R : 리더
T : 리더 갱신
Z : 최근 엔트리
X : 최근 댓글
C : 최근 트랙백

 





티스토리 단축키 추가  

티스토리에서는 skin.html을 수정해 직접 단축키를 추가하는 것도 가능합니다. 글쓰기 단축키를 추가하는 경우 아래와 같은 코드를 skin.html의 <header>태그안에 넣어주면 됩니다. 
  
<script type="text/javascript"> 
	<!--
	var key = new Array();
	
	// 단축키 정의
	key['n'] = "/admin/entry/post";

	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>




출처 : 리치왕의 마리오네트 
저작자 표시
신고
Posted by 플라스틱라디오
TAG 단축키
티스토리의 사이드바에 아래와 같은 RSS 구독 버튼을 다는 방법입니다. 이 버튼들은 티스토리에서 기본적으로 지원해 주는 것으로 원래는 사이드바의 기본 RSS 구독 버튼을 클릭시 이동하는 페이지에 달려있는 것인데, 이 버튼을 이용해 RSS 구독을 하려면 먼저 기본 RSS 구독 버튼 클릭해서 페이지을 해야하는 단계를 거쳐야 하기 때문에 다소 불편함이 있습니다.




 
 
사이드바에 HTML 배너 출력 모듈 추가  

사이드바에 RSS 구독 버튼을 추가 하려면 먼저는 사이드바에서 HTML 모듈을 사용가능하도록 플러그인 설정을 해주어야 합니다. 

방법은 간단합니다. 일단 티스토리 관리자 페이지로 이동합니다. 그 다음 왼쪽의 메뉴들 중 '플러그인 설정' 메뉴로 들어가서 '관리 및 통계 - 배너 출력'을 체크해 줍니다. 그러면 사이드바에 HTML 배너 출력 모듈을 추가하는 것이 가능해 집니다. 





HTML 배너 출력 모듈에 RSS 버튼 설정  

이제 사이드바에 HTML 배너 출력 모듈을 추가한 후 원하는 위치로 이동 시킨 후에 편집 버튼을 눌러 RSS 구독 버튼을 추가하는 코드를 넣어줍니다. 각 RSS 구독 버튼에 대한 코드는 아래와 같습니다. 



다음 블로그
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href,'daumrssregister','width=540 , height=306, status=no, toolbar=no, menubar=no, location=no, resizable=yes');return false;" href="http://blog.daum.net/_blog/rss/ManagerChannelInsertForm.do?channelUrl=http://블로그주소.tistory.com/rss&amp;channelCheck=true&amp;event=t">
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=37 alt="Daum블로그로 구독" src="http://icon.daum-img.net/2008_guide/rss/rss_btn_blog.gif" width=112> </A>

한RSS
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href);return false;" href="http://www.hanrss.com/add_sub.qst?url=http://블로그주소.tistory.com/rss">
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=HanRSS src="http://icon.daum-img.net/2008_guide/rss/rss_btn01.gif" width=106> </A>

구글리더
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href);return false;" href="http://fusion.google.com/add?feedurl=http://블로그주소.tistory.com/rss">
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=Google src="http://icon.daum-img.net/2008_guide/rss/rss_btn03.gif" width=106> </A>

XML
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" href="http://jmail.tistory.com/rss/xml" target=_blank>
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=RSS src="http://icon.daum-img.net/2008_guide/rss/rss_btn04.gif" width=106> </A>

Bloglines
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href);return false;" href="http://www.bloglines.com/sub/http://블로그주소.tistory.com/rss">
<IMG style="CLEAR: none; BORDER-RIGHT: 0px; BORDER-TOP: 0px; FLOAT: none; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=Bloglines src="http://icon.daum-img.net/2008_guide/rss/rss_btn05.gif" width=106> </A>
 
이를 응용하면 다른 RSS 리더의 구독 버튼도 쉽게 추가할 수 있을 것 같습니다.


출처 : J편지 
저작자 표시
신고
Posted by 플라스틱라디오
아래와 같은 소제목 배경을 생성해 주는 html 코드입니다.


소제목 배경  


<table style="BORDER-COLLAPSE: collapse" cellSpacing=1 cellPadding=2 width="99%" bgColor=#ffffff>
  <tbody>
  <tr>
    <td style="BORDER-RIGHT: #1e78d2 1px solid; BORDER-TOP: #1e78d2 1px solid; BORDER-LEFT: #1e78d2 1px solid; BORDER-BOTTOM: #1e78d2 1px solid" width=273 bgColor=#1e78d2>
      <span style="FONT-SIZE: 10pt; COLOR: #ffffff; FONT-FAMILY: Gulim">
        <strong>제목을 입력하는 곳</strong>
      </span>
    </td>
    <td style="BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #1e78d2 1px solid">
      &nbsp;
    </td>
  </tr>
  </tbody>
</table>
저작자 표시
신고
Posted by 플라스틱라디오
SyntaxHighlighter  

SyntaxHighlighter는 티스토리에서 프로그래밍 코드를 사용할 경우 보기 좋기 변환해 주는 플러그인 입니다. 현재(2011/12/12일 기준) 3.0.83 버전까지 릴리즈 되어있으면 다운로드는 아래의 링크에서 받으실 수 있습니다.

SyntaxHighlighter 다운로드 페이지 가기

 



SyntaxHighligter 티스토리에 설치  
 
다운 받은 SyntaxHighliter를 티스토리에 적용시키는 것은 간단합니다. 먼저 다운받은 압축 파일을 해제 한 후 script, style 폴더에 있는 파일들만 티스토어의 HTML/CSS 편집의 파일업로드 메뉴에서 업로드 시킵니다. 그 다음 skin.html의 head 태그 안에 아래의 코드를 추가 합니다.
<!-- SyntaxHighlighter Start -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script> 
<link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/> 
<script type="text/javascript">
//<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
//]]>
</script>
<!-- SyntaxHighlighter End -->


그리고 크롬 브라우저 사용자를 위해 css 편집창에 아래의 코드를 추가 합니다.
div .syntaxhighlighter { 
	overflow-y: hidden!important; overflow-x: auto!important; 
}





티스토리에서 SyntaxHighlighter 사용  

글 작성시 코드 하이라이트를 적용하려면 글쓰기시 창의 상단 우측에 있는 html에 체크를 한 후 아래와 같이 pre 태그를 사용하여 코드 하이라이트 적용시킬 부분을 설정합니다.

<pre class="brush:코드이름">여기에 코드 작성</pre>


코드 이름에 코드 하이라이트를 적용하기 원하는 코드의 종류를 써 주면 됩니다. brush에 사용가능한 코드이름은 아래와 표와 같습니다. (brush 명을 사용하려면 필요 js 파일이 반드시 설치되어 있어야 합니다.)

분류사용가능 brush명 
필요 파일
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js
테이블 출처 : 이런저런이야기


그 다음 html의 체크를 다시 해제한 후 위지웍 글쓰기 창에서 원하는 코드를 넣어주면 됩니다.



추가적으로 특정 줄에 하이라이트를 주고 싶다면 아래와 같이 pre 태그의 class 속성에 highlight 항목을 설정해 주면 됩니다.

    
   
       코드 들어가는 부분
    
<div class="title">
    <div class="wrapper">
        <h1>
            <a href="[##_blog_link_##]" title="[##_title_##]">[##_title_##]</a>
            <span class="blogCover">[##_desc_##]</span>
        </h1>
    </div>
</div>


또한 SyntaxHighlighter의 스타일을 변경하는 경우에는 skin.html에서 css를 바꿔주면 됩니다. SyntaxHighlighter의 스타일에는 shCore.css, shCoreFadeToGrey.css, shCoreEclipse.css, shCoreEmacs.css 등이 있습니다.


참고 : TistorySkin






SyntaxHighlighter Code Converter  

티스토리에 SyntaxHighlighter를 이용해 코드를 올릴 시 원하는 대로 표시가 되지 않는 경우가 많은데 이러한 문제를 해결해주는 프로그램 입니다. 견족자K 님 께서 만드신 프리웨어로 코드 수정하지만 않는다면 자유롭게로 사용이 가능하다네요.




사용법은 아래의 출처의 링크를 참고하시면 됩니다.


출처 : '자유로운 그날을 위해' 블로그


신고
Posted by 플라스틱라디오


맨 위로

티스토리 툴바