티스토리 메인 상단(Header 부분)에 광고 2개(올블릿, 구글 애드센스) 넣기

블로그로 이익을 내기 위해 여러가지를 생각하며 실험을 하고 있는 중 가장 맘에 안들었던 부분은

바로 이 부분 이였습니다 Allblet 광고, 티스토리 view on, Mixup의 세가지 플러그인(티스토리에서 기본으로 제공해주는 위젯과 기능들, "관리자모드->플러그인"에서 확인 가능)들이 나란히 나온다는 거였죠 문제는 추천 플러그인들만  따로 나왔으면 하는데 기본으로 제공되어지는 것들이라 소스로 수정이 안된다는 점이 문제였죠

"관리자 모드->플로그인" 에서 추가 가능한 믹시와 다음뷰와 올블릿, 추가하면 각 포스팅 하단에 출력이 됩니다.

평소에 생각을 한게 블로그에 광고를 올려도 너무 티나지 않게(^^) 그리고 자연스럽게 나오는 걸 고민했었죠 그래서 생각한게 그렇다면 올블릿에서 코드를 가져와서 상단부분(코드에서 Header 부분, 관련포스팅) 에 출력을 해보자는 거였습니다. 참고로 저는 전공이 경제쪽이라 컴퓨터 관련은 독학으로 배워서 전문성 없이 직접 부딪히며 해보는 거라 약간 어수룩 할수도 있습니다(이해해주세요..T.T)

그럼 일단 출력을 할 광고를 찾아보셔야 겠죠 현재 초보블로거라 아는 광고라고는 마음에 안들어 수정하려는 Alllbet 과 구글광고가 있습니다 생각해뒀던 주메뉴인 Allbet(바로가기, 가입된 상태라고 가정하고 진행하겠습니다)에 들어가 "올블릿 달기" 메뉴에 가보니



가로X세로 사이즈(단위는 Pixel)가 "250X250" 광고와 "270X70"인 광고가 두개가 있더군요 위에 설치할것이니 긴걸("270X70")로 결정하고 소스를 복사한 후 다른 광고를 찾기 위해 구글 페이지를 들어가봅니다.

구글이야 광고가 많지만 높이가 비슷한걸 보니 "468X60" 사이즈의 배너(관련포스팅)가 가장 잘 어울릴거 같아서 이것도 소스를 복사해 둡니다 이제는 header의 라인과 같은 모양을 만들어야 광고코드를 삽입할 수 있겠죠 ^^ 제가 원하는 모양은

위에 라인 밑에 똑같은 라인이 한줄 더 나와서 거기에 광고를 출력할려고 생각했습니다. Html/CSS 편집에서 Html 편집창을 보시면("관리자모드->스킨->html/css편집")

Searchbar 관련 내용이 보이내요.. 저도 정확히는 몰라요..T.T 제가 생각하는건 skin.html 편집창에서 블로그스킨의 기본골격을 만들고 style.css에서 기본골격에 대한 좀더 디테일한 정보를 다루는 걸로 알고 있습니다. 저한테 전문용어 기대하지 마세요 ㅋㅋ 하여간 무조건 테스트를 해보자면 찾기로(Ctrl+f)로 searchbar-rignt 를 검색해보시면 별다른 소스를 건드리지 않은 이상 skin.html 편집창 제일 첫번째 에 나옵니다 그리고 그 밑에다가

사진처럼 아래의 세줄을 삽입해보시고 저장을 해서 보시면

<div class="searchbar-left"></div>
<div class="searchbar-container">
<div class="searchbar-right"></div>

상단처럼 원하던 두줄이 나오네요 ^^ 그런데 문제는 광고가 가장 높은게 올빌릿이 세로가 70px였는데 칸이 좀 작아 보입니다. 이거는 좀 노가다를 하셔야 해요

스킨다운로드("스킨->스킨선택" 페이지에서 스킨다운로드)를 하시고 압축을 푸시면

그 안에 images 폴더 안에 그 한줄에 배경으로 사용되는 이미지가 3개가 있습니다

searchbar_left.png
searchbar_mid.png
searchbar_right.png

그럼 이놈들을 거기에 맞게 사이즈를 조절해야겠죠? ^^ 저는 포토샵을 사용해서 사이즈를 늘렸습니다.

포토샵에서 "이미지->이미지크기" 에서 하단에 비율제한 체크(비율제한을 체크하시면 높이가 변경하면 같은 비율로 가로사이즈까지 변경됩니다)없애시고 높이를 단위를 픽셀로 해서 78 픽셀로 수정합니다(올블릿이 70이지만 딱 붙으면 여유로워보이지 않을거 같아서 위아래 4 픽셀씩 여유를 주고 넣었습니다) 이제 다른이름으로 저장을 누르시고 기존 파일과 이름을 다르게 저장을 하십니다 저는 관리하기 편하게 끝에 _b 를 추가하여

searchbar_left_b.png
searchbar_mid_b.png
searchbar_right_b.png

참고로 확장자는 png 꼭 소문자로 저장하셔야 돼요 대문자면 티블로그에서 인식이 안되더라구요. 이렇게 저장을 하시고 난 뒤에 "스킨->스킨선택" 페이지에서 파일업로드로 업로드하시면 됩니다.(혹시나 모를 위험을 위해 항상 백업은 준비하세요)

이제 남은거는 이 파일을 적용시키는 일만 남았네요

아까 테스트에서 skin.html 에 넣으셨던

<div class="searchbar-left"></div>
<div class="searchbar-container">
<div class="searchbar-right"></div>

위의 코드를 하단의 코드로 교체를 하시고 광고를 넣으시면 되요

<div class="searchbar-left_b"></div>
<div class="searchbar-container_b">
<table valign="middle" align="center">
<tr height="75"><td>
여기에 광고를 삽입합니다
</td><td>
여기에 광고를 삽입합니다
</td>
</table>
</div>
<div class="searchbar-right_b"></div>

참고로 valign="middle" align="center 에서 valign 은 위아래 정렬을 align 은 좌우정렬을 담당하고 <tr height="75"><td> 에서 숫자 75는 들어갈 광고보다 칸이 더 크게 해서 그 중간에 정렬되도록 했습니다. 한마디로 위아래 균형이 좀 안 맞으신 분들은 숫자를 조절하시면 됩니다.

그럼 이제 searchbar_right_b, searchbar_left_b, searchbar_container_b 세개에 대한 스타일(style.css)을 만드셔야 합니다

간단하게 style.css 편집창 어디에나(저는 관리를 위해 마지막에다가 수정사항들은 입력하고 있습니다)

#searchbar .searchbar-left_b, #searchbar .searchbar-right_b {float:left; height:78px; background-repeat:no-repeat; }
#searchbar .searchbar-left_b {width:9px; background-image:url(images/searchbar_left_b.png); }
#searchbar .searchbar-right_b {width:9px; background-image:url(images/searchbar_right_b.png); }
#searchbar .searchbar-container_b {float:left; width:/*@post-width:249=*/949px/*@*/; height:78px; background:url(images/searchbar_mid_b.png) repeat-x; }

입력하셔야 합니다 이건 skin.html 에서 만든 골격에 세부디자인을 style.css에 입력하는 것으로서.. 방금 안넣어서 테스트 해봤는데 이상하게 나오더군요.. 쿨럭.. 꼭 입력하셔야 해요.. 아 그리고 광고 사이즈를 다른 것을 넣으실 분들은 빨간색의 높이를 수정하셔야 하고요 만약에
 파일명을 저하고 틀리게 변경하신분들은 파란색의 각 파일명을 맞게 수정하셔야 합니다 그러면 이제 사이트를 보시면 멋진 광고가 기재되어 있을겁니다(구글광고는 만들고 난후 1-20분 뒤에 광고가 나옵니다 그전에는 페이지가 안나옵니다 라는 에러메세지가 뜨니 혹시나 안나오시는 분들은 잠시만 기다려 보세요)

밑에는 제가 약간 고친 상단메뉴 이미지 입니다.

상단메뉴이미지.zip