네이버블로그 스킨 wn-skin1 적용방법 & psd파일


안녕하세요 WaaNee 입니다. 

티스토리 블로그 스킨만 제작 중에 네이버블로그 스킨도 제공해 보고 싶은 마음에 이렇게 네이버 블로그 스킨도 무료 제공 하게 되었습니다.


위 네이버블로그 스킨은 아이템팩토리 스킨 에서 바로 적용 하실 수 있습니다.


적용방법은 어렵지 않으니, 아래 내용 참고 하셔서 적용 하실 수 있습니다. 


네이버 블로그 스킨 적용 방법


  • 일단 적용 하시면, 아래 이미지 처럼 정렬이 맞춰 지지도 않고, 미완성 상태로 적용 되어 집니다.


  • 스킨은 적용 되었는데, 이렇게 정리가 안되어 있는 메인을 보면, 머리가 아파집니다 ㅋㅋ


  • 블로그 설정에 들어오시면, 꾸미기 설정 > 레이아웃.위젯 설정 을 클릭 해 줍니다.

  • 레이아웃 설정에 보시면, 오른쪽 하단에 위젯직접 등록 을 클릭 해 줍니다. 
  • 현재 head1, head2 .. 등록 되어 있긴 한데, 등록하는 과정을 보여 주기 위해 따로 올려 보도록 하겠습니다. 

  • 위 화면과 같이 위젯 직접등록 팝업이 나옵니다. 
  • 위젯명 에는 아까 등록해 놓은 head1 처럼, 위젯 이름을 등록 해 주시면 됩니다.

  • head1 은 이미 등록 되어 있으니, 위젯명을 "01" 으로 하겠습니다. 
  • 위젯 코드 입력 부분에 아래 소스를 넣어 줍니다.

<img src="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile4.uf.tistory.com%2Fimage%2F244CF34A588167C91C10C3" usemap="#01" height="463" width="100%" />

<map id="01" name="01"><area shape="rect" alt="" title="" coords="0,170,155,217" href="#" target="_top" /></map>


소스코드는 수정하는 부분은 아래에 다시 설명 드리겠습니다. 일단, 위 소스 그대로 넣고 다음 버튼을 클릭 하여 위젯을 추가 합니다. 


  • 위 화면과 같이 '01' 이라는 위젯이 레이아웃에 추가 됩니다. 
  • 생성된 위젯을 화면과 같이 클릭&드래그 하여, 화살표 위치로 옮겨주세요. 

  • 위 화면과 같이 위젯이 등록 됩니다. 
  • 이제 나머지 위젯도 위 방법과 동일 하게 위젯을 생성하고, 01 옆으로 02,03,04,05 방식으로 넣어 주면 됩니다. 

  • 저는 이미 있던 head2, head3 .. 위젯들을 추가하고 위치를 잡아 줬습니다. 

  • 적용 버튼을 클릭 합니다. 

  • 위젯등록으로 위 화면 처럼 나옵니다. 


위젯 소스 코드



위 설명에서는 위젯 이름을 '01' 로 등록 되었지만, head1 으로 소스를 정리 하겠습니다. 


head1


<img src="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile4.uf.tistory.com%2Fimage%2F244CF34A588167C91C10C3" usemap="#01" height="463" width="100%" />

<map id="01" name="01"><area shape="rect" alt="" title="" coords="0,170,155,217" href="#" target="_top" /></map>


head2


<img src="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile4.uf.tistory.com%2Fimage%2F244CF34A588167C91C10C3" usemap="#02" height="463" width="100%" />

<map id="02" name="02"><area shape="rect" alt="" title="" coords="10,172,164,217" href="#" target="_top" /></map>


head3


<img src="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile4.uf.tistory.com%2Fimage%2F244CF34A588167C91C10C3" usemap="#03" height="463" width="100%" />

<map id="03" name="03"><area shape="rect" alt="" title="" coords="20,171,168,218" href="#" target="_top" /></map>


head4


<img src="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile4.uf.tistory.com%2Fimage%2F244CF34A588167C91C10C3" usemap="#04" height="463" width="100%" />

<map id="04" name="04"><area shape="rect" alt="" title="" coords="35,174,167,219" href="#" target="_top" /></map>


head5


<img src="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile4.uf.tistory.com%2Fimage%2F244CF34A588167C91C10C3" usemap="#05" height="463" width="100%" />

<map id="05" name="05"><area shape="rect" alt="" title="" coords="55,173,169,216" href="#" target="_top" /></map>


위 소스 내용 중에 # 으로 표시된 부분은 링크주소가 들어가는 부분 입니다. # 대신 링크주소로 변경 해 주시면 됩니다. 


포토샵 PSD 파일



위 스킨의 메뉴 수정및 이미지 수정을 위해 포토샵 파일을 제공 합니다. 


main.psd.zip



 


Comments 14