글 본문에 제목을 자동으로 표시해 주는 소스코드

HTML과 CSS를 편집할 수 있는 웹 사이트에 적용할 수 있는 팁입니다.

정확하게는 티스토리 블로그처럼 텍스트큐브의 오픈소스를 사용하는 설치형 웹사이트에 해당되는데요.

오늘 소개할 소스 코드는 한 5년 전부터 한동안 이 블로그에서 적용한 적이 있었는데, 스킨 변경 과정에서 누락되어 공유해 주었던 원출처를 찾으려 하니 못찾고 헤매던 중 창고에 보관(?)되었던 소스 코드를 발견하고 블로그에 저장할 요량으로 포스팅합니다.

먼저 결과물부터 볼까요?

제 세컨 블로그 샷인데요.

샷에서 1 부분은 대부분의 웹사이트에서 글작성 후 발행하면 표시되는 제목이구요.

2로 표시된 영역은 소스 코드 적용 후 포스트 본문 바로 위에 자동으로 표시되는 제목입니다.

원출저의 블로거께서는 이렇게 제목이 2중으로 표시되는 효과를 블로그에 적용하면 포털 검색 결과에서 한층 유리하다고 말했던 것으로 기억하는데요.

실제로 그런지는 모르나 소스 코드를 블로그에 적용하는 방법은 아주 간단합니다.

일단 스킨 편집으로 들어가 html 편집 버튼을 누르고 HTML에서 치환자 

HTML과 CSS를 편집할 수 있는 웹 사이트에 적용할 수 있는 팁입니다.

정확하게는 티스토리 블로그처럼 텍스트큐브의 오픈소스를 사용하는 설치형 웹사이트에 해당되는데요.

오늘 소개할 소스 코드는 한 5년 전부터 한동안 이 블로그에서 적용한 적이 있었는데, 스킨 변경 과정에서 누락되어 공유해 주었던 원출처를 찾으려 하니 못찾고 헤매던 중 창고에 보관(?)되었던 소스 코드를 발견하고 블로그에 저장할 요량으로 포스팅합니다.

먼저 결과물부터 볼까요?

제 세컨 블로그 샷인데요.

샷에서 1 부분은 대부분의 웹사이트에서 글작성 후 발행하면 표시되는 제목이구요.

2로 표시된 영역은 소스 코드 적용 후 포스트 본문 바로 위에 자동으로 표시되는 제목입니다.

원출저의 블로거께서는 이렇게 제목이 2중으로 표시되는 효과를 블로그에 적용하면 포털 검색 결과에서 한층 유리하다고 말했던 것으로 기억하는데요.

실제로 그런지는 모르나 소스 코드를 블로그에 적용하는 방법은 아주 간단합니다.

일단 스킨 편집으로 들어가 html 편집 버튼을 누르고 HTML에서 치환자  을 찾아 바로 위에<div class='my_article_rep_title'></div>라고 코드를 넣어 주고 저장하시구요.

CSS 탭으로 이동, 적당한 곳에 아래 코드를 위치시키고 저장하면 본문 바로 위에 글 제목이 표시됩니다.

간단하쥬?

.my_article_rep_title {

margin: 40px 0;

padding: 10px;

background-color: #353535;

font-weight: normal;

font-size: 18px;

color: white;

text-align: center;"

}

위 CCS에 들어가는 margin, padding, background-color 등의 값은 절대 수치가 아닙니다.

수치와 텍스트 크기는 입맛대로 조정하시고, background-color는 ☞네이버 색상표 등을 이용해서 마음에 드는 색상 코드를 선택하여 적용하시길요.

글본문에_제목을_자동으로_표시해주는_소스코드.txt

티스토리 블로그글 제목 아래 발행 날짜 숨기기

티스토리 블로그 모든 디바이스에 최적화된 "유튜브동영상" 게시하는 팁

을 찾아 바로 위에<div class='my_article_rep_title'>글 본문에 제목을 자동으로 표시해 주는 소스코드</div>라고 코드를 넣어 주고 저장하시구요.

CSS 탭으로 이동, 적당한 곳에 아래 코드를 위치시키고 저장하면 본문 바로 위에 글 제목이 표시됩니다.

간단하쥬?

.my_article_rep_title {

margin: 40px 0;

padding: 10px;

background-color: #353535;

font-weight: normal;

font-size: 18px;

color: white;

text-align: center;"

}

위 CCS에 들어가는 margin, padding, background-color 등의 값은 절대 수치가 아닙니다.

수치와 텍스트 크기는 입맛대로 조정하시고, background-color는 ☞네이버 색상표 등을 이용해서 마음에 드는 색상 코드를 선택하여 적용하시길요.

글본문에_제목을_자동으로_표시해주는_소스코드.txt

티스토리 블로그글 제목 아래 발행 날짜 숨기기

티스토리 블로그 모든 디바이스에 최적화된 "유튜브동영상" 게시하는 팁