본문 바로가기

IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포

[블로그팁]블로거머니 배너달기 이벤트 소개 & 배너적용 방법

<티스토리 블로그팁: 블로거머니 배너 배포이벤트, 배너달기 이벤트 소개 및 블로그에 배너 깔끔하게 정리하는 방법>


오늘은 블로거들이 커뮤니티인 블로거머니(링크)의 배너달기 이벤트를 소개할까 합니다.
그리고 더불어 블로그에 배너를 적용하는 방법도 함께 설명을 드릴까 하는데요.

우선 블로거머니에서 진행중인 배너달기 이벤트에 대해 간략하게 소개를 해볼게요.



블로거머니 배너달기 이벤트

이벤트의 내용은 제가 텍스트로 설명하는 것보다 이벤트 페이지에 이미지로 깔끔하게 설명되어 있어서 그대로 소개합니다.
참여기준이나 방법은 그리 어렵지 않으니 가벼운 마음으로 참여하셔도 좋을 듯 합니다.

이벤트 페이지 바로가기



블로그에 배너적용 방법

블로그에 배너를 달기위한 방법은 여러가지가 있습니다.
스킨의 html파일을 직접 수정하는 방법, 포스팅을 할 때마다 본문에 삽입하는 방법, 사이드바에 html배너출력을 적용하는 방법, 사이드바 이미지배너출력을 적용하는 방법 등등....

저는 이 중 사이드바에 html배너출력 모듈로 배너를 적용해보겠습니다.



사이드바 html배너출력 모듈

글로 장황하게 늘어 놓는 것보다 그림으로 설명하는게 빠르겠죠?

관리자페이지 -> 사이드바 로 이동하시면 보실 수 있는 화면이구요.
표시된 부분의 html 배너출력 모듈드래그 해서 원하는 위치에 넣어주시면 됩니다.


그리고 편집버튼을 클릭하면 위와 같이 html태그를 입력할 수 있는 창이 뜨게 됩니다.


우선 제 블로그배너로 테스트를 해봤습니다. 배너를 적용하고 나서 적용된 것을 확인했더니 뭔가 어설프고 썰렁한 느낌이 드네요... 쬐끔 수정을 해보겠습니다.




위의 소스는 가장 기본적인 소스인데요. 앞 부분은 이미지에 링크될 주소, 뒷 부분은 이미지주소로 나타내게 됩니다.



배너링크 세부설정

사이드바에 적용된 다른 모듈처럼 'Banner Link: Blog'라는 이름을 붙여줬습니다.
그리고 이름과 아래 항목간에 여백이 필요해서 margin을 적용했습니다.

Banner Link: Blog



위에 적용된 소스는 조금 복잡하죠? 차근차근 설명을 드려볼게요.
우선 margin이 뭔지는 어제의 포스트(포스트 링크)를 참고하시면 조금 이해가 되실겁니다.
제목과의 여백을 설정하기 위해 테이블태그를 사용했구요. 외부 여백이기 때문에 margin을 적용했습니다.


추가로 커뮤니티 배너까지 적용한 모습입니다.
그런데 왼쪽에 보시는 것처럼 블로거머니와 재아넷의 배너의 사이가 너무 붙어 있어서 여백을 주고 싶었습니다.
그래서 위에 보시는 것처럼 내부 여백 padding을 적용했습니다. 역시 margin과 padding을 비교한 포스팅을 참고하세요.

위 배너의 소스는 아래와 같습니다.

Banner Link: Community



테이블에 적용된 태그소스의 경우는 나중에 테이블에 대한 포스팅에서 자세히 설명 드릴게요..

마지막으로 블로거머니와 재아넷의 배너 기본 소스를 아래에 소개합니다. 필요하시면 복사해서 사용하세요~!!

블로거머니 배너 소스(150X60)


재아넷 배너 소스(130X30) - 재아넷 회원


재아넷 배너 소스(130X30) - 비회원



블로거머니의 배너 달기 이벤트는 내일까지 진행됩니다... 늦기 전에 참여하세요~~!!
그리고 자신의 블로그에 이웃의 배너를 달아보는 건 어떨까요?