블로그에 검색기능 추가

검색기능은 기본적으로 제공되는 위젯임 -> 추가 !

한개 위젯으로 다수 SNS 링크 만들기

1. 아래와 같은 SNS 링크 이미지가 포함되도록 배너배경 제작

( SNS 이미지가 링크용 투명위젯 영역에 들어가도록 만들 것 )

2. SNS 링크 이미지가 있는 영역의 링크용 투명위젯에 추가

 <img src="투명 위젯 이미지" width="투명위젯 너비" height="투명 위젯 높이" usemap="#SNS" border="0"/>

 <map name="SNS">
   <area shape="rect" coords="페이스북 좌표값" href="https://facebook.com" target="_top"/>
   <area shape="rect" coords="트위터 좌표값" href="https://twitter.com" target="_blank"/>
   <area shape="rect" coords="구글 좌표값" href="http://www.google.com" target="_blank"/>
   <area shape="rect" coords="핀 좌표값" href="https://www.pinterest.co.kr" target="_top"/>
</map>

• 외부링크로 하고 싶으면 map태그의 target을 "_top" 로 하면되고
• 내부링크로 하고 싶으면 map태그의 target을 "_blank"로 하면된다.
• coords 부분은 해당 투명 위젯 안에서 각 SNS 아이콘에 해당하는 좌표를 넣으면 된다.
  ( 시작x, 시작y, 너비, 높이 )
  ( 이를 위해 바로 아래부분에 좌표 구하는 방법이 있다. )

3. 이미지맵 자동 프로그램을 이용하여 좌표 구하기

• 이미지맵 자동 프로그램 : http://maschek.hu/imagemap/imgmap/

  1. 먼저 이미지맵 자동 프로그램에 넣기 위한 조각 이미지를 생성해야 함

  2. 포토샵에서 투명 위젯과 동일한 크기의 영역을 만듬
     ( 현재 위에서 투명 위젯의 너비를 170px로 높이를 50px로 했으므로
     이와 동일한 크기의 영역설정할 것이다.)

     

  3. 이후 이미지를 클릭하면 그만큼의 너비가 나타남
     ( 지금 임의로 퍼왔기 떄문에 이미지와 영역이 맞지 않는 것이다. )

     • 일반적으로는 아래 2번째 이미지와 같이 먼저 블로그의 배너로 해당 이미지를 올린다음에
       ( 투명 위젯 영역에 들어가게 )
       이렇게 올린 이미지에서 투명 위젯 크기로 조각 이미지를 잘라가므로 크기가 맞을 수밖에 없다.

     

     

  4. 이렇게 영역을 맞춘 이미지를 잘라서 저장

     

     

  5. 이미지맵 자동 프로그램으로 들어가서 해당 이미지를 등록

     1. 파일 선택 -> 이미지 선택

     2. upload 클릭

     3. accept 클릭

     4. 해당 이미지가 등록되어 나타남
        

        

  6. 이제 이 이미지에 드래그하여 영역을 설정해주면, 영역내에서의 좌표를 알려줌

     

     • 해당 프로그램을 통해 투명위젯 내에서 각 링크 이미지의 정확한 좌표를 알 수 있음

4. 얻은 좌표값을 적용하여 투명위젯에 개별 영역 링크 적용

• 사용 예시)

   <img src="투명 위젯 이미지" width="170px" height="50px" usemap="#SNS" border="0"/>
  
   <map name="SNS">
     <area shape="rect" coords="7,7,47,47" href="https://facebook.com" target="_top"/>
     <area shape="rect" coords="56,7,100,47" href="https://twitter.com" target="_blank"/>
            
     ......
   </map>

  5. 실제로 클릭해보고 정밀 조정

  클릭해보면 다음과 같이 링크의 흔적이 남는데, 이를 잘 조절하여 이미지에 딱 맞게 조정해주면된다.