NEVER LAND

지난번 블로그 스킨 만들기에 대한 포스팅에 이어 오늘은 블로그를 한층 더 예쁘고 깔끔하게 보여줄 블로그 위젯 만드는 방법에 대해 알려드리려고 해요!

일반적으로 가장 많이 사용하는 네이버 블로그에서 적용시키는 방법으로 설명드리겠습니다 :)

제가 운영 중인 블로그 메인화면인데요!

아래에 HOME/BLOG/EVENT/QUSTE 라는 문구와 함께 클릭하면 그 페이지로 접속을 할 수 있습니다.

이러한 블로그 위젯을 만드려면 어떻게 해야 하는지 차근차근 함께 만들어보아요~!

먼저, 네이버 내 블로그 - 관리 - 레이아웃 위젯 설정으로 들어갑니다.

보통 예쁘게 위젯을 보여주려면 상단 혹은 하단 정렬이 좋은데요.

오른쪽에서 두 번째에 보이는 상단 정렬로 클릭한 후 위젯 적용 작업을 시작합니다.

포토샵을 열어준 후 투명위젯을 만들어 볼껀데요. 파일명을 투명위젯으로 변경하고 RGB 색상모드로 설정합니다.

사이즈는 가로 170px, 세로 80~320px 정도로 잡아주시면 되는데요. 원하는 스킨 사이즈와 위젯 배너 사이즈에 맞게 설정하시면 됩니다.

설정 후 제작을 누르면 하얀색 배경이 씌워진 아트보드가 진행됩니다. 이 녀석을 투명하게 만들어 스킨 위에 씌워야 하는데요.

흰 배경을 없애려면 레이어 패널에서 배경 위에 레이어를 하나 추가 시켜 줍니다.

맨 아래 아이콘 중 오른쪽에서 두 번째 아이콘을 클릭하시면 됩니다.

그러면 이렇게 투명한 레이어가 배경 크기와 동일하게 만들어지는데요.

배경 레이어의 눈모양을 클릭하시면 레이어 1만 남게되어 투명위젯이 완성됩니다.

이러한 투명위젯은 일반적으로 저장하시면 안되구요.

파일 - 내보내기 - 웹용으로 저장 하셔서 투명함을 살려주어야 합니다.

저는 170 x 80 px 버전(투명위젯x)과 170 x 150 px 버전(투명위젯) 두가지로 만들어 주었답니다.

170 x 150 px는 스킨 아래에 위젯을 적당한 위치에 맞추어 넣어주기 위한 용도,

170 x 80 px은 제가 만들 위젯 사이즈이므로 투명위젯으로 만들지 않고 아트보드만 미리 열어두시면 됩니다!

웹용으로 저장을 클릭하면 이런 화면이 뜨는데요! 당황하지 않고 사진설정을 PNG24로 (없으면 PNG12) 변경하고

아래의 투명도에 체크하시면 됩니다.

형식은 이미지 전용으로! 다른 형식으로 되어있는지 꼭 확인해주세요! 

이제 작업이 완료되었으면 레이아웃 위젯 화면으로 돌아옵니다.

하단에 보시면 위젯직접등록이 있는데요.

위젯을 원하는 데로 등록하기 위해서는 HTML 소스가 필요합니다.

인터넷 새창을 띄우고 에디터 3.0이 아닌 이전버전에서 작업을 시작해봅시다.

사진을 불러오기해서 방금 전에 만들었던 투명위젯을 가지고 옵니다.

하단의 EDITOR모드에서 HTML모드로 보면 HTML 소스가 있는데요. 맨 앞 <P>와 </P>를 지우고 전체를 복사합니다.

위젯명을 작성하고 복사한 소스를 위젯코드에 붙여넣어주면 되는데요.

이렇게 총 4~5개의 투명위젯을 설치합니다. (블로그 포스트 영역 길이에 따라 달라짐)

투명위젯을 미리보기 했을 떄 사이즈가 맞지 않는다면 투명위젯의 길이를 조절해주면 됩니다.

기존에 포토샵으로 만들어뒀던 위젯 사진도 불러와주는데요.

여기서는 하이퍼링크 기능이 추가 되어야 하기 때문에 HOME이라는 위젯을 드래그한 후 URL을 눌러 하이퍼링크를 넣어주면 됩니다.

전체 HTML을 복사하고 레이아웃 위젯 창으로 돌아와 마찬가지로 붙여넣어주면 되는데요.

여기서 하이퍼링크 되어있는 주소를 바꾸게 될 경우 위의 사진에서 드래그 되어있는 부분만 수정해주시면 되요~

이렇게 모든 투명위젯과 하이퍼링크 위젯을 추가해 위와 같이 정돈해주면!

이렇게 블로그 스킨에 위젯이 추가된답니다!!

오늘은 블로그 스킨 하단 위젯을 만드는 방법에 대해 설명해 드렸습니다!

제작하시다가 궁금한 사항있으시면 댓글 남겨주세요~ :)