[그린리뷰] 티스토리 본문에 그린리뷰 배너 달기

  티스토리를 운영한지 얼마 안됐지만, 네이버 블로그에서 시행하는 그린리뷰 캠페인이 마음에 들어서 나도 본문에 설치하고 싶었다. 그런데 네이버에서는 자체적으로 실시해서 그린리뷰 카테고리도 나누어서 반영이 가능한 반면, 티스토리는 일절 그런 것도 없고 그린리뷰 한다고 표시낼 수도 없다. 따로 플러그인을 만들어주지도 않았다. 그래서 그것이 생기기 전까지 만이라도 자체적으로 네이버에서 시행하는 배너 그림, 사이트를 활용하여 본문 위쪽에 달까 한다. (주관적인 생각엔 위쪽에서 미리 그린리뷰어라고 소개하는 게 더 좋을 것 같아서 그랬다.)

0. 앞서 하기 전에 : 네이버 그린 리뷰 캠페인 홈페이지

  먼저 네이버 블로그 포스팅에 있는 배너를 누르면 나오는 사이트이다. 굉장히 좋은 캠페인이라고 생각하기 때문에 티스토리 블로그 개설하면서도 항상 생각했다. 그런데 왜 티스토리는 안전상의 이유로 플러그인을 자체적으로 못붙이게 하는지 모르겠다ㅜㅜ 플러그인 예쁘게 만들어서 심사보게 하면 되나요, 티스토리 측에 건의하면 되나요.

1. 내 티스토리 블로그에 어울리는 배너 색 선택하기

  네이버 블로그에서 자체적으로 어떤 배너를 선택할 수 있는지 관리 페이지에서 선택할 수 있게 해놓았다. 블로그의 분위기에 따라 초록이나 회색은 굉장히 색채감으로 별로일 수 있기 때문에, 나중을 위해서 흰색 배너그림으로 정하기로 했다. 먼저 유저분들이 원하는 배너색의 주소를 복사해놓길 바란다. (열리는지 확인하고 안되면 연락주시면 감사하겠습니다.)

그린리뷰 녹색배너 : http://blogimgs.naver.net/nblog/mylog/post/gr_green.gif

그린리뷰 흰색배너 : http://blogimgs.naver.net/nblog/mylog/post/gr_white.gif

그린리뷰 회색배너 : http://blogimgs.naver.net/nblog/mylog/post/gr_gray.gif

그린리뷰 검은색배너 : http://blogimgs.naver.net/nblog/mylog/post/gr_black.gif

2. 티스토리 계정에 로그인한 후 관리 페이지로 들어간다. [꾸미기] 탭에 있는 [HTML/CSS편집]을 클릭한다.

  이거 어딨냐고 쪽지로 물어보시면 곤란해요. 관리 페이지에 있습니다. 안 보이면 다시 한 번 찾아봐주세요. ㅠㅠ

3. 본문 맨 위에 배너를 넣을 수 있게 HTML상의 코드에 올바르게 접근하자!

(※ http://speedinkland.com/36님의 블로그에서 어떤 코드가 배너 위에 해당하는지 조사하였습니다.)

  전공하지 않거나 공부하지 않은 채로 편집기를 열면 순간 당황할 수 있습니다. 영어로 뭐라뭐라 되어있고 반짝거리는 글씨들을 보면 어지러울 수 있습니다. 하지만 걱정하지 마세요.

3-1. 먼저 왼쪽에 나오는 블로그엔 신경쓰지 마시고, 오른쪽에 있는 편집기에 한 번 클릭합니다. (오른쪽 HTML 언어쪽에 커서가 깜빡이는 상태면 됩니다.)

3-2. Ctrl + F를 누른 다음 위 사진의 위측처럼 검색창이 나오면 빨간 네모로 article_rep_desc로 검색하세요.

3-3. Enter를 치면 위 사진 아래 빨간 네모처럼 본문 위/아래에 새길 영역이 나옵니다.

(div는 참고로 division으로, 구역을 정해주는 태그입니다.)

4. HTML상에 올바르게 배너 코드를 입력하자!

  배너를 클릭하지 않게 하는 버전도 있고, 클릭해서 다른 페이지가 나오게 할 수도 있습니다. 하지만 저 배너 그림은 네이버 블로그에서 가져온 것이기 때문에, 네이버 블로그 페이지를 거는 것이 옳다고 생각했습니다. 물론 이 포스팅엔 여러 가지 버전을 실어드리면서 배너를 눌러도 아무 반응 없는 코드를 적어드리겠지만, 네이버측 배너를 사용하는 입장임으로 웬만하면 저처럼 네이버 그린리뷰 캠페인 홈페이지로 이동하는 코드를 사용하면 네이버 측에서도 좋아할 것이고, 티스토리 측에서도 얼른 자체적으로 플러그인을 만들지 않을까 생각합니다.

4-1. 제가 올린 버전(흰색 배너, 클릭시 새 탭으로 네이버 블로그 그린리뷰 캠페인 페이지 뜨기)

<div id="bannerGreenReview"> <center> <a href="http://campaign.naver.com/greenReview/" alt="저는 그린리뷰를 지향하고 있습니다." target=_blank> <img src="http://blogimgs.naver.net/nblog/mylog/post/gr_white.gif"/> </a> </center> </div>

4-2. 다른 버전(검은색 배너, 클릭시 아무 반응 없음, 다른 색 배너를 하고 싶으면 img src="" 안에 원하는 이미지 주소를 넣어주세요.)

<div id="bannerGreenReview"> <center> <img src="http://blogimgs.naver.net/nblog/mylog/post/gr_black.gif"/> </center> </div>

5. 결과를 확인하자.

HTML/CSS편집기에서 저장누르시고 왼쪽 위에 있는 글 카테고리에서도 확인하실 수 있으시지만, 귀찮으므로 그냥 단박에 결과창을 각자의 블로그 본문에서 확인해보실 수 있습니다. 본문 아래로 하려니까 다른 글 보기의 아래로 들어가는 바람에... 플러그인이 아니고서야 어떻게 해야 각자의 블로그에서 똑같이 반응하게 만들 수 있을지 생각해봤는데 좀 어려울 것 같아서요. 통일성을 위해서 본문의 위쪽에만 나오게 했습니다.

(배너위 -> 플러그인들 -> 본문 -> 플러그인 -> 배너아래 순인데, 저희는 배너 위 영역에 만든 것이라서, 제 블로그를 보시면 그린리뷰 배너, 저작물, 구글 애드센스, 본문 순으로 내용이 나오는 것을 확인하실 수 있습니다.)

  모르시면 도와드릴 순 있지만, 저도 시간이 많지는 않아서 이 방법 내에서 모르시는 부분만 답해드리겠습니다. HTML 명령어가 궁금하시면 인터넷에 검색하시면 많이 나옵니다.