티스토리에서 이미지광고 링크걸기(103 스킨)

티스토리에서 이미지광고 링크걸기(103 스킨)

아래의 이미처럼 상단에 자신이 광고하고 싶은 포스팅이나 웹사이트를 이미와 함께 소개할 수 있습니다. 위와 같이 하면 방법은 아래와 같습니다.

1. html 배너출력에 아래의 소스를 집어 넣습니다.

2. 소스

<style>

  .jb-ad-title > div { margin: 30px 0px 20px 0px; text-align: center; font-size: 1.2em; }

  .jb-ad-content { margin: 0px -5px; }

  .jb-ad-content > div { float: left; width: 25%; margin: 0px 0px 10px 0px; padding: 0px 5px; }

  .jb-ad-content img { border: 1px solid #dadada; }

  @media ( max-width: 767px ) {

    .jb-ad-content > div { width: 50%; }

  }

</style>

<div class="jb-ad-title">

  <div>빠른 자료실 이동하기!</div>

</div>

<div class="jb-ad-content">

  <div><a href="http://likasuni.tistory.com" target="_blank"><img src="http://tistory3.daumcdn.net/tistory/2642928/skin/images/AA.png" alt=""></a></div>

   <div><a href="http://likasuni2.tistory.com" target="_blank"><img src="https://tistory3.daumcdn.net/tistory/2642928/skin/images/WW.png" alt=""></a></div>

<div><a href="http://likasuni.tistory.com/category/%EB%AA%A8%EC%9D%98%EA%B3%A0%EC%82%AC%20%EC%9E%90%EB%A3%8C%EC%8B%A4" target="_blank"><img src="https://tistory3.daumcdn.net/tistory/2642928/skin/images/EE.png" alt=""></a></div>

<div><a href="http://likasuni.tistory.com/category/2015%EB%85%84%20%EA%B0%9C%EC%A0%95%282018%EB%85%84%20%EA%B3%A01%EC%A0%81%EC%9A%A9%29" target="_blank"><img src="https://tistory3.daumcdn.net/tistory/2642928/skin/images/TT.png" alt=""></a></div>

</div>

<div class="jb-clearfix"></div>

웹사이트 주소와 이미지 주소를 자신에 블로그에 맞게 적용하시면 됩니다.

사이드바 6번에 추가로 만들기

특징: 개수를 4개에서 2개로 줄임

.jb-ad-content > div { float: left; width: 25%; margin: 0px 0px 10px 0px; padding: 0px 5px; }

에서 25를 50으로 바꿔보세요.

주의할 점: 사드이바 3번은 그래로 놔두고 2번째 추가내용에 -1를 아래와 같이 추가해야 함

<style>

  .jb-ad-title-1 > div { margin: 0px 0px 0px 0px; text-align: center; font-size: 1.2em; }

  .jb-ad-content-1 { margin: 0px -5px; }

  .jb-ad-content-1 > div { float: left; width: 50%; margin: 0px 0px 10px 0px; padding: 0px 5px; }

  .jb-ad-content-1 img { border: 1px solid #dadada; }

  @media ( max-width: 767px ) {

    .jb-ad-content-1 > div { width: 50%; }

  }

</style>

<div class="jb-ad-title-1">

  <div></div>

</div>

<div class="jb-ad-content-1">

  <div><a href="http://likasuni.tistory.com/category/%EB%AA%A8%EC%9D%98%EA%B3%A0%EC%82%AC%20%EC%9E%90%EB%A3%8C%EC%8B%A4" target="_blank"><img src="https://tistory3.daumcdn.net/tistory/2642928/skin/images/EE.png" alt=""></a></div>

<div><a href="http://likasuni.tistory.com/category/2015%EB%85%84%20%EA%B0%9C%EC%A0%95%282018%EB%85%84%20%EA%B3%A01%EC%A0%81%EC%9A%A9%29" target="_blank"><img src="https://tistory3.daumcdn.net/tistory/2642928/skin/images/TT.png" alt=""></a></div>

</div>

<div class="jb-clearfix"></div>