사이드바 html로 이미지 링크 배너 넣기

티스토리 사이드바 등 사이트에 html로 이미지 링크 배너 넣는 간단한 방법입니다.
티스토리 블로그를 예시로 들겠습니다.

HTML 이미지 링크 배너 만들기

배너 이미지 제작 및 업로드

1. 자신의 사이트 사이드에 어울리는 크기(비율)로 미리캔버스 또는 별도의 이미지 편집툴로 이미지(배너)를 제작합니다.
2. 제작한 배너를 블로그에 업로드 한 후 비공개로 발행을 합니다.
3. 배너에 우클릭 하여 [이미지 주소 복사]를 합니다.

HTML 작성

1. 메모장에 복사한 배너 이미지 주소를 입력해 놓고 그 배너를 클릭하였을 때 이동할 사이트 주소 또한 입력하여 놓습니다.
2. 다음 HTML을 복사하고 각각에 해당 주소와 텍스트를 입력합니다.

<a href=”이동할 사이트 주소 입력” target=”_blank”>
<img src=”복사한 배너 이미지 주소 입력” alt=”이미지 타이틀 텍스트로 입력” height=”auto” width=”100%” align=”center” >
</a>

[HTML 설명]

• target=”_blank” 는 배너 클릭 시 새창으로 열기 입니다. (_blank를 _self로 변경 시 현재 창에서 열립니다.)
• alt=”이미지 타이틀 텍스트로”는 순간적 또는 오류 등으로 이미지가 표현되지 않을 때 나타나는 대체 텍스트로 간략하게 적어주면 됩니다.
• height=”auto” width=”100%” align=”center”는 높이 “자동”, 넓이 “할당 범위에서 100%”, 이미지 위치는 “중앙”에 하라는 설정 값입니다.
• 크기는 맞게 응용 가능합니다.

HTML 블로그 등록

1. 티스토리 > 관리 > 꾸미기 > 사이드바로 이동합니다.
2. 기본 모듈에서 [플러그인] HTML 배너출력를 + 하여 원하는 사이드바 위치에 등록을 합니다.
3. 편집을 눌러 메모장에 입력해 놓은 HTML을 기입하고 저장을 합니다.
4. 블로그로 가서 표시와 링크가 올바른지 확인하면 됩니다.
5. 크기를 변경하고 싶을 때에는 위의 HTML 높이와 넓이를 숫자로 입력하면 해당 값으로 변경되어 표시 됩니다.

기타

• 사이드바 크기를 정확히 알고 있을 때에는 그에 맞게 이미지 제작 후 [플러그인]이미지 배너 출력을 선택하면 이미지 주소와 링크 될 주소만 입력하면 바로 출력 됩니다.

---