본문 바로가기
블로그 BOX/블로그 팁

[티스토리]제작한 배너 사이드바에 넣기

by 쿨펀치 2012. 1. 10.
반응형

제작한 배너 사이드바에 넣기


[티스토리]제작한 배너 사이드바에 넣기

오늘은 티스토리 블로그에 배너 넣는 법에 대해 알아보도록 하겠습니다.
물론 일반 적인 광고 배너의 경우 관리자 모드의 사이드바에서 이미지 배너 출력HTML 배너 출력을 이용 하면 된다고 하실거예요. ^^
 
맞는 말이죠. 위 두 가지 방법을 이용 한다면 이미 광고회사의 만들어진 배너는 충분히 쉽게 넣기를 할 수 있습니다. 
하지만 자신이 직접 만든 배너의 경우 어떻게 이미지를 적용 할 것이면 클릭 했을 때 링크를 어떻게 할지, 또는 배너 광고의 크기 까지
HTML 을 모르시는 분들에겐 힘든 부분이 될 수 밖에 없습니다. 

이번 시간엔 자신이 만든 배너의 사이드바에 넣고 제어 하는 방법에 대해 알아보는 시간을 가져 보겠습니다.



 


 

 제작한 배너 사이드바에 넣기

[티스토리]제작한 배너 사이드바에 넣기를 하기에 앞서
제작된 배너 이미지가 있어야 하겠죠. ㅎㅎ

제작한 배너 사이드바에 넣기

이번 제작한 배너 사이드바에 넣기 테스트 이미지 입니다.  가로 x 세로 200 x 100 픽셀 이미지 입니다.

테스트하실 이미지가 준비 되셨다면. 이제는 HTML 소스에 대해 조금 공부 해봅시다.

제작한 배너 사이드바에 넣기


바로가기 사이트 주소 : 배너 클릭시 새 창으로 뜰 URL주소를 넣어 주시면 됩니다.
이미지 가로 사이즈 &  세로 사이즈 :  준비된 배너 광고의 가로 세로 이미지 사이즈를 적어주시면 됩니다.
이미지 주소 : 준비된 배너의 이미지의 URL 주소를 넣어 주시면 됩니다.




쿨펀치가 준비한 이미지로 테스트 해보겠습니다.

제작한 배너 사이드바에 넣기


이미지와 HTML 배너 소스의 준비가 완료 되었습니다. 

이제 부터 본격적인 배너 삽입 과정입니다.


티스토리 배너 삽입하기

티스토리 관리자 모드에 접속 해주세요.

제작한 배너 사이드바에 넣기


관리자 모드의 사이드바 클릭.

제작한 배너 사이드바에 넣기


1. HTML 배너 출력 + 클릭 추가 해주세요.
2. 사이드바1에 HTML 배너 출력이 추가 된 것을 확인 할 수 있습니다. 편집 클릭 해주세요.

제작한 배너 사이드바에 넣기

 

1. 사이드바 메뉴를 구별 하는 이름입니다.  관리자모드에서만 보이는 이름입니다.
2. HTML 소스 위에서 만들어 둔 소스를 입력 해주세요.
마지막으로 확인을 클릭 하세요.

참고 : 위 HTML 소스 입력 과정이 끝이 났다면.  저장을 하지 마시고 미리보기를 통해서 이상이 없는지 확인하세요. 
잘못된 HTML 소스 입력으로 스킨 자체가 깨지는 경우가 있기 때문에 미리보기를 생활화 해주시면 됩니다.


제작한 배너 사이드바에 넣기

 

 

제작한 배너 사이드바에 넣기

제작된 배너 사이드바에 넣기가 완료된 후
변경전 이미지와 변경후 이미지 차이점을 확인 할 수 있습니다. 
자신이 만든 배너를 넣을 수 있습니다. 

JPG, PNG, GIF 삽입이 가능 했습니다.  다른 파일들은 제가 테스트 해보질 못했습니다. ^^;  
GIF 애니메이션 배너를 만들어 삽입 한다면 광고 효과를 극대화 시킬 수 있는 방법이 될 수 있습니다. 

쿨펀치의 세상리뷰의 포스팅 글이 도움이 되셨나요? 
전 요즘 블로그 하면서 알고 있던 사실과 모르고 있던 사실들을 공부 할 수 있어서 자기 발전에 큰 도움이 되는 것 같습니다.
ㅎㅎ 그럼 쿨펀치 많이 사랑해 주시구요.  구독 신청과 친구 추가 많이 부탁 드려요.


쿨펀치의 세상리뷰 는 여러분의 소중한 댓글과 VIEW ON 클릭 구독 클릭이 큰힘이되어.
더 좋은 블로그를 만들 수 있게 하는 원동력이 됩니다.  

제작한 배너 사이드바에 넣기

반응형

댓글