[블로그] 간단하게 네이버 블로그 홈페이지형 위젯 설정하는 방법

반응형
728x170


홈페이지형 타이틀 이전 글 참고!



이번엔 위젯 다는 법
이거 좀 헷갈리니까 설명이 많아!


1. 블로그에서 CTRL+A 나 마우스로 드래그해서
저렇게 투명위젯이 설치된 곳을 블록으로 잡아
(인스타, 이웃추가 이런거는 이미 내가 설치해둬서 있는거)








2. 캡쳐해서 포토샵에 가져와
(위젯 달 곳만 캡쳐하면대 꼭 전체화면 안해도 상관 ㄴㄴ) 






3. 블록잡힌 곳을 하나 영역툴로 잡아






4. 크롭해서 얘만 남겨







5. 지우개로 투명하게 만들어





6. 내가 원하는 걸로 이미지 만들어






7. F8 눌러서 INFO 창을 켜
(보통 F8안눌러도 맨오른쪽위에 켜져있음)




다음 넘어가기 전에 설명!
위젯이미지자체에 링크를 거는게 아니라
영역을 잡아서 그 영역에 링크를 거는거



8. 자기가 만든 이미지 왼쪽위, 오른쪽아래의 X,Y 좌표를 보고 적어둬





9. 자기 블로그 글에 사진을 첨부하고 비공개로 올려






10. 포스팅된 글에서 이미지를 오른쪽클릭
이미지주소복사를 해









11. 레이아웃설정에 와서 자기가 넣고싶은 위치에 있는
투명위젯에 EDIT!




12. 코드입력란에 적혀있던 투명위젯코드를 지우고
위젯이미지와 링크를 거는 코드를 삽입

<img src="이미지주소" usemap="#add" />
<map name="add">
<area shape="shape" rect="rect" coords="0,0,0,0" href="연결할 주소" target="_top" />
</map>

!설명!
add라고 적힌 맵네임은 마음대로 정해도댐
coords에 아까 적어둔 좌표를 적어
왼위: 왼쪽위좌표
오아: 오른쪽아래좌표
"왼위x,왼위y,오아x,오아y" 









13. 다 적용하고 나오면 이렇게 위젯이 생겨있어







14. 클릭을 해보면 이렇게 파란색영역이 생기잖아
이게 우리가 좌표로 설정한 클릭영역이야. 
이영역에만 링크가걸려





15. 클릭해보면 이렇게 링크로 연결된당~
나는 내블로그라서 이렇게 뜨는거야





참고로 응용하면 이런거 만들어서




이런식으로 만들 수도 있음






이웃추가 링크는 

http://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?blogId=아이디


이걸로 걸면댐

반응형

Nowhere Cafe

삶을 풍요롭게하는 덕질을 추구합니다

    이미지 맵

    Life/Tips 다른 글

    댓글