블로그 홈페이지형 스킨 - beullogeu hompeijihyeong seukin

네이버 홈페이지형 블로그 스킨 템플릿 #1

블로그를 운영하면 글쓰는 것이 중요하지만

내 스스로의 만족을 위해,

다른 사람들의 접근성을 편하게 하기 위해,

업체의 경우엔 홍보를 위해 등의 이유로

스킨을 예쁘게 디자인해서 사용하는 분들이 많이 있죠!

 

블로그 활동을 하다보니 저도 다양한 템플릿으로

바꾸면서 기분전환도 하고 있는데

홈페이지처럼 꾸며두고 쓰고 싶은 분들을 위해

작게나마 공유활동을 해보려고 준비해봤어요.

 

네이버와 티스토리 두가지 다 맞춤형으로

만들어 꾸밀 수가 있는데 아직 티스토리는

익숙치 않아조금이나마 익숙해진

네이버 스킨 디자인부터 공유를 해볼까 해요 :)

 

 

 

 

 

 

블로그 홈페이지형 스킨 - beullogeu hompeijihyeong seukin

가장 쉽게 할 수 있는 템플릿부터 공유를 하고

점차적으로 심화된(?) 위젯이 있는 형태를

공유하고자 해서 우선 처음 가져온 디자인은

홈페이지형 스킨 베이직 버전으로 가져와봤어요.

 

적용된 모습부터 본 후 어떻게 사용하는지

간단하게 살펴보도록 할게요!

 

 

 

 

네이버 홈페이지형 블로그 스킨 적용모습

블로그 홈페이지형 스킨 - beullogeu hompeijihyeong seukin

블로그에 입혔을 때 모습은 이렇게 되어요.

아무래도 컨텐츠들이 모여야 보기가 좋은 곳이다보니

무작정 디자인부터 해두고 시작해야지! 보다는

글을 몇개씩 써두고 내블로그 성격과 분위기에 맞게

디자인을 해서 바꾸는게 좋은 것 같아요 :)

 

가장 베이직해서 쉽게 할 수 있는 템플릿인데요,

타이틀 부분에는 이미지를 넓게 깔아주고

아래 부분에 위젯 5개를 설치한 형태예요.

 

 

 

 

스킨디자인

블로그 홈페이지형 스킨 - beullogeu hompeijihyeong seukin

psd 파일을 열어보시면 전체적인 디자인이

되어있는 것을 보실 수 있는데요,

 

들어가는 텍스트와 이미지, 그리고 메뉴명,

아이콘 등을 적절하게 바꿔 넣어주고 난 후

[파일-내보내기-웹용으로저장]을 눌러주세요.

단축키는 Alt+Shift+Ctrl+S 입니다.

 

 

 

 

 

 

레이아웃 및 위젯 설정

[블로그 프로필 '관리' - 꾸미기설정 - 레이아웃·위젯 설정 ]

블로그 홈페이지형 스킨 - beullogeu hompeijihyeong seukin

홈페이지형으로 디자인을 하게 되면

위젯을 사용해 링크를 거는 형태를 만들기 때문에

가장 기본으로 해주어야 할 것이

레이아웃 설정이에요!

 

제가 공유하는 템플릿들은

11번째에 있는 형태로 만들어야 적용가능해요.

11번째 레이아웃을 클릭해준 후

메뉴/타이틀 순서를 바꿔주시고

위젯을 1번부터 5번까지 만들어 위치를 잡아주면 끝!

위젯 코드는 아래의 것을 순서대로 복사해서

붙여넣기 하시면 된답니다.

 

 

[위젯 코드]

투명위젯이미지 주소와 href(하이퍼링크)만 변경해서

각 위젯별로 적용을 해주시면 됩니다.

 

투명위젯의 높이를 조절하고 싶다면

height 값을 조금씩 조정하셔도 되어요!

1번 위젯<img src="투명위젯이미지주소" width="170px" height="175px" usemap="#map1" border="0" />  

<map name="map1" id="map1">
<area shape="rect" target="_top" coords="0,0,170,170" href="링크걸고싶은URL" />
</map>
2번 위젯<img src="투명위젯이미지주소" width="170px" height="175px" usemap="#map2" border="0" />  

<map name="map2" id="map2">
<area shape="rect" target="_top" coords="0,0,170,170" href="링크걸고싶은URL" />
</map>3번 위젯<img src="투명위젯이미지주소" width="170px" height="175px" usemap="#map3" border="0" />  

<map name="map3" id="map3">
<area shape="rect" target="_top" coords="0,0,170,170" href="링크걸고싶은URL" />
</map>4번 위젯<img src="투명위젯이미지주소" width="170px" height="175px" usemap="#map4" border="0" />  

<map name="map4" id="map4">
<area shape="rect" target="_top" coords="0,0,170,170" href="링크걸고싶은URL" />
</map>5번 위젯<img src="투명위젯이미지주소" width="170px" height="175px" usemap="#map5" border="0" />  

<map name="map5" id="map5">
<area shape="rect" target="_top" coords="0,0,170,170" href="링크걸고싶은URL" />
</map>

 

 

 

 

세부 디자인 설정

[블로그 프로필 '관리' - 꾸미기설정 - 세부디자인설정 ]

블로그 홈페이지형 스킨 - beullogeu hompeijihyeong seukin

 

스킨배경: 스킨템플릿 jpg로 저장 후 직접등록

타이틀표시: 없음(체크박스 해제)

타이틀높이: 400px

 

* 타이틀높이는 직접 적용해보고

적당하게 수정을 해주세요.

 

 

 

 

네이버 홈페이지형 블로그 스킨 <디자인소스>

 

블로그 홈페이지형 스킨 - beullogeu hompeijihyeong seukin

 

<제작 정보>
• 사용프로그램: 포토샵

• 폰트: 나눔스퀘어
• 이미지: 언스플래쉬

 

포토샵은 CC로 만들어졌으며,

사용하시는 버전에 따라 지원하지 않는

부분이 있을 수 있으니 참고바랍니다.

psd는 포토샵에서 열어야 수정가능합니다.

맞춤형으로 제작하기 위해선

해당 프로그램을 가지고 계셔야 해요~

 

폰트는 네이버에서 제공하는

나눔스퀘어로 제작되어

해당 폰트를 다운받으신 후 파일을 열어야

폰트깨짐현상이 없습니다.

'네이버 한글한글 아름답게' 라는 페이지에서

다운받을 수 있으니 참고하세요!

 

이미지, 폰트, 프로그램 등을 사용하실 땐

라이선스를 잘 확인하신 후 사용하시기 바랍니다!

 

 

 

 

네이버 홈페이지형 블로그 스킨 템플릿 파일 다운로드

블로그스킨템플릿1(댜니).psd

4.73MB

투명위젯.png

0.00MB

템플릿1_위젯코드.txt

0.00MB

재배포 및 판매금지

copyrightⓒDYANY All rights reserved.

 

 

반응형

공유하기

게시글 관리

구독하기댜니노트

'NAVER BLOG NOTE > 공유템플릿' 카테고리의 다른 글

네이버 홈페이지형 블로그 스킨 템플릿 #2  (2)2021.02.10