나만의 배너를 만들어서 네이버 블로그 사이드바에 달아보자

안녕하세요. 쿨타임입니다.

이번은 '크루즈사랑남자사람'님께서 제 세컨드 블로그(링크)에 질문했기에 이렇게 올려봅니다.

혹시 '배너'라는 것을 알고 계십니까?

배너의 사전적 의미는

"천, 종이, 비닐 등으로 만든 작은 깃발을 연속하여 매단 것을 말한다. 

캠페인 홍보를 위해 옥외에서 사용되는 경우가 많으므로 인쇄한 색의 퇴색이나 바탕의 강도에 주의해야 한다." 입니다.

하지만 인터넷에서 말하는 배너는 

'홈페이지의 한쪽에 특정 웹사이트의 이름이나 내용을 부착하여 홍보하는 그래픽 이미지를 의미한다.'라는 것이 더 정확 할 듯 합니다.

이제 배너에 대해서 대충 감이 잡히시죠? 이제 본론으로 들어가서

나만의 배너를 만들어서 네이버 블로그 사이드바에 부착하는 방법에 대해서 적어보도록 하겠습니다.

나만의 배너 만들기

 

배너를 만들기 전에 제가 설명하는 '배너'에 대해서 이미지로 설명하고 넘어가도록 하겠습니다.

위 이미지를 보면 빨간네모로 표기한 이미지가 보일것입니다.

사이드바에 표기되어 있는 네모난 이미지가 바로 '배너'인것입니다.

이 배너로 내가 원하는것을 홍보 혹은 링크 삽입을 할 수 있는것입니다.

* 이번글은 네이버 블로그로 설명을 하였지만, 아래 설명중에 있는 HTML은 다른 블로그도 동일하게 적용됩니다.

블로그 관리 -> 꾸미기 설정 -> 레이아웃,위젯설정을 선택해줍니다.

레이아웃,위젯설정 화면의 오른쪽 하단에 보면 '+ 위젯직접등록 BETA'라는 것이 있습니다.

이 녀석을 클릭해줍니다.

위와 같은 화면이 뜨면 '위젯명'을 원하는것을 입력하고 코드를 입력하면 됩니다.

자... 이제 가장 중요한 코드에 대한 설명을 하도록 하겠습니다.

<!-- 스토리 채널 구독하기 -->

<DIV style="TEXT-ALIGN: center">

<a href="https://story.kakao.com/ch/cooltime/app"  onclick="window.open(this.href); return false" title="카카오 스토리 채널 구독하기">

<img src="https://t1.daumcdn.net/cfile/tistory/2365994F*******"  width="200" height="60">

</a>

<!-- 스토리 채널 구독하기 끝 -->

저는 위와 같이 소스를 집어 넣습니다.

이제 각 소스코드에 대한 설명을 할테니, 본인의 취향에 맞게 수정하영 소스를 넣으시길 바랍니다.

* 위 코드를 '메모장'에 복사하여 수정 후 사용하시면 편리하게 이용가능합니다.

<!-- 내용 -->

이 부분은 각주라고해서 소스가 입력되지 않는부분입니다.

소스코드가 길어지면 알아보기 힘들기 때문에 위와 같이 설명글을 집어넣어서 보기 쉽게 합니다.

본인이 알아보기 쉽게 하기위해서 한것이니, 입력을 안하셔도 됩니다.

<a href="배너 클릭시 이동할 링크"  onclick="window.open(this.href); return false" title="마우스 올리면 팝업설명창">

이 부분은 좀 길어서 난감하신가요?

생각보다 간단합니다.

href="링크" 이부분에는 나의 배너를 클릭시 이동할 주소를 삽입하시면 됩니다. 

만약 본인 블로그 홍보배너라면 블로그 주소를 넣으시면 되는것입니다.

onclick="window.open(this.href); return false"

이부분은 클릭시 '새창'을 띄워서 앞의 주소로 이동한다는 뜻입니다.

만약 '새창'을 이용하기 싫으시면 위 부분을 삭제하시면 됩니다.

title="마우스 올리면 팝업설명창"

title부분은 마우스를 배너위에 올릴 시 이미지를 설명하는 팝업창 내용입니다.

만약 부가적인 설명이 필요없으시면 지우셔도 됩니다.

<img src="https://t1.daumcdn.net/cfile/tistory/2365994F*******"  width="200" height="60">

img src 뒤에 있는 주소는 이미지에 대한 링크입니다.

가장 중요한 부분입니다.

본인이 원하는 이미지를 하시면 됩니다.

보통 블로그에 사진을 업로드 한다음 마우스 오른쪽키를 눌러서 URL(링크주소)를 획득합니다.

뒤에있는 width와 height 값은 넓이와 높이에 대한 값입니다.

이미지를 불러오면 그 크기가 제한이 없어집니다.

그래서 가로 세로 크기를 강제로 원하는 사이즈로 줄이는것입니다.

* 참고로 네이버 블로그는 가로 170px, 세로 600px 까지 지원합니다.

* " 와 <> 표기 하나라도 틀리지 않게 주의하세요

* </a>는 <a > 로 시작한 소스코드를 마친다는 뜻입니다.

HTML 소스코드가 조금 어려었나요?

하지만 하나하나 쪼개서 조금씩 해보면 생각보다 간단할것입니다.

이제 원하는 소스를 집어넣으셨다면 '다음'을 선택합니다.

소스코드에 대한 미리보기가 가능해집니다.

만약 여기에서 '이미지'가 안보이면 '이미지 주소'가 잘못된것입니다.

위에서 넓이를 강제로 200px로 잡았지만, 네이버에서는 170px가 최대치이기 때문에 자동으로 170px로 수정되어버립니다.

원하는데로 표기되면 '등록'을 선택합니다.

사이드 화면 제일 아래쪽에 내가 만든 위젯이 등록된것을 볼 수 있습니다.

이제 '확인'을 누르면 나만의 배너가 만들어지는것을 볼 수 있습니다.

생각보다 간단하죠?

위에서 설명했지만 HTML(소스코드)에 관한 부분은 다른 블로그에도 이용가능하니, 본인이 원하게 수정해서 사용하시길 바랍니다.

유익한 도움이 되셨다면 '공감' 하나 눌러주시면 감사하겠습니다. ^-^

※ 관련글

- 웹에 내 이미지 업로드 후 주소 추출방법 : http://cooltime.tistory.com/474