블로그 초보자 특집 - PC 정사각형2개 직사각형1개 모바일 정사각형1개 광고 추가

1.블로그관리

블로그 초보자 특집 - PC 정사각형2개 직사각형1개 모바일 정사각형1개 광고 추가

꿍스뿡이 2020. 1. 13. 09:00

꿍스뿡이의 드림빌더

상단 광고(정사각형 2개, 직사각형1개) 광고코드 추가하기

안녕하세요. 꿍스뿡이입니다!

오늘은 본문에 사용중인 광고소스 코드를 공유해 드리는 시간을 가져보도록 하겠습니다~!

1.적용전 확인사항

해당 포스팅은 다음의 작업을 진행할 수 있는 분들을 가정하여 작성하였습니다.

(제공된 소스코드는 타 블로그님이 공유해주신 내용들을 취합하여 약간의 수정작업을 진행했음을 밝힙니다.)

1. 티스토리 스킨 수정을 할 줄 모르나 제공된 소스코드를 보고 위치를 찾아 적용시키는건 가능하신 분

2. 구글 애드센스에서 광고단위를 만드시고 이를 적용하실 수 있는 분

2.변경시 적용모습 - PC기준

하단에 설명할 소스코드를 적용하면 운영중이신 블로그에 위와같이 광고가 표시되게 되는데요.

우선 PC버전을 보시면 상단에 정사각형 광고가 2개가 노출되고

하단에 직사각형의 광고가 1개 노출되어 집니다.

3. 변경시 적용모습 - 모바일기준

본 소스코드를 적용했을때 모바일에 나타나는 광고 입니다.

기존의 PC광고에서 노출되던 정사각형광고 1개와 직사각형광고 1개는

모바일에서 노출되지 않습니다.

이렇게 한건 여러가지 이유가 있겠으나

가장 큰 이유는 모바일에서는 PC에서 보는 화면보다 더 작은 화면에서

글을 보게 되는데, 상단에 광고가 너무 많으면 글을 읽을때 부담이 많이 생길것 같아

광고 노출은 1개만 처리하도록 만들었습니다.

여담으로 광고가 연속적으로 노출되면 패널티를 먹는다는 '카더라' 통신도 한몫 했습니다.ㅇㅅㅇ

변경에 대한 내용은 이쯤으로 각설하고 이제 소스파일을 공유하겠습니다.

소스파일

소스파일.txt

0.00MB

해당 소스파일을 다운받으신 후 본인에게 해당하는 광고코드만 삽입해주시면 됩니다.

소스설명 - 색상변경 중심

<div class="entry-content">
  <div style="text-align: center;">
    <span>
      <style type="text/css">
        .adsense_1 {
          display: inline-block;
		  width: 300px;
		  height: 250px;
		}
        @media (max-width: 300px) {
          .adsense_1 {
            width: 300px;
			height: 250px;
		  }
		}
		@media (min-width:450px) {
		  .adsense_1 {
			width: 336px;
			height: 280px;
		  }
		}
		@media (min-width:800px) and (max-width:899px) {
		  .adsense_1 {
			width: 300px;
			height: 250px;
		   }
		}
		@media (min-width:900px) and (max-width:999px) {
		  .adsense_1 {
			width: 336px;
			height: 280px;
		   }
		}
		@media (min-width:1000px) and (max-width:1019px) {
		  .adsense_1 {
			width: 300px;
			height: 250px;
		   }
		}
		@media (min-width:1020px) {
		  .adsense_1 {
			width: 336px;
			height: 280px;
		   }
		}
      </style>
      <!-- 정사각형 광고1 광고코드 삽입 부분 시작-->
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <ins class="adsbygoogle adsense_1" data-full-width-responsive="true" data-ad-client="ca-pub-본인코드삽입" data-ad-slot="본인코드삽입"></ins>
	  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
      <!-- 정사각형 광고1 광고코드 삽입 부분 종료-->
    </span>
    <span class="adsense_empty">
      <style type="text/css">
		.adsense_empty {
		  display: inline-block;
			width: 0px;
			height: 0px;
		}
		@media (max-width: 799px) {
		  .adsense_empty {
			display: none;
		  }
		}
		@media (min-width:800px) {
		  .adsense_empty {
			width: 20px;
		   }
		}
	  </style>
    </span>
    <span>
      <style type="text/css">
		.adsense_2 {
		  display: inline-block;
		}
		@media (max-width:799px) {
		  .adsense_2 {
			display: none;
		  }
		}
		@media (min-width:800px) and (max-width:899px) {
		  .adsense_2 {
			width: 300px;
			height: 250px;
		  }
		}
		@media (min-width:900px) and (max-width:999px) {
		  .adsense_2 {
			width: 336px;
			height: 280px;
		  }
		}
		@media (min-width:1000px) and (max-width:1019px) {
		  .adsense_2 {
			width: 300px;
			height: 250px;
		  }
		}
		@media (min-width:1020px) {
		  .adsense_2 {
		  	width: 336px;
			height: 280px;
		  }
		}
      </style>
      <!-- 정사각형 광고2 광고코드 삽입 부분 시작-->
	  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <ins class="adsbygoogle adsense_2" data-full-width-responsive="true" data-ad-client="ca-pub-본인코드삽입" data-ad-slot="본인코드삽입"></ins>
	  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
      <!-- 정사각형 광고2 광고코드 삽입 부분 종료-->
    </span>	
    <p><!-- 상단의 정사각형광고와 하단의 가로광고의 간격이 너무 좁을 경우 사용, 그렇지 않을 경우 제거-->
    <style type="text/css">
      .adsense_3 {
		display: inline-block;
	  }
	  @media (max-width:799px) {
		.adsense_3 {
		  display: none;
		}
	  }
	 </style>
	 <div class="adsense_3">
	    <!-- 가로 광고코드 삽입 부분 시작-->
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 850*250광고 -->
		<ins class="adsbygoogle adsense_3" style="display:inline-block;width:850px;height:250px;"
		 data-ad-client="ca-pub-본인코드삽입" data-ad-slot="본인코드삽입"></ins>
		<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
		<!-- 가로 광고코드 삽입 부분 종료-->
	 </div>
  </div>
  <br><!-- 상단의 가로광고와 본문의 제목 사이의 간격이 너무 좁을 경우 사용, 그렇지 않을 경우 제거-->
	





            



             꿍스뿡이의 드림빌더 
상단 광고(정사각형 2개, 직사각형1개) 광고코드 추가하기
안녕하세요. 꿍스뿡이입니다!
오늘은 본문에 사용중인 광고소스 코드를 공유해 드리는 시간을 가져보도록 하겠습니다~!
 


 
 
 
1.적용전 확인사항
해당 포스팅은 다음의 작업을 진행할 수 있는 분들을 가정하여 작성하였습니다.
(제공된 소스코드는 타 블로그님이 공유해주신 내용들을 취합하여 약간의 수정작업을 진행했음을 밝힙니다.)




1. 티스토리 스킨 수정을 할 줄 모르나 제공된 소스코드를 보고 위치를 찾아 적용시키는건 가능하신 분
2. 구글 애드센스에서 광고단위를 만드시고 이를 적용하실 수 있는 분




 
 
 
2.변경시 적용모습 - PC기준


하단에 설명할 소스코드를 적용하면 운영중이신 블로그에 위와같이 광고가 표시되게 되는데요.
우선 PC버전을 보시면 상단에 정사각형 광고가 2개가 노출되고
하단에 직사각형의 광고가 1개 노출되어 집니다.
 
 
3. 변경시 적용모습 - 모바일기준


본 소스코드를 적용했을때 모바일에 나타나는 광고 입니다.
기존의 PC광고에서 노출되던 정사각형광고 1개와 직사각형광고 1개는
모바일에서 노출되지 않습니다.
 
이렇게 한건 여러가지 이유가 있겠으나
가장 큰 이유는 모바일에서는 PC에서 보는 화면보다 더 작은 화면에서
글을 보게 되는데, 상단에 광고가 너무 많으면 글을 읽을때 부담이 많이 생길것 같아
광고 노출은 1개만 처리하도록 만들었습니다.
 
여담으로 광고가 연속적으로 노출되면 패널티를 먹는다는 '카더라' 통신도 한몫 했습니다.ㅇㅅㅇ
 
변경에 대한 내용은 이쯤으로 각설하고 이제 소스파일을 공유하겠습니다.
 
 
소스파일

    
    소스파일.txt
0.00MB

  

해당 소스파일을 다운받으신 후 본인에게 해당하는 광고코드만 삽입해주시면 됩니다.
 
 
소스설명 - 색상변경 중심
 
<div class="entry-content">
  <div style="text-align: center;">
    <span>
      <style type="text/css">
        .adsense_1 {
          display: inline-block;
		  width: 300px;
		  height: 250px;
		}
        @media (max-width: 300px) {
          .adsense_1 {
            width: 300px;
			height: 250px;
		  }
		}
		@media (min-width:450px) {
		  .adsense_1 {
			width: 336px;
			height: 280px;
		  }
		}
		@media (min-width:800px) and (max-width:899px) {
		  .adsense_1 {
			width: 300px;
			height: 250px;
		   }
		}
		@media (min-width:900px) and (max-width:999px) {
		  .adsense_1 {
			width: 336px;
			height: 280px;
		   }
		}
		@media (min-width:1000px) and (max-width:1019px) {
		  .adsense_1 {
			width: 300px;
			height: 250px;
		   }
		}
		@media (min-width:1020px) {
		  .adsense_1 {
			width: 336px;
			height: 280px;
		   }
		}
      </style>
      <!-- 정사각형 광고1 광고코드 삽입 부분 시작-->
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <ins class="adsbygoogle adsense_1" data-full-width-responsive="true" data-ad-client="ca-pub-본인코드삽입" data-ad-slot="본인코드삽입"></ins>
	  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
      <!-- 정사각형 광고1 광고코드 삽입 부분 종료-->
    </span>
    <span class="adsense_empty">
      <style type="text/css">
		.adsense_empty {
		  display: inline-block;
			width: 0px;
			height: 0px;
		}
		@media (max-width: 799px) {
		  .adsense_empty {
			display: none;
		  }
		}
		@media (min-width:800px) {
		  .adsense_empty {
			width: 20px;
		   }
		}
	  </style>
    </span>
    <span>
      <style type="text/css">
		.adsense_2 {
		  display: inline-block;
		}
		@media (max-width:799px) {
		  .adsense_2 {
			display: none;
		  }
		}
		@media (min-width:800px) and (max-width:899px) {
		  .adsense_2 {
			width: 300px;
			height: 250px;
		  }
		}
		@media (min-width:900px) and (max-width:999px) {
		  .adsense_2 {
			width: 336px;
			height: 280px;
		  }
		}
		@media (min-width:1000px) and (max-width:1019px) {
		  .adsense_2 {
			width: 300px;
			height: 250px;
		  }
		}
		@media (min-width:1020px) {
		  .adsense_2 {
		  	width: 336px;
			height: 280px;
		  }
		}
      </style>
      <!-- 정사각형 광고2 광고코드 삽입 부분 시작-->
	  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <ins class="adsbygoogle adsense_2" data-full-width-responsive="true" data-ad-client="ca-pub-본인코드삽입" data-ad-slot="본인코드삽입"></ins>
	  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
      <!-- 정사각형 광고2 광고코드 삽입 부분 종료-->
    </span>	
    <p><!-- 상단의 정사각형광고와 하단의 가로광고의 간격이 너무 좁을 경우 사용, 그렇지 않을 경우 제거-->
    <style type="text/css">
      .adsense_3 {
		display: inline-block;
	  }
	  @media (max-width:799px) {
		.adsense_3 {
		  display: none;
		}
	  }
	 </style>
	 <div class="adsense_3">
	    <!-- 가로 광고코드 삽입 부분 시작-->
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 850*250광고 -->
		<ins class="adsbygoogle adsense_3" style="display:inline-block;width:850px;height:250px;"
		 data-ad-client="ca-pub-본인코드삽입" data-ad-slot="본인코드삽입"></ins>
		<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
		<!-- 가로 광고코드 삽입 부분 종료-->
	 </div>
  </div>
  <br><!-- 상단의 가로광고와 본문의 제목 사이의 간격이 너무 좁을 경우 사용, 그렇지 않을 경우 제거-->
	<!-- 해당 위치 위에 코드 삽입 -->
</div>





 
소스부분입니다.
제 경우 만들었던 광고단위는 사각형 광고 2개, 직사각형(850*250)광고 1개를 만들어서 진행했습니다.
본 소스코드를 그대로 사용하시는 분들은 소스코드에 들어있는 '본인코드삽입' 부분에만 코드를 삽입한 후 적용하시면 됩니다.
 
 
 
 
잘 사용하세용!
지금가지 상단 광고 삽입하는 방법에 대한 간단한 포스팅을 마무리 합니다.
블로그 운영에 도움이 되길 바랍니다!^^
 
ps. 아... 새로운 에디터는 정말... 왜이렇게 불편한거죠... ㅠㅠ
 
 
관련글


 1. 티스토리 블로그 POSTER 스킨 꾸미기[1탄 : 레이아웃]
2. 티스토리 블로그 POSTER 스킨 꾸미기[2탄 : 소스코드]


 

 내용이 도움이 되셨거나 초보 블로거를 응원하고 싶으신 분은  아래 하트♥공감 버튼을 꾹 눌러주세요! 
 내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요!

 




 



 
            



<!-- 해당 위치 위에 코드 삽입 -->
</div>

소스부분입니다.

제 경우 만들었던 광고단위는 사각형 광고 2개, 직사각형(850*250)광고 1개를 만들어서 진행했습니다.

본 소스코드를 그대로 사용하시는 분들은 소스코드에 들어있는 '본인코드삽입' 부분에만 코드를 삽입한 후 적용하시면 됩니다.

잘 사용하세용!

지금가지 상단 광고 삽입하는 방법에 대한 간단한 포스팅을 마무리 합니다.

블로그 운영에 도움이 되길 바랍니다!^^

ps. 아... 새로운 에디터는 정말... 왜이렇게 불편한거죠... ㅠㅠ

1. 티스토리 블로그 POSTER 스킨 꾸미기[1탄 : 레이아웃]

2. 티스토리 블로그 POSTER 스킨 꾸미기[2탄 : 소스코드]

내용이 도움이 되셨거나 초보 블로거를 응원하고 싶으신 분은 아래 하트♥공감 버튼을 꾹 눌러주세요!

내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요!

저작자표시 비영리 변경금지

'1.블로그관리' 카테고리의 다른 글

제 글이 다음 메인화면에 소개되었습니다! - 6번째 (0)	2020.02.14
제 글이 다음 메인화면에 소개되었습니다! - 5번째 (0)	2020.02.07
제 글이 다음 메인화면에 소개되었습니다! - 4번째 (24)	2019.12.19
제 글이 다음 메인화면에 소개되었습니다! - 3번째 (32)	2019.11.08
제 글이 다음 메인화면에 소개되었습니다! - 2번째 (21)	2019.11.02

현재글블로그 초보자 특집 - PC 정사각형2개 직사각형1개 모바일 정사각형1개 광고 추가

꿍스뿡이의 드림빌더