본문 바로가기
기타

애드센스 본문 오른쪽 상단, 하단, 사이드바 배치하기

준티 2016. 7. 12. 02:06

"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.

근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ

본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)

오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.

만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ



본문 오른쪽 상단 배치

아래와 같이 배치하는 방법입니다.

일단 티스토리 HTML/CSS 편집창에 들어간 뒤, 

"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.

근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ

본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)

오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.

만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ



본문 오른쪽 상단 배치

아래와 같이 배치하는 방법입니다.

일단 티스토리 HTML/CSS 편집창에 들어간 뒤,  를 찾습니다. 이는 본문 내용을 의미합니다.


그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.

<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	

</div>



본문 하단 배치

본문 하단 배치는 그냥 간단하게  아래에 광고 코드를 넣고 스타일을 잡는 것 외에

문제되는 사항이 있습니다.

사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.

<div class="article">

	

	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>

이렇게 그냥 본문 아래에 광고를 삽입했을 경우

이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.


좀 보기가 별로라서.. 이 광고를 

이와 같이 공감 버튼 위까지 올려보겠습니다.


먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->

위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.

jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.


그리고 본문이 있는  주변으로 아래와 같이 작성합니다.

<div class="article">

	
	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>

아래 하단 광고 넣고

<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.

선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.

daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,

daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,

another_category는 카테고리의 다른 글 리스트를 의미합니다.


각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.

보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.

이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ



오른쪽 사이드 배치

사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.

관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.

왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.

HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.

오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.

이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.

HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ


잘 사용하시기를 ~ !

감사합니다.

를 찾습니다. 이는 본문 내용을 의미합니다.


그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.

<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	





            



            
"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.
근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ
본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)
오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.
만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ


본문 오른쪽 상단 배치
아래와 같이 배치하는 방법입니다.
일단 티스토리 HTML/CSS 편집창에 들어간 뒤,  를 찾습니다. 이는 본문 내용을 의미합니다.

그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.


<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	

</div>


본문 하단 배치
본문 하단 배치는 그냥 간단하게  아래에 광고 코드를 넣고 스타일을 잡는 것 외에
문제되는 사항이 있습니다.
사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.


<div class="article">

	

	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>
이렇게 그냥 본문 아래에 광고를 삽입했을 경우
이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.

좀 보기가 별로라서.. 이 광고를 
이와 같이 공감 버튼 위까지 올려보겠습니다.

먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->
위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.
jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.

그리고 본문이 있는  주변으로 아래와 같이 작성합니다.


<div class="article">

	
	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>
 아래 하단 광고 넣고
<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.
선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.
daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,
daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,
another_category는 카테고리의 다른 글 리스트를 의미합니다.

각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.
보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.
이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ


오른쪽 사이드 배치
사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.
관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.
왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.
HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.
오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.
이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.
HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ

잘 사용하시기를 ~ !
감사합니다.

            





</div>



본문 하단 배치

본문 하단 배치는 그냥 간단하게 

"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.

근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ

본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)

오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.

만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ



본문 오른쪽 상단 배치

아래와 같이 배치하는 방법입니다.

일단 티스토리 HTML/CSS 편집창에 들어간 뒤,  를 찾습니다. 이는 본문 내용을 의미합니다.


그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.

<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	

</div>



본문 하단 배치

본문 하단 배치는 그냥 간단하게  아래에 광고 코드를 넣고 스타일을 잡는 것 외에

문제되는 사항이 있습니다.

사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.

<div class="article">

	

	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>

이렇게 그냥 본문 아래에 광고를 삽입했을 경우

이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.


좀 보기가 별로라서.. 이 광고를 

이와 같이 공감 버튼 위까지 올려보겠습니다.


먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->

위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.

jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.


그리고 본문이 있는  주변으로 아래와 같이 작성합니다.

<div class="article">

	
	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>

아래 하단 광고 넣고

<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.

선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.

daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,

daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,

another_category는 카테고리의 다른 글 리스트를 의미합니다.


각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.

보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.

이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ



오른쪽 사이드 배치

사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.

관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.

왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.

HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.

오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.

이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.

HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ


잘 사용하시기를 ~ !

감사합니다.

아래에 광고 코드를 넣고 스타일을 잡는 것 외에

문제되는 사항이 있습니다.

사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.

<div class="article">

	





            



            
"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.
근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ
본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)
오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.
만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ


본문 오른쪽 상단 배치
아래와 같이 배치하는 방법입니다.
일단 티스토리 HTML/CSS 편집창에 들어간 뒤,  를 찾습니다. 이는 본문 내용을 의미합니다.

그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.


<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	

</div>


본문 하단 배치
본문 하단 배치는 그냥 간단하게  아래에 광고 코드를 넣고 스타일을 잡는 것 외에
문제되는 사항이 있습니다.
사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.


<div class="article">

	

	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>
이렇게 그냥 본문 아래에 광고를 삽입했을 경우
이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.

좀 보기가 별로라서.. 이 광고를 
이와 같이 공감 버튼 위까지 올려보겠습니다.

먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->
위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.
jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.

그리고 본문이 있는  주변으로 아래와 같이 작성합니다.


<div class="article">

	
	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>
 아래 하단 광고 넣고
<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.
선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.
daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,
daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,
another_category는 카테고리의 다른 글 리스트를 의미합니다.

각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.
보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.
이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ


오른쪽 사이드 배치
사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.
관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.
왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.
HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.
오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.
이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.
HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ

잘 사용하시기를 ~ !
감사합니다.

            





	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>

이렇게 그냥 본문 아래에 광고를 삽입했을 경우

이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.


좀 보기가 별로라서.. 이 광고를 

이와 같이 공감 버튼 위까지 올려보겠습니다.


먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->

위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.

jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.


그리고 본문이 있는 

"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.

근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ

본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)

오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.

만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ



본문 오른쪽 상단 배치

아래와 같이 배치하는 방법입니다.

일단 티스토리 HTML/CSS 편집창에 들어간 뒤,  를 찾습니다. 이는 본문 내용을 의미합니다.


그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.

<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	

</div>



본문 하단 배치

본문 하단 배치는 그냥 간단하게  아래에 광고 코드를 넣고 스타일을 잡는 것 외에

문제되는 사항이 있습니다.

사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.

<div class="article">

	

	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>

이렇게 그냥 본문 아래에 광고를 삽입했을 경우

이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.


좀 보기가 별로라서.. 이 광고를 

이와 같이 공감 버튼 위까지 올려보겠습니다.


먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->

위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.

jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.


그리고 본문이 있는  주변으로 아래와 같이 작성합니다.

<div class="article">

	
	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>

아래 하단 광고 넣고

<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.

선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.

daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,

daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,

another_category는 카테고리의 다른 글 리스트를 의미합니다.


각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.

보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.

이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ



오른쪽 사이드 배치

사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.

관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.

왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.

HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.

오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.

이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.

HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ


잘 사용하시기를 ~ !

감사합니다.

주변으로 아래와 같이 작성합니다.

<div class="article">

	





            



            
"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.
근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ
본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)
오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.
만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ


본문 오른쪽 상단 배치
아래와 같이 배치하는 방법입니다.
일단 티스토리 HTML/CSS 편집창에 들어간 뒤,  를 찾습니다. 이는 본문 내용을 의미합니다.

그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.


<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	

</div>


본문 하단 배치
본문 하단 배치는 그냥 간단하게  아래에 광고 코드를 넣고 스타일을 잡는 것 외에
문제되는 사항이 있습니다.
사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.


<div class="article">

	

	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>
이렇게 그냥 본문 아래에 광고를 삽입했을 경우
이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.

좀 보기가 별로라서.. 이 광고를 
이와 같이 공감 버튼 위까지 올려보겠습니다.

먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->
위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.
jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.

그리고 본문이 있는  주변으로 아래와 같이 작성합니다.


<div class="article">

	
	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>
 아래 하단 광고 넣고
<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.
선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.
daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,
daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,
another_category는 카테고리의 다른 글 리스트를 의미합니다.

각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.
보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.
이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ


오른쪽 사이드 배치
사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.
관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.
왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.
HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.
오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.
이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.
HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ

잘 사용하시기를 ~ !
감사합니다.

            




	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>

"국내에선 닥치고 본문 상단에 광고 2개" 라는 글을 읽고 본문 상단에 336x280 광고 2개를 나란히 배치했습니다.

근데 오늘 갑자기 디자인이 좀 별로다.. 싶어서 바꿔봤습니다. 사실상 수익도 거의 안나기도 했고요 ㅎㅎ

본문 상단에 하나, 본문 하단에 하나를 배치하고, (336x280 2개를 그대로 사용했습니다.)

오른쪽 사이드에 300x600하나 배치하는 방식으로 변경했습니다.

만들고 보니 유용한거 같아서~~ 공유할게요 별건 아니지만. ㅋㅋ



본문 오른쪽 상단 배치

아래와 같이 배치하는 방법입니다.

일단 티스토리 HTML/CSS 편집창에 들어간 뒤,  를 찾습니다. 이는 본문 내용을 의미합니다.


그리곤 아래와 같이 넣어주시면 됩니다. 본문 오른쪽 상단은 간단합니다.

<div class="article">
	
        <div style="float:right; margin:20px 0 5px 20px;">
		<!-- 본문 오른쪽 상단 광고 코드 -->
	</div>
	<br/>

	

</div>



본문 하단 배치

본문 하단 배치는 그냥 간단하게  아래에 광고 코드를 넣고 스타일을 잡는 것 외에

문제되는 사항이 있습니다.

사용하는 플러그인 중 카테고리 글 더보기 라는 플러그인이 있을 경우 아래와 같은 현상이 발생합니다.

<div class="article">

	

	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>

</div>

이렇게 그냥 본문 아래에 광고를 삽입했을 경우

이렇게 나타납니다.. 카테고리의 다른 글 아래로 광고가 들어가버립니다.


좀 보기가 별로라서.. 이 광고를 

이와 같이 공감 버튼 위까지 올려보겠습니다.


먼저 HTML/CSS 편집창에 들어가서, 상단 <head>태그 안에 아래와 같이 넣어줍니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	
<!-- 태그 재배치 -->
<script type="text/javascript">
function getElementForAd(selector){
    var classse = new Array();
	  classes = $("."+selector);
	
	  for(i=0; i<classes.length; i++){
			if(classes[i].id.indexOf("relocation")==-1){
				var result = classes[i].innerHTML;
      	classes[i].style.display = "none";
			}
		}
	
	  return result;
}
</script>
<!-- 태그 재배치 끝 -->

위치는 어디에 넣든 상관없습니다 ㅎㅎ 전 <title> 아래에 넣었습니다.

jquery를 사용하도록 상단에 선언하고, 태그를 재배치해주는 함수를 정의했습니다.


그리고 본문이 있는  주변으로 아래와 같이 작성합니다.

<div class="article">

	
	
	<div style="margin:0px auto; width:336px; margin-bottom:15px;">
		<!-- 본문 하단 광고 코드 -->
	</div>
							
	<!-- 태그 재배치(하단 광고) -->
	<div id="relocation1" class="daum_like_wrapper">
	</div>					
	<div id="relocation2" style="width:100%;margin-top:30px;clear:both;height:30px">
	</div>								
	<div id="relocation3" class="another_category another_category_color_gray">
	</div>
	<script type="text/javascript">
	var ref_source1 = getElementForAd("daum_like_wrapper");
	var ref_source2 = getElementForAd("daum_like_wrapper + div")
	var ref_source3 = getElementForAd("another_category");
	document.getElementById("relocation1").innerHTML = document.getElementById("relocation1").innerHTML + ref_source1;
		
	document.getElementById("relocation2").innerHTML = document.getElementById("relocation2").innerHTML + ref_source2;	
		
	document.getElementById("relocation3").innerHTML = document.getElementById("relocation3").innerHTML + ref_source3;
	</script>
	<!-- 끝 -->
							
</div>

아래 하단 광고 넣고

<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.

선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.

daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,

daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,

another_category는 카테고리의 다른 글 리스트를 의미합니다.


각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.

보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.

이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ



오른쪽 사이드 배치

사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.

관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.

왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.

HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.

오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.

이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.

HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ


잘 사용하시기를 ~ !

감사합니다.

아래 하단 광고 넣고

<!-- 태그 재배치(하단 광고) --> 부터 <!-- 끝 --> 까지를 위와 같이 복사해주면 됩니다.

선택자를 인자로 하여 위에서 정의한 getElementForAd 함수를 호출하여 값을 얻고, 재배치 해주는 코드입니다.

daum_like_wrapper 선택자는 공감 버튼이 있는 div 영역을 의미하고,

daum_like_wrapper + div 는 공감 버튼 바로 뒤에 있는 형제 div를 의미하고,

another_category는 카테고리의 다른 글 리스트를 의미합니다.


각각 선택자 내의 값들을 innerHTML로 읽어서 위의 relocation의 이름이 적용된 div 태그에 다시 innerHTML로 써준겁니다.

보여지는 게시글이 1개 이상일 경우 다 꺠져서 적용이 되지 않습니다.

이 참에 블로그 메인에 여러개의 글이 나오는 대신 티에디션으로 한번 꾸며보시는 것도? ㅋㅋ



오른쪽 사이드 배치

사이드바는 플러그인을 사용하여 간단하게 추가할 수 있습니다.

관리페이지에서 플러그인 설정을 가신 후 아래와 같이 배너출력 플러그인을 사용체크 합니다.

왼쪽 메뉴에서 사이드바 메뉴를 클릭합니다.

HTML 배너출력이라는 사이드바가 추가되었음을 보실 수 있습니다.

오른쪽은 우리가 사용하는 사이드바이고요.. 왼쪽에서 플러스 버튼을 누르면 오른쪽 사이드바에 추가됩니다.

이후 편집 버튼을 누르면 아래와 같은 창이 뜨게 됩니다.

HTML 소스라는 부분에 애드센스 코드를 넣고 확인, 저장하시면 됩니다. 굉장히 간단하네요.ㅋㅋ


잘 사용하시기를 ~ !

감사합니다.

저작자표시

'기타' 카테고리의 다른 글

Burp Suite 사용법  (0) 2016.08.12
이클립스 구동 시 Initializing java tooling 발생  (1) 2016.07.19
아스키코드표  (0) 2016.07.02
윈도우에서 jar 파일 실행하기  (0) 2016.07.01
크롬 확장 프로그램 HTTP Headers  (0) 2016.06.13

'기타' Related Articles

티스토리툴바