쉽고 빠른 홈페이지형 네이버 블로그 스킨 위젯 설정법 1 - 블로그 기본 설정

"본 포스팅은 제가 만든 캔바 템플릿에 대한 홍보 내용을 포함하고 있으며, 해당 템플릿 사용 시 저에게 소정의 수익이 발생함을 알려드립니다."

 

실제 적용되어 있는 저의 블로그스킨 디자인이예요

 

안녕하세요 :)
이 글은 저의 홈페이지형 네이버 블로그용 커스텀 스킨 디자인의 위젯을 설정하는 방법에 대해 안내해드리기 위한 포스트입니다.

쉽고 빠른 위젯설정 방법1에서는 아주 기본적인 부분인 블로그의 셋팅법에 대한 내용을 다루고 있어요.

이미 이 부분을 알고 계신 분들은 원하시는 내용으로 이동하셔서 참고하시면 좋을것 같습니다.

 

👉 쉽고 빠른 위젯설정 방법2 - 홈페이지형 블로그스킨ㅣ투명위젯기둥 설정하기

👉 쉽고 빠른 위젯설정 방법3 - 홈페이지형 블로그스킨ㅣ이미지맵 만들기

👉 쉽고 빠른 위젯설정 방법4 - 홈페이지형 블로그스킨ㅣ위젯코드 설정하기

 

 

스킨을 입혀도 위젯 설정이 제대로 되어 있지 않으면 나의 의도를 제대로 반영할 수 없고 디자인 완성도 또한 낮아 보일 수 있어요.
이 글을 순서대로 따라오시면, 어떤 디자인의 홈페이지형 블로그스킨에 위젯 배치가 가능하답니다!

 

👉홈페이지형 블로그스킨 적용가능한 템플릿 바로가기

 

STEP 1. 위젯이 들어갈 위치 확인하기

먼저, 저의 스킨에 자리잡은 위젯이 들어갈 위치인데요, 해당 위치는 아래 이미지와 같은 구조로 구성되어 있어요.

위치는 기본적으로 전체적인 가로폭이 정해져 있어 늘리는건 불가능하지만 세로길이는 원하는 길이만큼 가능해요.

그렇지만 디자인에 있어 가독성이 중요하므로, 보이는 화면을 벗어나 스크롤을 해가며 스킨의 내용을 확인한다는건 아주 비효율적인 방법이기 때문에 전체적인 레이아웃은 정해져 있는 편이예요.

(그렇다고 레이아웃이 정답은 아니예요. 얼마든지 내 스타일과 개성에 맞게 변형을 할 수 있답니다)

저의 블로그스킨 위젯이 들어갈 수 있는 위치

 

회색의 네모칸이 있는곳만 위젯 설정이 가능한데요, 블로그스킨 디자인에서의 관건은 저 안에 알맞게 들어가는 디자인을 구성하는것에 있다고 할 수 있어요.

위젯이 들어가는 위치는 평소에 보여지지 않고 오른쪽 마우스로 드래그 할때 보여지는데, 이것도 설정 여부에 따라 보이는 블로그가 있고 안보이는 블로그가 있어요.

내 블로그를 설정할때는 당연히 볼수 있답니다.

 

저렇게 보이는 네모칸을 위젯의 기둥(뼈대)라고 하는데요, 투명 이미지로 구성되어 있어서 보여지지 않는것이고, 위젯 코드가 들어갈 공간을 확보하는 역활을 해주고 있어요.
위젯의 기둥이 없다면 위젯 코드를 넣을수도 없고, 스킨 적용 공간이 마련되지 않아 디자인한 스킨 위에 내가 작성한 글들이 겹쳐지게 되죠.

그렇기 때문에 제일 첫번째로 설정 해줘야 할것이 기둥를 만들고 그 위치를 맞춰주는 것이예요.

 

 

STEP 2 .투명 위젯 기둥(뼈대) 만들기

 

먼저 그림판을 실행해 주세요

파일에서 이미지 속성을 클릭하면 팝업창이 뜨는데요, 단위를 픽셀로 설정하고(보통 픽셀로 자동 설정 되 있을꺼예요.) 이미지 큭기를 너비 170, 높이를 600으로 설정하고 확인버튼을 눌러주세요.

이미지속성 팝업창

 

설정된 하얀색의 긴 사각형 이미지의 보일꺼예요.

이제 이 하얀색을 투명으로 바꿔주셔야 하는데요 그 방법도 아주 간단해요.

오른쪽에 레이어를 클릭하면 왼쪽에 창이 하나 뜨고, 맨 아래쪽의 눈 모양을 클릭하면 투명으로 바뀌는걸 확인할 수 있어요.

흰색의 긴사각 이미지와 투명의 긴사각 이미지

 

이렇게 변경이 완료 되었다면 파일에서 저장을 눌러 파일이름을 투명위젯기둥(뼈대), 파일형식을 PNG로 하여 저장 버튼을 눌러주세요. 이제 기둥(뼈대)이 완성되었습니다~~

 

네이버 블로그에 로그인해서 원하는 카테고리에 제목을 투명위젯기둥으로 넣고 이미지 불러오기로 투명위젯기둥을 불러와주세요.

내용은 입력하지 않아도 되요. 비공개로 발행하시고 절대절대 삭제하지 마세요.

삭제되는 순간 스킨이 망가지는것을 확인하실수 있으니 정, 궁금하다면 삭제해보고 다시 설정하는 수고로움은 감안하시길요 ㅎㅎ

발행한 이미지의 주소를 복사함

 

실제로 발행된 포스트를 보면 아무것도 보이지 않지만 오른쪽 마우스로 긁어보면 저렇게 투명 위젯이 선택되어 보입니다.

그 이미지가 있는곳에 마우스 커서를 두고 오른쪽 버튼을 눌러 이미지 주소를 복사하고 그 주소를 메모장에 바로 붙여넣기 해주세요. 엄청 긴 이상한 코드들이 나올텐데 놀라지 마시고 그냥 그대로 메모장에 잘 옮겨만 놓으면 됩니다.

 

 

STEP 3. 블로그스킨 설정하기

 

네이버 블로그에 로그인해서 내 메뉴 -> 관리 -> 꾸미기설정 -> 스킨설정에서 스킨을 선택해 주세요.

수많은 스킨들 중에 2번의 탭을 누르시면 베이직이라는 스킨이 보이실꺼예요. 그 스킨 선택하고 스킨 적용을 꼭 눌러주세요

두번째 탭에서 보여지는 베이직 스킨. 꼭 적용버튼을 눌러야함.

 

다음 포스트는 쉽고 빠른 위젯설정 방법2 - 홈페이지형 블로그스킨 투명위젯기둥 설정하기 에서 뵙도록 할께요.

 

**궁금한점이 있다면 DM으로 소통해주세요~