기본적인 티스토리 블로그에는 사이드바 모듈이 몇 개 없다.

따라서 애드센스 광고나, 즐겨찾기 추가, 등등을 넣고 싶으면 사이드바 모듈에 추가를 해 줘야 한다.











요게 일반적인 기본 티스토리의 모듈이다. 그런데 네이버 블로그와 달리 티스토리에는 사이드바 상에서 모듈을 추가할 수가 없다. 따라서 왼쪽에 보이는 HTML/CSS 편집 상에서 모듈을 추가해 주어야 한다.


굉장히 쉬우니까 아래 방법 대로만 따라해 보면 금방 할수 있을 것이다.





스킨의 기준은 티스토리 스킨에서 3번째 줄에 있는 magazine을 기준으로 하였다. 그러나 대부분의 블로그에서 비슷할 것이라 생각된다.



먼저, HTML/CSS 편집에 들어가자.




여기서 ctrl + f를 눌러서 


div id="sidebar"


요녀석을 검색해 보자. 아마 하나가 검색될 것이다.












얘가 사이드바 모듈을 시작하는 애다. 얘를 찾았으면 반은 성공!!






이제 여기부터 쭉 살펴보자.




눈치가 빠른 사람이라면 알겠지만, 








요기 파란색으로 칠한 부분이 하나의 모듈을 만드는 단위가 된다.


즉 



<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>



이렇게 나열되어 있는 구조다.




따라서 



<s_sidebar_element>

★★★★★★★

</s_sidebar_element>




표쳐진 부위에 원하는 태그를 아무거나 입력해서 아까  


div id="sidebar"



얘를 찾아서 


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>




이 모듈들 사이에 끼워넣기만 해 주면 성공이다.




<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

원하는 모듈 추가

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>





예를 들어, 구글 애드센스 광고를 넣고 싶다면, 애드센스 코드를 그 사이에 붙여넣기해서 넣어 주면 된다.


애드센스 광고 말고도, 여러 다양한 태그를 넣으면 거의 다 되는 듯 싶다. 


본인의 블로그에는 즐겨찾기 추가도 링크해서 넣어 봤는데 잘 작동한다. 


아마 태그로 된 것들 대부분 가능한듯 하다.





추가적으로 모듈 이름을 넣으려면,  부분에 이름을 넣어서 입력하면 된다.



<s_sidebar_element>

<!--  -->

하나의 모듈

</s_sidebar_element>






구글 애드센스로 예를 들어 보자.




이렇게, 다른 사이드바 모듈(파란색) 사이에, 


새로운 모듈 칸을 넣고(붉은색),


이름 넣어 주고(노란색)


구글 애드센스에서 가져온 코드(진한회색)


넣어 주면, 





이렇게 새로운 모듈이 탄생하였다!




출처: http://afib.tistory.com/110

Posted by 90002

http://alexgorbatchev.com/SyntaxHighlighter/download/ 
위 site에 접속해서 최신 버전을 다운 받는다. (여기서는 5.0을 다운 받았다.)

zip파일이 다운로드 되며 압축파일을 풀어보면 compass, scripts, src, styles, tests 등 폴더들이 보일 것이다.
여기서 scripts 폴더에 들어가면 js파일들이 많이 보이는데 아래 그림과 같이 티스토리에 업로드를 해 준다.


동일한 방법으로 css 폴더 안에 있는 css파일들도 모두 다 업로드 해준다.

그 후에 아래와 같이 HTML/CSS편집 탭을 클릭한다.


소스 코드를 수정할 수 있는 공간이 상하로 2군데 보일 것이다. 우리가 수정할 곳은 위에 skin.html 파일이다.

아래 코드를 소스코드의 맨 아랫쪽에 있는 </body> 바로 위에 복사해서 넣어주자.

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shBrushJava.js"></script>

<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />

<script type="text/javascript">

     SyntaxHighlighter.all();

</script>

</body>



아래는 소스 복사 후 모습이다.

 

이제 저장한다. 
(붉은 색으로 표시된 곳을 보면 shBrushJava.js 가 보일 것이다. 만약 Java가 아닌 php나 js, html 같은 다른 소스를 작성하고 싶다면  http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html 를 참고해서 autoloader라는 메소드를 이용해도 되고 ./images/shBrushPhp.js 같이 사용하고자 하는 언어에 맞게 파일명을 추가해주면 된다.)

이제 블로그 글을 작성해보자.
에디터의 우측 상단의 HTML을 체크해 주어야 한다.


그리고 아래와 같이 Java 소스 코드를 작성해 보자.

<pre class="brush:java">
public class A {

}
</pre> 

이렇게 작성하고 저장해보면 예쁘게 소스코드가  보일 것이다.

출처: http://babtingdev.tistory.com/310

Posted by 90002
이전버튼 1 이전버튼

블로그 이미지
90002

공지사항

Yesterday1
Today3
Total125,057

최근에 달린 댓글

최근에 받은 트랙백

글 보관함