[티스토리] 애드센스 상단 2개 추가하기 - 2

지난 포스팅에선

애드센스 상단 광고를

추가하기에 앞서 

광고를 생성했지요😎

 

 

 

[티스토리] 애드센스 상단 2개 추가하기 - 1

[티스토리] 애드센스 상단 2개 추가하기 - 1

 

 

 

자, 이제 

광고를 적용해 볼게요

 

소스코드가 들어가기 때문에 

잘 보시고 복사해서

사용하시면 된답니다!

 

 

 

---

 

"적용 : 티스토리 플러그인으로 추가"

 

1. 소스코드 만들기

<div style="display:table; width:100%">
    <div style="display:table-row;">
        <div class="ad_1" align="center" style="display:table-cell;">
            
            첫 번째 광고 붙여 넣을 곳
            
            
        </div>
        
        <div class="ad_2" align="center" style="display:table-cell;">
            
            
            두 번째 광고 붙여 넣을 곳
            
            
        </div>
    </div>
</div>

 

광고 두 개를 상단에 놓고 

가운데 정렬로 

깔끔하게 배치하게 만들어놓은

코드랍니다😉

 

메모장 같은 곳에

위에 소스를 복사해서 

놓아두세요!

 

 

 

 

다시 애드센스로 접속해서

전 포스팅에서

생성해 놓은 광고의

코드 가져오기

버튼을 눌러보아요😌

 

 

 

 

생성된 코드를

확인하실 수 있을 거예요

 

이제 코드 복사하기를

눌러서 제가 드린 코드에

붙여 넣으면 돼요

 

첫 번째 광고 붙여 놓을 곳과

두 번째 광고 붙여

놓을 곳에 붙여

넣으면 됩니다.

 

여기까지 했다면

코드 준비 끝! 👏👏👏

 

 

 

 

2. 플러그인 붙여 넣기

 

관리자 페이지의

플러그인을 클릭하면

여러 가지 플러그인 목록이 나와요!

 

 

 

이 중 구글 애드센스(반응형)를

선택해야 해요

반드시 반응형을 선택하세요

 

 

 

 

 

이제 상단을 선택하고 

아까 만들었던 코드를 

붙여 넣고 변경 사항을 저장하면

끝!! 🎉

 

 

 

 

 

궁금하신 분들만 읽어보기😮

 

Q : "난 고정으로 사이즈를 만들었는데

왜 반응형으로 넣어야 하지?!"

 

A : 간단히 설명드리면

위에서 두 개를 한 번에 아우르는

코들 만들었기 때문에 

티스토리 플러그인에서 요구하는

PC/모바일의 광고 규격과 맞지 않아요

 

---

 

나름 열심히 설명한다고 설명했는데 

혹시 부족했다 하시는 분들은

밑에 댓글 달아주시면

성실히 답변드릴게요!

 

가운데 정렬 관련

포스팅도 있으니

개발에 관심이 있는 분들은 아래 글도 

읽어보시면 도움이 될 거예요

 

[CSS] div 균등 분할 / 가운데 정렬 (display : table)

 

 

 

 

 

흥미로운 추천이었다면

로그인이 필요 없는 공감 버튼 꾹 눌러주세요!