홈페이지형 블로그 투명위젯 만들기

홈페이지형 블로그 투명위젯 만들기

여백위젯을 위한 소스

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

<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>

This Post Has 58 Comments

  1. 권태원

    유튜브보다 다른활동도 많으시군요^^
    제공해 주신 홈페이지형 블로그 템플릿을 받아 만들어보고 있습니다.
    3편까지 잘 따라갔는데 위젯 나오며부터 버벅대고 있습니다.
    템플릿 3000으로 잡혀있어 제컴에선 잘리더군요 그래서 2000으로 줄였는데도 잘리는데
    모니터 해상도 문제일까요?
    30인치에 2560X1600 쓰고 있습니다.
    오프강의가 있으면 신청하겠는데 안보이더군요.
    지금 막혀있는 문제는 두가지인데 위에 스킨 잘리는것과
    또하나는 스킨위로 본문박스가 올라와 덮혀 있어요.
    전에 만지다보면 타이틀 높이조정에서 오르락 내리락 하던데
    타이틀을 꺼놔서 그것도 해결을 모르겠구요.
    사지으로 보여드리면 좋겠는데 에고 글이 길었네요.^^

    1. 넵 블로그를 한동안 열심히 하다가 유튜브도 시작했습니다.^^

      이미지가 잘린다는 것이 어떻게 잘리는걸까요?
      모니터 이미지보다 오히려 이미지 사이즈를 더 크게 설정해야 배경이 반복되지 않기 때문에 3000으로
      사용하는 건데 줄였는데도 잘린다는게 글로는 이해가 안가네요 ㅠ
      배경의 특성상 스킨 사이즈를 크게 작업하면 중앙정렬로 배치됩니다.

      상단 영역의 사이즈는 영상에 올렸 듯이 위젯을 사용해 조절합니다.
      위의 소스를 복사해서 원하는 사이즈로 위젯을 생성해 본문박스를 내려주시면 됩니다.~ ^^

      설명이 부족하다면 커뮤니티에 스샷 보여주시면 다시 한번 확인해 보겠습니다.~

  2. 이준행

    안녕하세요..
    셀프디마님 따라 열심히 블로그를 만들었는데 마지막에 멘붕이 ㅠㅠ
    링크위젯을 등록하고 가서 보니깐

    ‘직접등록한 위젯의 이미지 정보가 올바르지 않습니다 ‘

    이런 문구가 뜨네요 뭐가 잘못 된것일까요??
    도와주세요^^

    1. 셀프디마

      댓글이 늦어져 죄송합니다.
      위의 투명위젯 만들기 영상 보시고 그대로 따라 하신거 맞으실까요?
      내 블로그에 우선 이미지를 올리고 해당 링크를 복사해서 사용하시면 됩니다~
      해당 문구는 링크가 잘못되서 뜨는 경우가 많으니 주소 다시 한번 꼼꼼히 확인해보세요~ ^^

  3. 이준행

    투명이미지 링크 부분이 잘못 된것 같아요 ㅎㅎ
    제 컴터에 따로이 저장 해야하나요>>

  4. 가미정

    위젯설정 따라서 해봤는데요 자꾸 직접등록한 위젯의 이미지 정보가 올바르지 않습니다 라고 사진 화면에 뜨는데 뭘 수정해야 하나요??

    1. 셀프디마

      위의 투명위젯 만들기 영상 보시고 그대로 따라 하신거 맞으실까요?
      내 블로그에 우선 이미지를 올리고 해당 링크를 복사해서 사용하시면 됩니다~
      해당 문구는 링크가 잘못되서 뜨는 경우가 많으니 주소 다시 한번 꼼꼼히 확인해보세요~ ^^

  5. 박병돈

    아 드디어 셀프디마님 덕분에 잘만들었어요!!! 좀 버벅거리는 했는데 완성시켰내요 전에 쓰던 홈페이지형 블러그가 맘에 안들어서 바꿀려고 했는데 덕분에 깔끔하게 됬네요 감사합니다!

  6. 안녕하세요…링크 소스가 조금 잘 못 된거 같아요
    영상에 쓰신 링크랑 소스 길이도 안맞아서 좀 다르다고 생각했는데 역시나
    하고 나니 블로그가 ㅋㅋㅋㅋㅋ
    2탄까지 잘 되었는데
    위젯링크부터 뭔가 잘 되네요
    혹시 소스 한번 만 체크 해주시고 다시 공유해주실수 있으신지….궁금해용….

    1. 아 쌤 죄송해요 쌤 영상 세시간쨰 연구중ㅋㅋㅋ 이라
      html의 개념이 약간 생긴거 같아요 ㅋㅋ
      감사합니다
      그런데 하라고 하신대로 따라했는데 제 블로그가..
      https://blog.naver.com/lppzz/221956627668

      메뉴와 글이 모두 겹치고 메뉴 누르는데 영역지정이 이상하게 되고 ㅠㅠㅠ
      길을 잃었어요 ㅋㅋㅋ

      제가 외국에 있어서 설날인줄 이제 알았습니다 ㅠ
      즐거운 설 지내시구요
      혹시 괜찮으시면 제 블로그 한번 와주시면…
      이유를 알수 있을것 같아요 황송하오나..
      바쁘시면 제가 또 열심히 여기저기 찾아보겠습니다
      자세한 영상 너무 감사해요!!

      1. 셀프디마

        블로그 예쁘게 만드셨네요 ^^
        근데 컨텐츠와 이미지가 겹치는 이유가 여백 위젯의 사이즈를 잘못 입력하신거 같아요~
        사용하신 템플릭의 여백위젯은 192px입니다.
        총 10개의 위젯중 위에 들어가는 5개의 위젯 사이즈를 192px로 설정해 주시면 되세요~
        이해가 안가시면 아래 시간부터 영상 꼼꼼히 보시면 이해 가실거예요 🙂
        https://youtu.be/L2qC4OKFCT4?t=300

  7. 이상민

    카테고리형 블로그를 운영하다가
    이번에 홈페이지형으로 유투브 강의 보면서 변경중인데
    카테고리를 5개를 구성해서 올리려고 하는데
    카테고리 링크를 걸면 올바른 이미지가 아니라고 나오네요 ㅠㅠ
    카테고리 자체는 안되는 건가요?

    1. 셀프디마

      올바른 이미지가 아니라고 나오는건 카테고리 링크의 문제가 아니라 이미지 링크의 문제일거예요~
      블로그에 이미지 올려서 링크 제대로 가지고 온건지 한번 확인해보세요~

  8. 투명링크가 올바르지 않다고 떠요…. 링크 하는법만 제대로 다시설명 부탁드립니다

  9. 송은경

    덕분에 예쁘게 변경 했어요~ 감사합니다^^
    근데 혹시 스킨 배경 전체 높이를 어떻게 조절할 수 있을까요?
    밑에 포스팅 글이 배경 위로 약간 올라와서요.
    배경이 끝나고 바로 아래에 포스팅 글이 보이게 하려고 합니다.
    포토샵에서 높이 사이즈 조절을 하려고 하니 가로 사이즈도 같이 줄어들어서.. 위젯 위치랑 약간 맞지 않네요.
    쓰는데는 지장은 없긴한데..딱 맞게 하고 싶어서요.

    1. 셀프디마

      스킨 배경을 높이시려면 psd파일로 수정을 하셔야 합니다. 이미지 상태에서 높이면 이미지가 짜부되거든요..

  10. 정경화

    셀프디마님 안녕하세요~ 지금 2탄 보고 배우고있습니다^^ 먼저 감사하단 말씀드립니다ㅜㅠㅠ
    투명위젯만든후 링크위젯만드는 단계에서 막혔는데
    위젯코드를 찾을수 없는데 소스 어디에서 찾아야 하나요??
    그냥 유투브화면 보고 써도 되긴하는데 중간에 뭔가 틀리나봅니다….ㅠㅠ

  11. 조성민

    선생님 따라하다가 이미지 링크 거는 부분에서 막혔는데, 이미지 링크는 걸었는데 이미지가 있는 위치가 아니라 그 밑에 투명 이미지 링크가 생깁니다. 그러니까 그 사진을 누르면 링크를 타고 다른페이지로 가는게 아니라 그 밑에 안보이는 곳에 링크가 설정이 되어있습니다. 높이 300 다 맞췄는데 어디서 문제가 되는 걸까요?

  12. 최세영

    안녕하세요~친절하고 자세한 설명 덕분에 홈페이지형 블로그 잘 만들었어요 감사합니다^^
    근데 한가지 문의드릴게 있어서 글을 남깁니다.
    인스타,카카오 처럼 모바일로 바로 접속하게 링크를 연결하고 싶어 모바일 주소를 넣었는데 계속 메인 홈페이지로 연결이 되서요

    연결하고 싶은 사이트 주소: http://mujuland.dungzi.com/mobile/home

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

    이렇게 했는데 계속 http://www.nacoop.org/main.php 사이트로 연결이 됩니다
    제가 카톡/ 홈페이지 이렇게 위젯을 만들었었고 추가로 하나 더 위젯을 만들고 싶은건데 안되네요..
    어떻게 해야할까요?

    1. 셀프디마

      링크위젯(새창)을 위한 소스 사용하시면 됩니다~
      a href=”http://mujuland.dungzi.com/mobile/home”
      반영해주시고요~

      전체소스 작성해 드리려고 했더니 댓글이라 제대로 안나오네요ㅠ
      원하시는 링크는 작성하신 후 이미지링크와 가로세로 사이즈만 수정해서 반영해 주시면 됩니다~

  13. 박민준

    헤매시는 분들이 더러 계신거같아서 첨언합니다. 투명이미지 링크 잘못된거같다고 하시는 분들 분명히 링크를 이미지링크가 아닌 포스팅URL링크로 복붙하신게 분명합니다. 투명링크 올리실 때 스마트에디터 2.0으로 올리고 하단 HTML탭으로 정확한 이미지링크를 가져다가 쓰셔야 합니다!

  14. 최효진

    여백위젯 질문드립니다.
    똑같이 따라하는데 높이 조절이 안되는데 어떻게 해야 할까요?

  15. 서준호

    안녕하세요~ 질문이 있습니다!
    레이아웃 설정에서 타이틀 빼고 스킨에다가 이미지를 올리면
    강의에서는 하얀박스가 가리질 않는데 저는 하얀박스가 남아있는 상태가 되는데.. 어떤 곳에서 잘못된 걸까요ㅠ?

    1. 셀프디마

      하얀박스가 어떤 부분인지 알수가 없어서 ㅠ 스샷 떠서 커뮤니티에 남겨주세요~

  16. 안녕하세요 질문있습니다
    올려주신 이미지 사이즈가 3000×850에 메뉴가 5가지인데
    제가 원하는 사이즈는 3000*1300으로 작업하고싶은데 4가지를 하고싶은데
    위젯설정을 어떻게해야될까요?
    응용해서하려고하는데 어렵네요…ㅠ

    1. 셀프디마

      가로를 4개로 하려면 이미지맵을 사용해야 하고 클릭이 안되는 영역이 생깁니다.
      되도록이면 5개로 사용해 주시는게 좋아요..

      높이는 원하시는데로 늘릴 수 있으니 스킨 디자인 수정 후 위젯 높이도 높여서 설정해 주시면 됩니다~

  17. 박동훈

    안녕하세요, 디마님! 질문있습니다!
    인스타그램 연결하는거 위에 방식대로 했더니 인스타그램 글있는 곳에서 손모양이 안나오고
    그보다 훨씬더 밑에서 손모양이 나옵니다..뭐가 잘못되었을까요ㅠㅠ

    1. 셀프디마

      인스타그램 위의 여백 설정이 잘못 되었나 봅니다.
      훨씬 더 밑에 보인다면 수치가 더 많이 작성 된거 같은데 수치 한번 다시 확인해 보시고 px 꼭 넣어서 작성해주세요~

  18. 김용재

    안녕하세요 디마님!

    유튜브로 정독하면서 감사한 마음으로 잘 따라하고 있습니다^^

    이미지 맵에서 글자에 링크 설정 걸어두었는데 막상 블로그에서는 링크의 위치가 아래쪽으로 한참 내려가 있습니다. 어디서 문제가 생긴 걸까요? ㅠㅠ

  19. 강동규

    링크위젯 새롭게 바뀐 것도 시도해 봤는데 이미지 정보가 올바르지 않음 뜨네요 ㅠㅠ 현재도 이용 가능한 정보일까요

답글 남기기