홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes

네이버 블로그 디자인

블로그 배너 ( 상단 )

블로그 배너 ( 상단 ) - 배경 디자인의 예시

--> 아래와 같이 디자인을 간단하게 바꾸는 것만으로도 블로그의 이미지를 확 바꿔줄 수 있음

  • 일반적인 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 가로 고정된 사이즈의 베너
    2. 상단 메뉴
    3. 좌측메뉴 형태
  • 상단 배너 와이드 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 상단 배너를 와이드하게 가져감
  • 상단 배너를 전체배경으로 확장

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes

메뉴

메뉴 - 홈페이지형 블로그 예시들

일반적인 홈페이지형 블로그

  1. 홈페이지형 블로그란 홈페이지 느낌이 나는 디자인의 블로그들
  2. 아래를 보면 알겠지만 가로 한줄에 최대 5개의 메뉴를 사용한다. -> 이유는 아래에서 설명함
  • 서울 시청 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 상단의 굴림꼴 글씨체 뿐만 아니라, 아래 부분의 메뉴처럼 다양한 글씨체를 섞어서 사용하고 있음 ( 자유롭게 디자인 )
  • 대구 달서구청 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 큰 와이드 배경 배너 사용
    2. 링크를 걸 수 있는 메뉴
  • 용인시 블로그 스토리

    1. 깔끔한 디자인
    2. 블로그 메뉴 링크까지 디자인에 맞게 정리되어 있음
  • 세종시 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 가로형의 5가지 메뉴 ( 이미지 사용 )
  • 네이버 디자인 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 가로 1개에 5개의 메뉴로 되어 있음

세로형 디자인의 홈페이지형 블로그

  • 공주시 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 위의 블로그들과 다르게 세로형 디자인
  • 대구 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes

조금 특수한 디자인의 홈페이지형 블로그

  • 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 6개의 메뉴 ( 중요 ! )
    2. 메뉴 확장기능
    3. 우측 상당에 링크 존재
    4. 검색 기능

메뉴 - 위의 홈페이지형 블로그의 공통점

  • 아래의 5줄의 하늘색 영역은 가이드라인임 -> 여기에 맞춰서 넣으라는 영역
    -> 아래를 보면 왜 대부분이 5개의 메뉴를 사용했는지 알 수 있음

  • 서울시 블로그 예시

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 가이드 라인에 맞게 메뉴가 들어가 있음
  • 용인시 블로그 예시

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 3번쨰 메뉴가 가이드라인 밖으로 살짝 삐져나와 있지만 일반적으로 클릭시 마우스가 중앙에 가기 때문에 문제 없음
  • 네이버 디자인 블로그 예시

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 2줄의 메뉴가 가이드라인에 잘 맞춰져서 배치되어 있음
  • 공주시 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 세로형 메뉴가 가이드라인에 모두 들어가 있음
    2. 아래의 아이콘 배너들 또한 모두 가이드라인에 들어가 있음
  • 블로그

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 6개의 메뉴가 존재
    2. 4번째 가이드라인에 2개의 메뉴를 넣는 것으로 문제를 해결함

메뉴 - 왜 가이드라인에 맞춰야 하는가?

  • 블로그 레이아웃-위젯 설정

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 가로 5개까지만 위젯을 추가 할 수 있음 ( 그래서 위에 가이드라인에 5개가 있는 것 )
    2. 해당 위젯 영역 안에서만 메뉴를 만들 수 있기 때문에 가이드라인에 맞춰야하는 것이다.

메뉴 - 가이드라인 = 위젯의 영역 (블로그 디자인의 비밀1 !!!!)

  • 위젯에 들어가는 코드 예시

    홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    1. 지금까지의 홈페이지형 블로그에서 메뉴( menu )란 위젯영역 안에 투명 이미지를 넣어서 링크를 걸 수 있는 소스를 입력한 것
      ( 즉, 위젯 영역 안에 투명 이미지를 넣은 다음에 사용자가 해당 이미지를 클릭할 경우 설정해놓은 링크가 실행되도록 코딩해놓은 것 )
  • 좀더 자세히 설명하자면

    1. 지금까지의 블로그는 메뉴까지 포함해서 전체화면이 배너였던 것이다.
      ( 즉 와이드 배너가 아니라 상단 배너를 전체화면으로 확장한 배너인 것 )

      홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    2. 이렇게 전체화면으로 확장한 배너에서 메뉴에 해당하는 영역에 '링크가 걸려있는 투명이미지'를 입힌다.

      홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes
    3. 이제 사용자는 배너에 있는 이미지를 보고 해당 영역을 클릭할 것이다.
      이때 그 영역에 위치시켜놓은 '링크가 걸려있는 투명 이미지'가 반응하면서 링크가 실행되는 것이다.

홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes

여백위젯을 위한 소스

별도의 기능이 없는 여백 설정만을 위한 소스입니다.
높이작성 부분만 입력해서 사용하세요.

<div style="height:높이작성;"></div>

투명이미지 다운로드 링크

https://drive.google.com/file/d/1GNyLVr7VGfvXoxDkleCsaTVqfd0d7jbQ/view?usp=sharing

투명이미지링크 만드는 방법

생성한 투명이미지링크는 해당 블로그의 모든 위젯에 반복적으로 사용하시면 됩니다.

링크위젯(현재창)을 위한 소스

링크영역 중 현재창으로 링크를 걸 때 사용할 소스입니다.
target=”_top” 부분이 현재창으로 오픈하라는 속성값이며, 네이버블로그는 이미지맵을 활용해야 현재창 오픈이 가능합니다.
일반 html이라면 속성값만 변경하면 가능하지만 네이버 블로그에서는 이미지맵을 활용해야 제대로 작동을 하더라고요.

이미지맵을 활용하기 위해서 투명이미지를 구글드라이브에 올려놓고 링크를 가지고 왔습니다.
이미지 링크는 그대로 활용해도 됩니다.

구글드라이브 링크가 제대로 작동을 안해서 투명이미지링크를 직접 개인 블로그에 올려 가져오는 방법을 다시 공유해 드렸습니다. 활용방법은 위 영상을 참고해주세요.

아래 소스를 그대로 복사해서 투명이미지링크, 높이작성, 링크작성 부분만 변경해서 사용하세요.

<img src="투명이미지링크" width="170px" height="높이작성px" usemap="#001" />
<map name="001">
 <area shape="rect" coords="0,0,170,높이작성" href="링크작성" target="_top" />
</map>

링크위젯(새창)을 위한 소스

새창으로 링크를 걸 때 사용할 소스입니다.
target=”_blank”가 새창으로 오픈하라는 속성값입니다.
링크와 높이만 변경해서 사용하세요.

<a href="링크작성" targer="_blank"><img src="투명이미지링크" width="170px" height="높이작성px" /></a>
홈페이지형 블로그 위젯 - hompeijihyeong beullogeu wijes