'티스토리 TISTORY 사이드바 이미지 배너 적용하는 방법'
구글링을 통해 다양한 티스토리 블로그에 방문하다 보면 사이드바 공간을 활용하여 직접 만든 이미지 배너를 사용하는 것을 종종 볼 수 있는데요. HTML 배너를 통해 광고를 추가로 넣거나, 이미지 배너를 사용하여 용도에 따라 다른 사이트로 링크를 거는 방식을 통해 블로그의 활용도를 더 높일 수 있습니다.
그렇다면 사이드바에 직접 만든 이미지 배너를 적용하는 방법을 살펴보겠습니다.
***
필요한 것은 티스토리 사이드바가 있는 레이아웃이 적용되어있어야 하며, 이미지 배너에 적용할 이미지가 필요합니다.
(이때 이미지의 사이즈는 css를 통해 수정 가능하지만, css에 대해서 잘 모르는 경우 더 번거로울 수 있기 때문에 처음부터 250px +- 정도의 사이즈로 만드는 것이 좋습니다.)
1. 사용할 이미지 호스팅
이미지 배너에 사용할 이미지가 호스팅 되어 있어야 합니다. 쉽게 이야기하면 내가 사용할 이미지를 내 컴퓨터에서만 볼 수 있는 것이 아니라 인터넷에서 볼 수 있도록 서버에 올려 이미지에 연결하는 주소가 필요한 것인데요.
외부 이미지 호스팅 사이트를 이용하거나, 네이버 블로그를 이용하는 등의 방법이 있지만, 티스토리 HTML 편집 기능을 통해 이미지 링크를 쉽게 가져올 수 있습니다.
티스토리 관리자 -> 블로그 관리 -> 꾸미기 -> 스킨 편집 경로로 이동합니다.
html 편집으로 들어가면 '파일 업로드'를 볼 수 있는데요. 파일 업로드에서 컴퓨터에 있는 이미지를 추가합니다.
(이때 확장자는 png 보다는 웹에 최적화된 jpg를 사용하는 것이 좋습니다.)
이미지가 업로드되면 해당 이미지가 리스트에 나타나고 마우스 오른쪽 클릭을 통해 '링크 주소 복사'를 할 수 있게 됩니다.
이 링크 주소를 조금 뒤 이미지 URL으로 사용할 것이기 때문에 따로 복사해둡니다.
다음 과정으로 블로그 관리 -> 플러그인 경로에서 '배너 출력' 플러그인을 찾아서 활성화합니다.
2. 이미지 배너 사용 및 설정
'배너 출력' 플러그인을 활성화하면 '이미지 배너 출력', 'HTML 배너 출력' 두 가지 방법을 사용할 수 있게 되는데요.
쉽게 이미지에 링크 걸어 사용을 원할 경우 이미지 배너 출력을 배너 출력을 사용할 수 있고, 이미지가 아닌 다른 광고 코드나 html을 활용한 방식을 사용하고 싶을 때 HTML 배너 출력을 사용할 수 있습니다.
꾸미기 -> 사이드바 경로로 이동하면 '이미지 배너 출력'을 사용할 수 있는데요.
+ 버튼을 통해 이미지 배너를 추가하고 나면 배너 노출 위치 설정 및 편집을 통한 상세 설정을 할 수 있게 됩니다.
여기서 이미지 배너 이름을 설정하고, 이미지 URL에는 위에서 '파일 업로드 -> 링크 주소 복사' 한 주소를 넣어줍니다.
그리고 연결할 URL에는 실제 연동을 원하는 URL을 넣습니다.
변경 후 저장을 통해 이미지 배너가 적용되어 출력되는 것을 볼 수 있습니다.
* 추가
해당 이미지의 css를 수정하고 싶을 경우 class는 'module module_plugin'으로 지정됩니다.
.module_plugin a img {
display: block;
margin: 0 auto;
}html 편집 -> css 경로를 통해 해당 div 또는 하위 Element의 속성을 지정할 수 있습니다.
'IT Info' 카테고리의 다른 글
| 유튜브 자체 자막 업로드하는 방법(자동 동기화 기능 사용) (0) | 2022.07.23 |
|---|---|
| 애드센스 결제수단 추가하는 방법(+ 수수료 절약하는 방법) (0) | 2022.07.06 |
| mac 로블록스(Roblox) 설치 방법 및 실행 (0) | 2021.12.05 |
| 애드센스 '판매자 정보를 sellers.json 파일에 게시' 간단한 해결 방법 (0) | 2021.11.15 |
| 카카오페이 송금 취소하는 방법 (계좌 송금은 안됨) (0) | 2021.09.01 |