loading

브로콜리의 소소한 블로그

현재 티스토리 블로그는 더 이상 운영하고 있지 않으며, 워드프레스로 이사 중에 있습니다! 많이 놀러와주세요! https://brocoly.co.kr

 

이번에는 티스토리 블로그 사이드 바에 이미지 배너를 넣는 방법에 대해 알아보도록 하겠습니다. 애드센스 광고가 아니고서야 HTML 코드 입력이 아닌 대부분 별도의 이미지를 제작하여 사이드 바에 연동시키는 경우가 많습니다. 보통 본인이 운영하고 있는 다른 블로그나 기타 홈페이지 연동 목적으로 활용하기도 하는데요. 배너에 들어갈 이미지를 제작하는것 부터 사이드 바에 연동하는것 까지 보다 자세히 알아보도록 하겠습니다.

 

 

사이드 바에 들어갈 이미지 크기 파악하기

이미지를 제작하기 전에 가장 먼저하셔야 할 것은 사이드바에 들어갈 이미지의 크기를 파악하는 것입니다. 이는 각자 사용하시는 티스토리 스킨에 따라 다를 수 있습니다. 세로 픽셀 크기는 자유롭게 설정해주시면 되기 때문에 실제로는 가로 픽셀의 크기를 파악해주시면 됩니다. 제가 사용하는 '친효스킨'의 경우 가로 300 픽셀입니다.

 

가로 픽셀의 크기를 파악하는 방법은 HTML/CSS를 코드를 살펴보시면 파악이 가능할것 같기도한데, 저는 어떻게하는지 몰라서 Pick Pick이라는 캡처 프로그램으로 파악하였습니다. 살짝 노가다이기는 하지만 Pick Pick이라는 캡처 프로그램에서 [영역을 지정하여 캡처] 메뉴로 마우스 드래그를 하시면 사용자가 캡처를 하기 위해 지정한 영역의 크기가 표시됩니다.

 

 

배너로 사용할 이미지 제작하기

여러분들이 주로 사용하시는 이미지 편집 프로그램으로 배너에 들어갈 이미지를 제작해주시면 되겠습니다. 저는 포토샵을 활용했구요. 제가 현재 서브 블로그로 가끔씩 글을 게시하고 있는 네이버 블로그로 연동을 할거라 N 블로그 배너를 제작하였습니다. 너무 번잡하면 정신 사나워 보일 수 있으니 심플하게 제작하는게 좋겠죠?

 

 

이미지 URL 링크 만들기

이미지 URL 링크는 웬만하면 티스토리 블로그로 진행해주세요! N 블로그로 진행 및 연동할 경우 무슨 이유인지는 모르겠지만 사이드 바에 엑박(엑스박스)이 뜨네요. 아래의 내용들은 N 블로그에서 진행하는 작업으로 소개가 됐는데, 각자 여러분들의 티스토리 블로그에서 진행하시면 되겠습니다. 단순히 [이미지 URL] 링크를 만드는거니까요.

티스토리 블로그에서 배너 설치 작업을 하기 전에 먼저 해줘야 할 것이 있습니다. 바로 이미지를 출력해주는 [이미지 URL]을 만들어야 하는데요. 쉽게 말해 티스토리 블로그의 사이드바에서 이미지 형태로 출력될 수 있도록 이미지 저장 장소를 만드는거라고 생각하시면 되겠습니다. 보통은 블로그에 비공개글을 작성함으로써 링크를 생성하기도 하는데요. 저는 서브 블로그인 N 블로그를 통해 작업을 했습니다.

 

먼저, 각자 본인의 N 블로그로 접속을 하신 후에 프로필 소개란에서 [글쓰기] 버튼을 눌러주세요. 그리고 두번째 사진과 같이 블로그 운영자가 알아보기 쉽게 글 제목과 티스토리 사이드바에 올릴 이미지를 게시해주신 후 [비공개]로 발행을 해주시면 되겠습니다. 

 

그리고 위와 같이 [비공개] 처리되어 있는 것을 확인하신 후에 우측 상단의 [URL 복사] 버튼으로 해당 게시물의 링크 주소를 복사해주시면 됩니다. 복사하신 후에는 메모장에 옮겨두시거나, 티스토리 블로그에서 이미지 배너를 설치하기 직전에 복붙하셔서 사용하시면 되겠습니다.

 

 

티스토리 사이드바에 이미지 배너 설치하기

배너에 사용할 이미지를 얼추 제작하셨다면 이제 본격적으로 사이드 바에 배너를 넣는 작업을 진행해줍니다. [관리자-꾸미기-사이드바]로 들어가셔서 작업을 진행하시면 되며, 간단히 이미지가 업로드 되어 있는 링크와 연동 시킬 링크 주소를 입력해주기만 하면 되는거라 어렵지는 않으실겁니다.

 

사용하시는 스킨마다 배치가 다를 수도 있겠습니다만, (저의 기준) 좌측 상단에 있는 기본 모듈에서 [이미지 배너출력] 메뉴의 [+] 버튼을 클릭해주세요. 그러면 아래와 같이 우측의 [사이드바1] 쪽으로 새로운 모듈이 생겨난답니다.

 

그리고 새롭게 생성된 모듈에 마우스 포인터를 갖다 올리면 위 사진처럼 우측에 [편집]이라는 버튼이 생겨납니다. 저 버튼을 누르셔서 이미지 URL과 연동 시킬 홈페이지의 링크 주소를 입력해주시면 됩니다.

 

위와 같이 사이드바 모듈의 이름과 아까 복사해두셨던 이미지 URL, 그리고 연결할 URL(블로그 주소)를 입력하신 후에 [확인] 버튼을 누르시면 됩니다.

 

마지막으로 이제 막 생성한 이미지 링크 모듈을 드래그하여 본인이 원하는 위치에 세팅을하신 후, [변경사항 저장]을 클릭하셔서 모든 작업을 마무리하시면 되겠습니다. 좀 애매하다 싶으면 [미리보기]를 통해 위치를 봐가면서 세팅하는 것도 나쁘지 않겠죠? 여기까지 하시면 모든 이미지 배너 설치 작업이 마무리가 된답니다. 정말 쉽죠~?ㅎㅎ

 

 

글을 마치며

어제부터 갑작스럽게 날씨가 추워지기 시작했습니다. 비가 내리더니 급격하게 추워졌네요. 모두 건강 조심하시고 코로나19도 조심하시기 바랍니다! 조금이나마 도움되셨길 바랍니다. 긴 글 읽어주셔서 감사합니다. 끝!!

 

 

 

 

 

구독좋아요는 저에게 큰 힘이 됩니다!;)

오늘도 멋지고 행복한 하루 되세요.

공유하기

facebook twitter kakaoTalk kakaostory naver band