[블로그 꾸미기] - 티스토리 본문 상/하단에 광고 넣기

처음 블로그를 시작하고 얼마후 광고를 게재할 수 있었다. 그 때는 본문 하나하나에 직접 광고를 붙여 넣는 방법을 사용했다. 지금 보면 정말 번거럽고 귀찮은 작업을 매번 했었다. 그리고 얼마 전 티스토리 본문 상/하단에 자유롭게 광고를 넣는 방법을 알고 소개하고자 한다.

① HTML/CSS 편집선택

관리자모드 → 꾸미기 → HTML/CSS편집을 선택한다. HTML에는 본문이 저장되는 위치를 찾아 본문 위 또는 아래에 광고 코드를 넣으면 글을 쓸때마다 자동으로 광고가 삽입되게 하는 방식이다.

선택하면 다음과 같이 화면이 나타나고 오른쪽에 HTML/CSS를 편집할 수 있는 곳이 보인다.

② 본문 찾기

HTML 코드가 쭉~욱 나열되고 코드를 보면 도저히 어디가 본문이 시작되는 곳인지 알수가 없다. 이럴 땐 Ctrl+F로 [##_article_rep_desc_##]을 검색하면된다. 그러면 아래와 같은 코드를 찾을 수 있다.

③ 광고 코드 완성하기

광고를 본문 상단에 넣고 싶다면 <div>와 [##_article_rep_desc_##] 사이에 광고를 넣으면 되고, 본문 하단에 넣고 싶다면 [##_article_rep_desc_##]와 </div> 사이에 넣으면 된다. 광고 코드를 붙여 넣기 할 때에 코드를 바로 붙여넣기 하지 말고 아래와 같이 코드를 감싸는 <div> 태그를 사용하도록 하자.

1 2 3 4 5 6 7

<div class = "article">     <div align = "center">         // 이 곳에 스크립트 광고 코드가 들어가면            // 본문 상단에 광고가 나타난다.     </div>     [##_article_rep_desc_##] </div>

cs

그리고 위 코드에서는 <div align = "center"></div> 사이에 광고코드를 붙여 넣기 하면 된다.

이렇게 했다면 이제부터는 티스토리 본문 상/하단에 광고가 자동으로 나타나게 될 것이다.

[블로그 꾸미기] - 구글 블로그 분문 제목 꾸미기

블로그에 글을 좀더 이쁘게 꾸미고 싶은 건 모든 블로거들의 바램이다.

그래서 오늘은 나의 블로그에서 본문 제목을 다르게 꾸며 보도록 하자.

위와 같은것은 블로그를 시작하는 사람이라면 한번쯤은 사용해 보는 아주 흔한 사용법 중에 하나다. 이런 건 CSS로 처리해 주면 된다.

CSS는 어디에서 편집할까?

먼저 본인이 사용하는 테마에서 맞춤 설정을 선택하자.

그리고 고급을 선택하면 맨 아래쪽에 CSS추가가 있다. 그리고 우측에 코드를 삽입하면 모든 게 끝난다.

코드 예제

 h6 {

border-left : 8px solid #1E90FF;

border-bottom : 1px solid #1E90FF;

line-height : 30px;

font-size : 24px;

font-weight : bold;

color : #b8860b;

margin:0;

padding : 0 0 0 10px;

}

본문에서 사용법

본문 글 작성하는 곳에서 HTML 편집화면으로 들어간다.
그리고 적용하고 싶은 글의 앞과 뒤에 <h6></h6>을 추가한다.

<h6>이런느낌</h6>

그리고 코드에서 margin과 padding이 이해가 가지 않는 분들을 위해 그림도 하나 추가했다.

margin : 컨텐츠와 컨테츠 사이의 공간 또는 간격을 말한다. 그리고 margin값이 '0'이면 다른 컨테츠와 달라 붙었다는 얘기다. 그리고 다른 컨텐츠가 없다면 magin은 컨텐츠 위치가 가로 최대 크기는 브라우저의 최대폭이다.

padding : 컨텐츠가 차지하는 공간에서 부터의 간격을 말한다.

블로그 꾸미기 - 나만의 워트마크 만들기

블로거들은 자신이 생산한 이미지에 대한 소유권 보장과 블로그 홍보 목적으로 블로그에 사용되는 이미지에 자신만의 워트마크를 사용한다.

위 그림에서 오른쪽 하단에 있는 Veteran-An이 워트마크이다.

그래서 이번 시간에는 나만의 워트마크 만들기 시간을 갖도로 하겠다.

원트마크를 만드는 프로그램들은 많지만 여기에서는 많은 블로거들이 즐겨 사용하는 포트스케이프란 프로그램을 사용하기로 하자.

네이버로 포토스케이프를 검색하면 무료로 다운 받을 수 있다.

워트마크 만들기(투명배경)

포토스케이프는 포토샵처럼 배경을 투명하게 만들어 주는 기능이 없다. 그래서 투명배경을 얻는 방법을 알아야 한다. 포토스케이프는 투명배경을 가진 이미지를 먼저 불러와 투명부분만 잘라 배경으로 만들어 사용하면 된다.

1. 포토 스케이프 시작
2. 사진편집 선택

3. 투명 배경 이미지 불러오기 및 자르기

포토 스테이프에서 기본 제공하는 이미지들은 모두 투명배경을 가진 이미지이다.
C:\Program Files (x86)\PhotoScape\icon\cartoon 에 있는 cartoon001.png을 불러오자.

자르기 탭을 선택하고 자를 영역을 마우스로 끌기하여 선택한 후 자르기 버튼을 누르면 투명 배경을 얻을 수 있다.

4. 배경크기 조절

자른 투명배경의 크기가 워트마크로 사용하기에는 알맞지 않으므로 크기를 조절할 필요가 있다.

기본탭에서 크기조절을 선택한 후 가로 200 세로 50으로 하자.

6. 꾸미기

이제 문자나 그림등을 이용하여 워트마크 모영을 완성하면 된다.
나는 객체에서 TEXT를 선택하여 Veteran-An이란 글자를 만들어 보겠다.

글자의 같은 경우 외곽선을 사용하면 글자를 더욱 돋보이게 할 수 있다. 보통은 흰색 외곽선을 많이 사용하지만 흰색을 사용하면 외곽선 구분이 되질 않아 여기에서는 그냥 갈색으로 사용하였다.

이미지에 워트마크 적용하기

이제 이미지 하나를 불러와 방금 만든 워트마크를 적용해보자. 불러온 이미이제 워트마크를 불러오려면 개체탭에서 그림을 선택하여 워트마크를 불러오기 한다.

이제 본 문 맨 위에 그림과 같은 결과를 얻을 수 있다.

지금까지 나만의 워트마크 만드는 방법을 배워보았다.