블로그에 IT와 여행 수술 후기 등을 쓴지도 꽤 지났다. 그렇게 인기 있는 내용의 글을 적지는 않아서 그런지 많이는 방문 하지 않는다. 대략 사람들이 하루에 100명 가까이는 방문하는거 같다. 

1. 독일어 과외를 하는 친구가 독일어 배우는 학생을 찾는걸 도와달라고 부탁을 한적이 있는데 하나의 포스팅에 작성을 하다보니 많은 사람들이 보지 않았고 효율성이 없었다.  지금 사용하는 스킨에 공지사항을 올리는 기능이 있는가 봤지만 없었다.

2. 한국에 귀국한지 꽤 지났고 본격적으로 일을 찾으려 하는데, 생각보다 쉽지 않다. 꽤 많은 사람들이 내 블로그에 방문하는데 웹/앱 기획이나 개발로 일자리를 구하고 있다는 것을 알릴 수 있으면 어떨까 싶었다.

그래서 아래의 사진 처럼 보듯이 홍보 및 공지(빨간박스) 영역을 만들게 되었다.

원래 사용하던 스킨의 이름은 오딧세이다.

아래를 보듯 게시글을 보더라도 위에 홍보&공지 영역이 보여진다.

방법

위 처럼 하는데는 간단한 html, css코딩이 필요하다.  

1. Admin에 들어가 스킨변경을 누른다.

2. 아래 사진처럼 사용중인 스킨을 볼 수 있을 것이다. 자신이 바꿀 스킨을 다운로드를 한다.

3. 먼저 간단한 티스토리 스킨의 구성을 살펴보면 다음과 같다. 

index.xml, skin.html, style.css 

파일로 구성이 되있고 

XML파일을 열어보면 xml태그와 아래의 스킨편집의 구성이 동일하다는 것을 것을 알 수 있다. XML에 나는 기존에 없던 공지 및 홍보 영역을 추가 하였다.

위에 보듯이 공지 및 홍보 섹션엔 배너용 이미지와 홍보링크를 가지고 있다.

위는 아래의 코드를 추가했기 때문이다. 

variablegroup name= "공지 및 홍보" 는 섹션의 타이틀이 된다.

그 안에 두개의 variable을 넣은 것을 볼 수있는데 name은 html편집에서 티스토리 치환자에 사용될 변수의 이름이다.

타입은 아래 보듯 IMAGE와 STRING이 적혀있는데

1) IMAGE는 이미지를 업로드 할 수 있는 기능을 스킨 편집창에 나타낸다.

2) STRING은 위에 보듯 홍보링크에 input필드를 추가 시켰다.

이 외에도아래 보듯 select나 다른 타입도 있어 원하는 것을 추가 시키면 된다.

나는 메인배너로 쓸 이미지를 올리는 기능과 그것을 눌렀을때 이동하게 할 페이지를 넣을 수 있도록 텍스트 인풋을 추가했다.

그리고 스킨 등록을 통해 업로드를 시켜보면 우리가 xml에 추가한 것들이 스킨편집창 메뉴에 적용된 것을 볼 수 있다.

3. HTML편집하기

변수명 은 xml에 variable name이다.

<s_if_var_변수명>: 만약 변수가 있으면 <s_if_var_변수명></s_if_var_변수명>사이의 내용이 보여진다.

: 스킨편집창에 넣은값이 보여진다.

<s_not_var_변수명> 변수가 없으면 <s_not_var_변수명></s_not_var_변수명>그 사이 내용이 보여진다.

위에 코드를 보듯 container 안 area-main 위에 adAreaImg가 있으면  img 태그가 나타나게 했다.

widh="100%"를 넣어서 가로로 화면에 꽉차게 했다. 링크가 없으면 링크가 없는 배너를 보이게 했고, 링크가 없으면 링크가 없는 배너를 보이게 했다.

이렇게 하면 배너는 나타나는데 쓴 글을 볼때 문제가 발생한다. 이 문제는 간단하게 html에 article-header를 찾아서 업에버렸다.

그러면 아래사진 처럼 빈공간이 생겨버리는 문제가 발생하는데

#tt-body-page .main에 padding-top: 470px이 있어서 그렇다.

이걸 css에 들어가서 지워주면 된다.