본문으로 바로가기

[티스토리]블로그 포스팅 본문 상단 애드센스 2개 배치하기

로딩중..
2016. 2. 2. 10:29

블로그 포스팅 기사 본문 상단 애드센스 2개 배치하기


블로그 스킨 문제 때문에 꼬박 밤을 새고나서 드디어 결과를 포스팅합니다. ㅠ_ㅠ


저는 기존에도 포스팅 본문 상단에 2개의 애드센스를 부착해서 사용했습니다.


그러나 기존에 사용하던 초기 블로그 스킨은 반응형웹 스킨이 아니였기에

모바일웹과 PC웹 애드센스 광고 설정을 따로 해줘야 했습니다.


그래서 하나의 광고는 포스팅작성 할 때마다 HTML편집기에서 광고코드를 삽입했고

하나의 광고는 블로그 스킨영역에 광고 코드를 삽입해서


2개의 광고를 상단에 배치 하였습니다.



또한 티스토리에서 제공하는 모바일 웹스킨을 사용하면

반 강제적으로 티스토리 추천글을 배치 해야했기 때문에


티스토리 추천글을 없애는 코드와 애드센스 코드를 서식에 등록시켜놓고 매번

글 작성 때 마다 본문에 삽입 시켜 줬습니다.


<style>#hottrendsContainer{display:none !important;}</style>

+ adsense code

반응형 웹 스킨을 사용하지 않는 티스토리 유저분들은 위 방식으로 광고를 배치 하시면 됩니다.


그러면 피시 화면에서는 상단의 2개의 애드센스 광고와

모바일에서는 본문에 삽입한 광고 1개가 보여지게 되었습니다.

티스토리 추천글도 없어지게 되구요.


블로그 스킨 영역에 광고 배치 할 때에는

<div style="float:left;margin:20px 10px 0px 30px;">

본인의 광고 코드

</div>


으로 div 속성을 지정해주면 손쉽게 위치 이동을 할 수있습니다.

margin 여백속성에 대한 자세한 정보는 아래 블로그에서 알 수 있습니다.

http://webdir.tistory.com/346


위방식을 사용하면 반응형 웹스킨이 아닌 스킨 형태에서

손쉽게 모바일과 PC 화면의 동시에 충족시키는 애드센스를 달 수 있습니다.


물론 위 방식의 단점은 존재합니다!


1. 스킨을 변경할 때 본문의 스타일이 깨 질 수 있다.

2, 광고크기 설정을 하지 못한다. (일일히 전부 다 들어가서 수정해줘야됨)

3. 서식 붙혀넣기를 잘못 할 경우 광고 위치가 제대로 나타나지 않을 수 있다.



그렇기 때문에 되도록이면! 반응형 웹스킨을 추천합니다.

최근에 티스토리도 공식적으로 반응형 웹스킨을 제공하고있고

수많은 뛰어난 웹개발자들이 무료로 반응형 웹스킨을 배포하는 곳도 많습니다!


부트스트랩 기반의 반응형 웹스킨을 사용하면



애드센스 코드를 각각의 해상도에 맞춰서

광고영역 노출이 가능합니다.


반응형 광고를 구현하는 경우가 아닌 애드센스 광고 코드 수정은 정책 위반.



반응형 광고 때문에 구형 익스플로러 ie6 ie7 ie8에서 광고가 3개이상 뜨는 것을 방지하기 위해서

display:none값을 사용 햇지만 타 경우는 광고코드에 사용해서는 안됩니다.

반응형 웹에서는 한쪽은 float:속성 또 다른 광고는 clear:속성과 함께 사용한다면 손쉽게 설치를 할 수 있습니다.


지금 제가 사용하고 있는 부트스트랩 기반의 마크쿼리 스켈레톤 3.0.5 스킨의

포스팅 본문 상단 2개의 광고 배치하는 코드 입니다.


CSS를 사용한 정를을 보고 새롭게 다시 올렸습니다!

필요하신분들은 사용해보세요.


CSS 가운데(중앙) 정렬


블로그 스킨.html 붙혀넣기


<div class="adsensemain">
	<div class="adsenseie7">
	     <!--애드센스 왼쪽-->
		<div class="adsenseleft">
                    <!--본인의 광고 코드를 붙혀넣기 영역1-->
		</div>

	<!--애드센스 가운데 여백조정-->			
		<div class="display-none hidden-xs hidden-sm hidden-md" style="float:left; margin: 40px;">
		</div>
		
	<!--애드센스 오른쪽-->	
        	<div class="adsenseright hidden-xs">	
                      <!--본인의 광고 코드를 붙혀넣기 영역2-->
	        </div>
	</div>
</div>

	<!-- 아래 
            



            
블로그 포스팅 기사 본문 상단 애드센스 2개 배치하기





블로그 스킨 문제 때문에 꼬박 밤을 새고나서 드디어 결과를 포스팅합니다. ㅠ_ㅠ





저는 기존에도 포스팅 본문 상단에 2개의 애드센스를 부착해서 사용했습니다.





그러나 기존에 사용하던 초기 블로그 스킨은 반응형웹 스킨이 아니였기에


모바일웹과 PC웹 애드센스 광고 설정을 따로 해줘야 했습니다.





그래서 하나의 광고는 포스팅작성 할 때마다 HTML편집기에서 광고코드를 삽입했고


하나의 광고는 블로그 스킨영역에 광고 코드를 삽입해서





2개의 광고를 상단에 배치 하였습니다.












또한 티스토리에서 제공하는 모바일 웹스킨을 사용하면


반 강제적으로 티스토리 추천글을 배치 해야했기 때문에





티스토리 추천글을 없애는 코드와 애드센스 코드를 서식에 등록시켜놓고 매번


글 작성 때 마다 본문에 삽입 시켜 줬습니다.





<style>#hottrendsContainer{display:none !important;}</style>


+ adsense code




반응형 웹 스킨을 사용하지 않는 티스토리 유저분들은 위 방식으로 광고를 배치 하시면 됩니다.









그러면 피시 화면에서는 상단의 2개의 애드센스 광고와


모바일에서는 본문에 삽입한 광고 1개가 보여지게 되었습니다.


티스토리 추천글도 없어지게 되구요.







블로그 스킨 영역에 광고 배치 할 때에는


<div style="float:left;margin:20px 10px 0px 30px;">


본인의 광고 코드


</div>





으로 div 속성을 지정해주면 손쉽게 위치 이동을 할 수있습니다.


margin 여백속성에 대한 자세한 정보는 아래 블로그에서 알 수 있습니다.


http://webdir.tistory.com/346





위방식을 사용하면 반응형 웹스킨이 아닌 스킨 형태에서


손쉽게 모바일과 PC 화면의 동시에 충족시키는 애드센스를 달 수 있습니다.





물론 위 방식의 단점은 존재합니다!





1. 스킨을 변경할 때 본문의 스타일이 깨 질 수 있다.


2, 광고크기 설정을 하지 못한다. (일일히 전부 다 들어가서 수정해줘야됨)


3. 서식 붙혀넣기를 잘못 할 경우 광고 위치가 제대로 나타나지 않을 수 있다.








그렇기 때문에 되도록이면! 반응형 웹스킨을 추천합니다.


최근에 티스토리도 공식적으로 반응형 웹스킨을 제공하고있고


수많은 뛰어난 웹개발자들이 무료로 반응형 웹스킨을 배포하는 곳도 많습니다!





부트스트랩 기반의 반응형 웹스킨을 사용하면










애드센스 코드를 각각의 해상도에 맞춰서


광고영역 노출이 가능합니다.







반응형 광고를 구현하는 경우가 아닌 애드센스 광고 코드 수정은 정책 위반.










반응형 광고 때문에 구형 익스플로러 ie6 ie7 ie8에서 광고가 3개이상 뜨는 것을 방지하기 위해서


display:none값을 사용 햇지만 타 경우는 광고코드에 사용해서는 안됩니다.


반응형 웹에서는 한쪽은 float:속성 또 다른 광고는 clear:속성과 함께 사용한다면 손쉽게 설치를 할 수 있습니다.





지금 제가 사용하고 있는 부트스트랩 기반의 마크쿼리 스켈레톤 3.0.5 스킨의


포스팅 본문 상단 2개의 광고 배치하는 코드 입니다.





CSS를 사용한 정를을 보고 새롭게 다시 올렸습니다!


필요하신분들은 사용해보세요.






    
CSS 가운데(중앙) 정렬

    






블로그 스킨.html 붙혀넣기



<div class="adsensemain">
	<div class="adsenseie7">
	     <!--애드센스 왼쪽-->
		<div class="adsenseleft">
                    <!--본인의 광고 코드를 붙혀넣기 영역1-->
		</div>

	<!--애드센스 가운데 여백조정-->			
		<div class="display-none hidden-xs hidden-sm hidden-md" style="float:left; margin: 40px;">
		</div>
		
	<!--애드센스 오른쪽-->	
        	<div class="adsenseright hidden-xs">	
                      <!--본인의 광고 코드를 붙혀넣기 영역2-->
	        </div>
	</div>
</div>

	<!-- 아래  를 찾아서 그위에 광고 2개를 배치하세요 --≷
	<div class="e-content post-content"></div>






를 찾아서 그 윗 부분에 붙혀 넣기를 하세요








블로그 style.css 붙혀 넣기



.adsensemain { text-align: center; }
.adsenseie7 { display: table; margin-left: auto; margin-right: auto; display: inline-block; }
.adsenseleft{
    float: left;
    margin-top: 0px;
}
.adsenseright{
    float: left;
    margin-top: 0px;
    margin-left: 0px;
}



웬만한 반응형 웹에서는 크게 수정없이 사용 가능할 것 같습니다.


본인의 블로그에 맞게 마진값을 추가하거나 수정하세요!!





기존에 모든 포스팅의 본문을 일일히 들어가서 기존 애드센스 코드를 수정 해주는 작업을 밤새한다고 ㅠ_ㅠ


정말 피곤하네요..





다시는 블로그 본문안에 특정 위젯이나 html 코드는 삽입 하지 않을 겁니다 ㅠ_ㅠ


밀어내기 위젯도 일일히 지운다고 고생했는데.







부트스트랩 테이블로 배치하는 방법도 있겠네요 한번 적용해보고 올려드리겠습니다.








            



            
            

  
  


 를 찾아서 그위에 광고 2개를 배치하세요 --≷
	<div class="e-content post-content">
            



            
블로그 포스팅 기사 본문 상단 애드센스 2개 배치하기





블로그 스킨 문제 때문에 꼬박 밤을 새고나서 드디어 결과를 포스팅합니다. ㅠ_ㅠ





저는 기존에도 포스팅 본문 상단에 2개의 애드센스를 부착해서 사용했습니다.





그러나 기존에 사용하던 초기 블로그 스킨은 반응형웹 스킨이 아니였기에


모바일웹과 PC웹 애드센스 광고 설정을 따로 해줘야 했습니다.





그래서 하나의 광고는 포스팅작성 할 때마다 HTML편집기에서 광고코드를 삽입했고


하나의 광고는 블로그 스킨영역에 광고 코드를 삽입해서





2개의 광고를 상단에 배치 하였습니다.












또한 티스토리에서 제공하는 모바일 웹스킨을 사용하면


반 강제적으로 티스토리 추천글을 배치 해야했기 때문에





티스토리 추천글을 없애는 코드와 애드센스 코드를 서식에 등록시켜놓고 매번


글 작성 때 마다 본문에 삽입 시켜 줬습니다.





<style>#hottrendsContainer{display:none !important;}</style>


+ adsense code




반응형 웹 스킨을 사용하지 않는 티스토리 유저분들은 위 방식으로 광고를 배치 하시면 됩니다.









그러면 피시 화면에서는 상단의 2개의 애드센스 광고와


모바일에서는 본문에 삽입한 광고 1개가 보여지게 되었습니다.


티스토리 추천글도 없어지게 되구요.







블로그 스킨 영역에 광고 배치 할 때에는


<div style="float:left;margin:20px 10px 0px 30px;">


본인의 광고 코드


</div>





으로 div 속성을 지정해주면 손쉽게 위치 이동을 할 수있습니다.


margin 여백속성에 대한 자세한 정보는 아래 블로그에서 알 수 있습니다.


http://webdir.tistory.com/346





위방식을 사용하면 반응형 웹스킨이 아닌 스킨 형태에서


손쉽게 모바일과 PC 화면의 동시에 충족시키는 애드센스를 달 수 있습니다.





물론 위 방식의 단점은 존재합니다!





1. 스킨을 변경할 때 본문의 스타일이 깨 질 수 있다.


2, 광고크기 설정을 하지 못한다. (일일히 전부 다 들어가서 수정해줘야됨)


3. 서식 붙혀넣기를 잘못 할 경우 광고 위치가 제대로 나타나지 않을 수 있다.








그렇기 때문에 되도록이면! 반응형 웹스킨을 추천합니다.


최근에 티스토리도 공식적으로 반응형 웹스킨을 제공하고있고


수많은 뛰어난 웹개발자들이 무료로 반응형 웹스킨을 배포하는 곳도 많습니다!





부트스트랩 기반의 반응형 웹스킨을 사용하면










애드센스 코드를 각각의 해상도에 맞춰서


광고영역 노출이 가능합니다.







반응형 광고를 구현하는 경우가 아닌 애드센스 광고 코드 수정은 정책 위반.










반응형 광고 때문에 구형 익스플로러 ie6 ie7 ie8에서 광고가 3개이상 뜨는 것을 방지하기 위해서


display:none값을 사용 햇지만 타 경우는 광고코드에 사용해서는 안됩니다.


반응형 웹에서는 한쪽은 float:속성 또 다른 광고는 clear:속성과 함께 사용한다면 손쉽게 설치를 할 수 있습니다.





지금 제가 사용하고 있는 부트스트랩 기반의 마크쿼리 스켈레톤 3.0.5 스킨의


포스팅 본문 상단 2개의 광고 배치하는 코드 입니다.





CSS를 사용한 정를을 보고 새롭게 다시 올렸습니다!


필요하신분들은 사용해보세요.






    
CSS 가운데(중앙) 정렬

    






블로그 스킨.html 붙혀넣기



<div class="adsensemain">
	<div class="adsenseie7">
	     <!--애드센스 왼쪽-->
		<div class="adsenseleft">
                    <!--본인의 광고 코드를 붙혀넣기 영역1-->
		</div>

	<!--애드센스 가운데 여백조정-->			
		<div class="display-none hidden-xs hidden-sm hidden-md" style="float:left; margin: 40px;">
		</div>
		
	<!--애드센스 오른쪽-->	
        	<div class="adsenseright hidden-xs">	
                      <!--본인의 광고 코드를 붙혀넣기 영역2-->
	        </div>
	</div>
</div>

	<!-- 아래  를 찾아서 그위에 광고 2개를 배치하세요 --≷
	<div class="e-content post-content"></div>






를 찾아서 그 윗 부분에 붙혀 넣기를 하세요








블로그 style.css 붙혀 넣기



.adsensemain { text-align: center; }
.adsenseie7 { display: table; margin-left: auto; margin-right: auto; display: inline-block; }
.adsenseleft{
    float: left;
    margin-top: 0px;
}
.adsenseright{
    float: left;
    margin-top: 0px;
    margin-left: 0px;
}



웬만한 반응형 웹에서는 크게 수정없이 사용 가능할 것 같습니다.


본인의 블로그에 맞게 마진값을 추가하거나 수정하세요!!





기존에 모든 포스팅의 본문을 일일히 들어가서 기존 애드센스 코드를 수정 해주는 작업을 밤새한다고 ㅠ_ㅠ


정말 피곤하네요..





다시는 블로그 본문안에 특정 위젯이나 html 코드는 삽입 하지 않을 겁니다 ㅠ_ㅠ


밀어내기 위젯도 일일히 지운다고 고생했는데.







부트스트랩 테이블로 배치하는 방법도 있겠네요 한번 적용해보고 올려드리겠습니다.








            



            
            

  
  


</div>


블로그 포스팅 기사 본문 상단 애드센스 2개 배치하기


블로그 스킨 문제 때문에 꼬박 밤을 새고나서 드디어 결과를 포스팅합니다. ㅠ_ㅠ


저는 기존에도 포스팅 본문 상단에 2개의 애드센스를 부착해서 사용했습니다.


그러나 기존에 사용하던 초기 블로그 스킨은 반응형웹 스킨이 아니였기에

모바일웹과 PC웹 애드센스 광고 설정을 따로 해줘야 했습니다.


그래서 하나의 광고는 포스팅작성 할 때마다 HTML편집기에서 광고코드를 삽입했고

하나의 광고는 블로그 스킨영역에 광고 코드를 삽입해서


2개의 광고를 상단에 배치 하였습니다.



또한 티스토리에서 제공하는 모바일 웹스킨을 사용하면

반 강제적으로 티스토리 추천글을 배치 해야했기 때문에


티스토리 추천글을 없애는 코드와 애드센스 코드를 서식에 등록시켜놓고 매번

글 작성 때 마다 본문에 삽입 시켜 줬습니다.


<style>#hottrendsContainer{display:none !important;}</style>

+ adsense code

반응형 웹 스킨을 사용하지 않는 티스토리 유저분들은 위 방식으로 광고를 배치 하시면 됩니다.


그러면 피시 화면에서는 상단의 2개의 애드센스 광고와

모바일에서는 본문에 삽입한 광고 1개가 보여지게 되었습니다.

티스토리 추천글도 없어지게 되구요.


블로그 스킨 영역에 광고 배치 할 때에는

<div style="float:left;margin:20px 10px 0px 30px;">

본인의 광고 코드

</div>


으로 div 속성을 지정해주면 손쉽게 위치 이동을 할 수있습니다.

margin 여백속성에 대한 자세한 정보는 아래 블로그에서 알 수 있습니다.

http://webdir.tistory.com/346


위방식을 사용하면 반응형 웹스킨이 아닌 스킨 형태에서

손쉽게 모바일과 PC 화면의 동시에 충족시키는 애드센스를 달 수 있습니다.


물론 위 방식의 단점은 존재합니다!


1. 스킨을 변경할 때 본문의 스타일이 깨 질 수 있다.

2, 광고크기 설정을 하지 못한다. (일일히 전부 다 들어가서 수정해줘야됨)

3. 서식 붙혀넣기를 잘못 할 경우 광고 위치가 제대로 나타나지 않을 수 있다.



그렇기 때문에 되도록이면! 반응형 웹스킨을 추천합니다.

최근에 티스토리도 공식적으로 반응형 웹스킨을 제공하고있고

수많은 뛰어난 웹개발자들이 무료로 반응형 웹스킨을 배포하는 곳도 많습니다!


부트스트랩 기반의 반응형 웹스킨을 사용하면



애드센스 코드를 각각의 해상도에 맞춰서

광고영역 노출이 가능합니다.


반응형 광고를 구현하는 경우가 아닌 애드센스 광고 코드 수정은 정책 위반.



반응형 광고 때문에 구형 익스플로러 ie6 ie7 ie8에서 광고가 3개이상 뜨는 것을 방지하기 위해서

display:none값을 사용 햇지만 타 경우는 광고코드에 사용해서는 안됩니다.

반응형 웹에서는 한쪽은 float:속성 또 다른 광고는 clear:속성과 함께 사용한다면 손쉽게 설치를 할 수 있습니다.


지금 제가 사용하고 있는 부트스트랩 기반의 마크쿼리 스켈레톤 3.0.5 스킨의

포스팅 본문 상단 2개의 광고 배치하는 코드 입니다.


CSS를 사용한 정를을 보고 새롭게 다시 올렸습니다!

필요하신분들은 사용해보세요.


CSS 가운데(중앙) 정렬


블로그 스킨.html 붙혀넣기


<div class="adsensemain">
	<div class="adsenseie7">
	     <!--애드센스 왼쪽-->
		<div class="adsenseleft">
                    <!--본인의 광고 코드를 붙혀넣기 영역1-->
		</div>

	<!--애드센스 가운데 여백조정-->			
		<div class="display-none hidden-xs hidden-sm hidden-md" style="float:left; margin: 40px;">
		</div>
		
	<!--애드센스 오른쪽-->	
        	<div class="adsenseright hidden-xs">	
                      <!--본인의 광고 코드를 붙혀넣기 영역2-->
	        </div>
	</div>
</div>

	<!-- 아래  를 찾아서 그위에 광고 2개를 배치하세요 --≷
	<div class="e-content post-content"></div>


를 찾아서 그 윗 부분에 붙혀 넣기를 하세요



블로그 style.css 붙혀 넣기


.adsensemain { text-align: center; }
.adsenseie7 { display: table; margin-left: auto; margin-right: auto; display: inline-block; }
.adsenseleft{
    float: left;
    margin-top: 0px;
}
.adsenseright{
    float: left;
    margin-top: 0px;
    margin-left: 0px;
}

웬만한 반응형 웹에서는 크게 수정없이 사용 가능할 것 같습니다.

본인의 블로그에 맞게 마진값을 추가하거나 수정하세요!!


기존에 모든 포스팅의 본문을 일일히 들어가서 기존 애드센스 코드를 수정 해주는 작업을 밤새한다고 ㅠ_ㅠ

정말 피곤하네요..


다시는 블로그 본문안에 특정 위젯이나 html 코드는 삽입 하지 않을 겁니다 ㅠ_ㅠ

밀어내기 위젯도 일일히 지운다고 고생했는데.


부트스트랩 테이블로 배치하는 방법도 있겠네요 한번 적용해보고 올려드리겠습니다.


를 찾아서 그 윗 부분에 붙혀 넣기를 하세요



블로그 style.css 붙혀 넣기


.adsensemain { text-align: center; }
.adsenseie7 { display: table; margin-left: auto; margin-right: auto; display: inline-block; }
.adsenseleft{
    float: left;
    margin-top: 0px;
}
.adsenseright{
    float: left;
    margin-top: 0px;
    margin-left: 0px;
}

웬만한 반응형 웹에서는 크게 수정없이 사용 가능할 것 같습니다.

본인의 블로그에 맞게 마진값을 추가하거나 수정하세요!!


기존에 모든 포스팅의 본문을 일일히 들어가서 기존 애드센스 코드를 수정 해주는 작업을 밤새한다고 ㅠ_ㅠ

정말 피곤하네요..


다시는 블로그 본문안에 특정 위젯이나 html 코드는 삽입 하지 않을 겁니다 ㅠ_ㅠ

밀어내기 위젯도 일일히 지운다고 고생했는데.


부트스트랩 테이블로 배치하는 방법도 있겠네요 한번 적용해보고 올려드리겠습니다.
댓글 , 엮인글
코코소프트
블로그 이미지 COCO Media 님의 블로그 링크추가
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바