본문 바로가기

주요관심사/블로그 수익모델

html 태그 이미지 클릭시 링크 새창으로 여는 방법, 쿠팡파트너스 꿀팁

반응형

네이버 블로그가 아닌 티스토리 블로그를 운영 중이라면, html 태그에 관한 기본적인 것들을 배워놓으면 상당히 유용합니다. html 태그도 상당히 종류가 많은데, 오늘 소개해드리는 것은 가장 기본 중의 기본인 이미지 링크 만들기입니다. 티스토리 포스팅할 때는 이미지 링크를 만드는 기능이 잘 되어있기 때문에 굳이 html 태그까지 알아야 할 필요는 없지만, 제 블로그처럼 사이드바가 있는 블로그라면 사이드바에 배너를 만들 때 꼭 알아야 하는 html 태그입니다.

 

특히 쿠팡 파트너스와 같은 제휴 프로그램을 하고 있다면 상당히 유용한 꿀팁이 될거라 의심치 않습니다.

 

 

위 이미지는 html 태그의 예시일뿐 본문과는 관련이 없습니다.

 


" 이미지 클릭시 링크 이동하게 만드는 html 태그 "


 

사진을 클릭할 경우 다른 곳으로 이동하게 만드는 html 태그는 의외로 간단합니다. 그리고 크게 두가지로 나누어 볼 수 있는데요. 이미지를 클릭 시 현재 창에서 다른 사이트로 이동하는 방법과 새창을 열어서 다른 사이트를 여는 방법이 있습니다.

 

그런데, 블로그 운영자라면 현재창이 아닌 새창을 열어서 다른 사이트로 이동하게 만들어 주는 것이 좋습니다. 내 블로그 체류시간을 증가시키고 이탈율을 막기 위해서죠. 우선 두가지 방법을 모두 소개해드릴게요.

 

 

1. 이미지 클릭시 현재창에서 링크를 여는 방법

 

어떤 식으로 동작하는지 궁금하다면 아래 이미지를 클릭해보세요. 현재 창에서 링크로 이동하므로 포스팅을 계속 읽고싶다면, 뒤로가기 버튼(←)을 눌러 꼭 되돌아오시기 바랍니다.

 

 

현재창에서 링크된 사이트로 이동하게 만드는 html 태그는 다음과 같습니다.

 

<a href="링크 주소"><img src="이미지 경로"></a>

 

예를 들어 쿠팡 파트너스 관련 배너를 만들고 싶다면, 다음과 같은 순서로 진행하면 됩니다.

1. 배너 이미지를 만들어 블로그에 포스팅합니다. 포스팅 발행시 비공개로 해도 됩니다.

2. 비공개로 포스팅한 글에서 배너 이미지에 마우스 오른쪽 버튼을 클릭이미지 주소를 복사합니다. 

3. 쿠팡 파트너스 사이트에서 이동하고 싶은 곳의 간편 링크를 생성합니다.

4. 아래와 같이 적용하면 됩니다.

 

<a href="쿠팡 간편 링크"><img src="배너 이미지 주소"></a>

 

 

2. 이미지 클릭시 새창으로 열리게 만드는 방법

 

아래 이미지 클릭시 현재창이 아닌 새창으로 링크가 열립니다.

 

첫번째 방법을 잘 따라했다면 이번에는 더욱 쉽습니다.

 

<a href="링크 주소" target = "_blank"><img src="이미지 경로"></a>

 

첫번째 방법에서 ' target = "_blank"'만 추가해주면 되니까요. 간단하죠?

티스토리 사이드바에 배너를 올리고 싶다면, 위와 같이 적용해보세요! 생각보다 쉽습니다. 카테고리 "블로그 수익모델에서" 티스토리 블로그에 관련된 다양한 꿀팁들도 확인해보세요.

 

300x250