블로그꾸미기::티스토리 본문 상단/하단/좌우 광고 삽입하기

Blog 꾸미기

 

티스토리 본문 광고 삽입 방법

 

 

 

 

본문 상단에 양쪽으로 정렬 [예제1]

[ ##_article_rep_desc_## ]을 찾아 상단에 아래 소스 입력하고 <!-- 광고 코드 삽입 -->문구 아래 본인의 애드센스나 리더스타임 광고 코드를 입력하면 된다.

 

<table wdith="100%" align="center" cellspacing="0" cellpadding="5" table="">
<tbody>
<tr>
<td width="50%" align="center" style="magin:15px; padding:15px;">
<!-- 광고 코드 삽입-->

</td>
<td width="50%" align="center" style="magin:15px; padding:15px;">
<!-- 광고 코드 삽입-->

</td>
</tr>
</tbody>
</table>

[ ##_article_rep_desc_## ]

 

magin과 padding의 값은 사용자의 값으로 조정하면 위치가 조정 된다.

 

 

본문 상단에 양쪽으로 정렬 [예제2]

[ ##_article_rep_desc_## ]을 찾아 상단에 아래 소스 입력하고 <!-- 광고 코드 삽입 -->문구 아래 본인의 애드센스나 리더스타임 광고 코드를 입력하면 된다.

 

<div style="margin:15px 0px 0px 0px; padding: 0px;">
<ul style="margin: 0px; padding: 0px; overflow: hidden;">
<li style="list-style: none; padding: 15px 0px 10px; border: 1px solid; border-image: none; border-radius: 5px; width: 49.5%; text-align: center; float: left;">
<!-- 광고 코드 삽입 -->

</li>
<li style="list-style: none; padding: 15px 0px 10px; border: 1px solid; border-image: none; border-radius: 5px; width: 49.5%; text-align: center; float: right;">
<!-- 광고 코드 삽입 -->

</li>
</ul>
</div>

[ ##_article_rep_desc_## ]

 

 

본문 하단에 양쪽으로 정렬 [예제]

[ ##_article_rep_desc_## ]을 찾아 하단에 아래와 같이 소스를 입력하면 된다.

 

[ ##_article_rep_desc_## ]

<div style="margin:15px 0px 0px 0px; padding: 0px;">
<ul style="margin: 0px; padding: 0px; overflow: hidden;">
<li style="list-style: none; padding: 15px 0px 10px; border: 1px solid; border-image: none; border-radius: 5px; width: 49.5%; text-align: center; float: left;">
<!-- 광고 코드 삽입 -->

</li>
<li style="list-style: none; padding: 15px 0px 10px; border: 1px solid; border-image: none; border-radius: 5px; width: 49.5%; text-align: center; float: right;">
<!-- 광고 코드 삽입 -->

</li>
</ul>
</div>

 

 

상단에 좌측이나 우측에 하나를 넣는 방법 [예제1]

[ ##_article_rep_desc_## ]을 찾아 상단에 아래와 같이 소스를 입력하면 된다.

 

<p style="text-align:justify;">

<div style="float:right; margin: 10px;">
<!-- 광고 코드 삽입 -->

</div>

[ ##_article_rep_desc_## ]

 

속성을 좀 살펴보면 "float:right"로 입력시 광고는 오른쪽에 위치하고, left로 입력시 광고는 왼쪽에 위치한다.

추가로 광고에 테두리를 넣고 싶다면 아래와 같이 코드를 넣으면 된다. 여기서 2px는 테두리의 두께를 설정한 것인데 상하좌우 선택적으로 입력이 가능하다. solid는 테두리 선의 형태를 설정한 것이며, #cccccc는 색상 설정으로 색상코드는 rgb 등으로도 설정이 가능하며 투명은 transparent로 입력하면 된다. 마지막으로 광고의 테투리의 여백을 안과 밖으로 설정할 수 있는데 안쪽 여백은 padding 코드를 넣어 값을 주고 바깥쪽 여백은 margin 코드를 넣어 값을 주면 된다. padding과 margin 모두 상하좌우로 값을 설정 할 수 있다.

 

 

상단에 좌측이나 우측에 하나를 넣는 방법 [예제2]

 

<div style="float:left; border: 2px solid #ccc; padding: 2px; margin: 0 0 5px 5px;">
<!-- 광고 코드 삽입 -->

</div>

[ ##_article_rep_desc_## ]

 

광고를 삽입하는데는 여러가지 방법과 코드가 존재하므로 원하는 소스를 찾아 블로그 이미지에 적합하게 꾸미면 되겠다.

그리고 생성 광고의 사이즈에 따라 광고틀을 리사이징해서  적용하면 되니 그렇게 어려운 작업은 아닌듯 하다.