생활얘기2015. 4. 13. 06:50

여러 해 전에 텀블러(tumblr.com) 회원으로 가입했다. 영어로 짧은 문장을 작성해 동영상이나 글을 연결시킬 목적이었다. 하지만 방문자와 구독자는 극소수에 그쳤다. 그래서 거의 방치하다시피 했다. 

그런데 최근 13살 딸아이가 이 텀블러 블로그에 푹 빠져 있다. html 소스 변경을 직접하면서 아주 흥미로워 한다. 새로운 코드를 넣어 성공하면 아빠를 불러 보여주면서 아주 즐거워 한다. 테마를 편집하다 의문 사항이나 개선할 사항을 찾으면 테마 개발자에게 메일을 보내 의견을 나누기도 한다. 

그동안 텀블러의 테마 편집에 전혀 관심을 두지 않았다. 이제 딸아이의 텀블러 블로그의 구독자수가 조금씩 늘어나고 해서 구글 애드센스 넣기를 권했다. 승낙했다. 그래서 시간을 내어 어떻게 넣을 것인 지에 대한 공부를 해보았다.       

텀블러는 유료와 무료 테마가 있다. 아래에 설명하는 것은 무료 테마 Single A Premium이다. 테마마다 코드가 다를 수 있다. 각자가 여러 번 시도해보고 맞게 설정하면 된다. 혹시나 도움이 필요한 사람을 위해 성공한 과정을 여기에 적는다.   

로그인을 한다
설정에서 테마 편집으로 들어간다
상단에서 html  편집으로 들어간다
마우스로 스크롤하면서 해당 코드를 찾아간다.

1. 글 제목 바로 위에 넣을 경우
 
기존 코드: <div class="alert tagged bF tF">Posts tagged "{Tag}"</div>
    {/block:TagPage}
    <div class="posts">
    <!--wNMfuiLp4L2Mub-->
    {block:Posts}


수정 코드: <div class="alert tagged bF tF">Posts tagged "{Tag}"</div>

     {/block:TagPage}

위에 이미지에서 보듯이 이곳에 애드센스 코드를 넣는다. 

     <div class="posts">
     <!--wNMfuiLp4L2Mub-->
     {block:Posts}

2. 글 본문 밑에 넣을 경우

기존 코드: </div>
{block:Date}
<div class="meta bS tS lS">


수정 코드       </div>

위에 이미지에서 보듯이 이곳에 애드센스 코드를 넣는다. 

{block:Date}
<div class="meta bS tS lS">

3. 사이드 바에 넣을 경우

기존 코드: <div class="col">
         </div>



수정 코드: <div class="col">
위에 이미지에서 보듯이 이곳에 애드센스 코드를 넣는다. 
            </div>


주의: 이 경우 애드센스 광고가 기존 박스에 겹쳐 나올 수 있다(위 이미지 위에 있는 이미지: 오른쪽).
해결법: <br></br>를 중첩되지 않을 때까지 넣는다.

중요한 것은 작업을 한 후 엡데이트 프리뷰를 누르고 반드시 저장해야 수정 사항이 적용된다. 딸아이의 텀블러 블로그가 나날이 발전하길 바란다.
Posted by 초유스