제목에 사용하기 좋은 서식으로써 이름을 리본으로 정했습니다. 몇가지가 있기에 순서대로 1,2,3... 형식으로 나갑니다.
먼저 둥근 형태의 리본서식으로 제목에 사용하기 좋은 형태입니다. 
오늘 사용하는 방법은 이미지가 필요합니다. 그래서 제가 먼저 이미지를 만들어 보았습니다.
이미지를 두개로 슬라이스해서 CSS 코드로 사용하는 방법으로 sliding doors 기법이라고 합니다.
완성작을 한번 보시죠.

티스토리에 리본 제목 서식 만들기 1-1

 
이 방법은 티스토리에서도 사용하기 편하고 IE6까지 모두 지원합니다. 물론 크로스 브라우징을 하려면 약간의 코드가 더 추가되어야만 하지만요.... 
여하는 티스토리에서 적용하는 방법을 알려드리겠습니다.
먼저 이미지 파일을 다운로드 받아서 압축을 해제하세요.
이미지 파일은 아래 링크에 있습니다.

디자인 리소스의 리본 서식 1 =>  http://demun.tistory.com/2065 

다운로드 받은 폴더안에 아래의 html 파일을 같이 두고 브라우져로 열어보보세요.
그럼 어떤 형식으로 나오지는 미리보기를 할 수 있습니다.

1.html


대략 아래와 같은 형태이지요. 1.html 파일과 images 폴더안에 이미지를 두고 브라우져로 실행시키면 됩니다.

자 이제 티스토리에서 적용하는 방법을 알아보겠습니다.
images 폴더안에 이미지들을 모두 html 편집에서 파일업로드를 통해 업로드해주세


티스토리에 리본 제목 서식 만들기 1-2


위의 이미지를 모두 업로드 하였다면 이제 스타일을 작성해보도록 하겠습니다.

CSS 코드 작성.

아래의 코드를 CSS 편집에서 style.css 의 맨 아래에붙여넣기 하세요.

.article h3.tForm {
    margin: 0 0 20px -15px; /* -15px를 본인의 환경에 맞추어서 수정하세요. */
    padding: 0 10px 0 30px;
    position: relative;
	line-height: 60px; /* 본인의 환경에 따라 수치를 수정하세요. */
    color:#222; /* 환경에 따라 설정하세요. a 에 설정해야 하는 경우도 있습니다. */
    text-shadow:0 1px 0 #fff;
    *zoom:1; /* ie6,7 */
}
.article h3 span { 
	height: 70px;
	left: -10px;
	position: absolute;
	top:0;
	width: 10px;
	*zoom:1; /* ie6,7 */
}

.article h3.blue { background:url(images/blue-right.png) no-repeat right 0; }
.article h3.blue span { background:url(images/blue-left.png) no-repeat; }
.article h3.orange { background:url(images/orange-right.png) no-repeat right 0; }
.article h3.orange span { background:url(images/orange-left.png) no-repeat; }
.article h3.red { background:url(images/red-right.png) no-repeat right 0; }
.article h3.red span { background:url(images/red-left.png) no-repeat; }
.article h3.green { background:url(images/green-right.png) no-repeat right 0; }
.article h3.green span { background:url(images/green-left.png) no-repeat; }
.article h3.gray { background:url(images/gray-right.png) no-repeat right 0; }
.article h3.gray span { background:url(images/gray-left.png) no-repeat; }
.article h3.black { background:url(images/black-right.png) no-repeat right 0; color:#888;}
.article h3.black span { background:url(images/black-left.png) no-repeat; }

이제 티스토리에서 글을 작성할때 사용하는 방법을 알려드리겠습니다.
티스토리에서 사용하도록 .article 라는 클래스를 붙여서 css 코드를 작성한 것이 보여질겁니다.
마크업은 아주 간단합니다. 단 한줄만 작성하면 됩니다.

티스토리에 리본 제목 서식 만들기 1-3


위의 이미지를 보시면 아시겠지만 기본 스타일은 tForm 에 작성되었고, blue, orange.... 등등을 사용할 수 있도록 하였습니다.
원하는 색상에 맞쳐서 작성하시면 됩니다.