더보기(more)가 있는 티에디션 타이틀 만들기
2012.10.14 15:27
더보기(more)가 있는 티에디션 타이틀 만들기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

블로그 메인을 꾸미는데 있어 생각할 부분이 정보를 일괄적이게 보여주고 최근 글을 방문자가 쉽게 보게 하는것 입니다.

 

물론 블로그를 운영하시는 분들중 메인을 꾸미지 않고 사용하시는분들도 계시지만 저처럼 메인을 사용하신다면 좀 더 깔끔함을 추구하는게 방문자 입장에서 좋을듯 해서 꾸며봤습니다.

 

블로그 메인 타이틀 제목을 예쁘게 만들어 보자

 

블로그 메인에서 확인가능하지만 위 이미지 처럼 최근 글 위에 보여주는 부분을 이미지 + 텍스트 제목으로 꾸며 줍니다.

 

bb.rar첨부파일을 다운받아서 압축을 풀어주세요. 압축을 풀면

이미지 파일4개,텍스트 파일 한개가 들어 있습니다.

이미지 파일은 아래 설명대로 블로그에 올려주세요.

 

이미지 업로드 + 티에디션 타이틀 만들기

 

블로그 관리로 접속하셔서 HTML/CSS 편집 -> 파일 업로드 -> 추가 버튼을 이용해서 압축푼 이미지파일 4개를 올려주세요.

 

텍스트 파일을 메모장이나 텍스트 에디트 프로그램으로 열어주세요. 파일을 열어 보면

타이틀 1

<DIV style="BACKGROUND-IMAGE: url(./images/bb.png); WIDTH: 664px; HEIGHT: 30px; float:left"><DIV style="HEIGHT: 0px"></DIV> &nbsp;<FONT color=#000000><SPAN style="FONT-SIZE: 13pt; FONT-FAMILY: 폰트지정">타이틀 제목</SPAN></FONT></DIV><div style="width:36px;float:left"><a href="더 보기 눌렀을때 이동할 주소"><img src="./images/bb1.png"></a></div>


타이틀 2

<DIV style="BACKGROUND-IMAGE: url(./images/bb2.png); WIDTH: 664px; HEIGHT: 30px; float:left"><DIV style="HEIGHT: 0px"></DIV> &nbsp;<FONT color=#000000><SPAN style="FONT-SIZE: 13pt; FONT-FAMILY: 폰트지정">타이틀 제목</SPAN></FONT></DIV><div style="width:36px;float:left"><a href="더 보기 눌렀을때 이동할 주소"><img src="./images/bb2_1.png"></a></div>

이렇게 소스가 들어 있습니다. 타이틀1, 타이틀2번은 아래이미지 참조

"타이틀 1,2" 라고 적힌 부분에 블로그 메인제목이 들어가고 "더보기"라는 부분에 지정한 카테고리로 이동합니다.

 

사용할 Html 자세한 설명

 

테스트에 들어있는 소스를 바로 사용할수없습니다.

타이틀 제목,폰트지정,더보기를 눌렀을때 찾아갈 링크지정 정도는 해 주셔야 합니다.

아래 이미지를 참고해서 자세한 설명을 하겠습니다.

 

 

  1. 타이틀 제목에서 더보기 이전까지의 넓이입니다. 이곳에서 넓이 조정을 합니다.
  2. 전체적인 높이 지정입니다. 제가 첨부한 이미지 사용시 그냥 사용하세요.
  3. 제가 제공한 소스를 사용한다면 그냥 두세요. 만약 2번 높이를 수정하셨다면 글의 위,아래를 맞출때 사용하세요.
  4. 제목 폰트 색상지정을 합니다.(기본값 블랙)
  5. 제목 글자 크기을 변경할수 있습니다.
  6. 웹 폰트를 사용하신다면 지정하세요.사용하지 않는다면 "굴림"이든 기본서체를 지정해 주세요.
  7. 타이틀 제목을 지정합니다.
  8. "더보기"를 눌렀을때 이동할 주소를 적어주세요.

위 설명 참조 하셔서 제가 올린 이미지를 그대로 사용하실려면 1,4,6,7,8번에 해당하는 부분만 수정후 사용하시면 됩니다.

 

티에디션을 이용해 타이틀을 만들어 보겠습니다.

 

소스수정방법까지 알아 봤습니다. 이제 직접 적용해 보겠습니다.

 

타이틀 만들기 보기

 

이 글은 티비의 세상구경 에서 참고하였습니다.(http://nextgoal.tistory.com/464)

, , , ,