네이버 블로그에 인스타그램 바로가기 위젯 만들기

 

네이버 블로그는 보통 브랜딩할 때 많이 이용되는 마케팅 미디어인데요, 그래서 네이버 블로그와 함께 활용하면 좋은 인스타그램, 페이스북과 같은 브랜딩 홍보 미디어들에 바로 연결될 수 있는 위젯으로 만들어두면 좋습니다. : ) 

 

인스타그램 바로가기 위젯 만들기

위젯을 만들기 전 준비물이 필요합니다. ㅎㅎ 위젯 아이콘으로 써줄 인스타그램 아이콘 이미지입니다. 여기서 팁이 있다면, 이미지는 작아도 상관없지만 인스타그램 아이콘 하나만 있는 이미지 보다는 옆에 인스타 그램이라고 쓰여있는 이미지가 좋습니다. 후에 위젯 설정시 그냥 아이콘만 있으면 넙대대해서 예쁘지 않게 보이거든요..ㅎㅎ (사실 개인 취향입니다..)

 

인스타그램 이미지 예시

네이버 블로그는 html 편집이 안된다고들 알고 계실텐데요, 하지만 인스타 그램 위젯을 만들기 위해서 약간의 html 코드를 만지게 됩니다. ㅎㅎ 차근차근 따라하면 쉬우니 천천히 따라와 주세요~!

 

먼저 전체적인 과정을 간단하게 설명드리자면, 

위젯을 만들 때 사용할 간단한 html 코드가 필요합니다. 이 html 코드는 네이버 에디터가 만들어 줄텐데요, html 모드는 네이버 구에디터 버전에서 가지고 올 수 있으므로 잠시 에디터를 구에디터로 바꾼 뒤 작업이 완료 된 후 저희가 사용하는 최신 에디터로 바꾸어주겠습니다.

 

 

그래서 첫번째로 최신에디터에서 구에디터로 바꿔주는 작업을 거치겠습니다. 

내블로그 - 관리 - 기본설정 - 기본 정보 관리/기본 에디터 설정 - 스마트에디터2.0을 선택해줍니다.

네이버 블로그 에디터 변경

 

구에디터버전으로 바꾼 뒤 내블로그에서 글쓰기 페이지로 이동해서 준비해뒀던 이미지를 넣어줍니다.

이미지 크기는 너비 170px으로 바꿔주세요. 위젯의 최대 너비가 170px이기 때문입니다.

 

이미지 넣어주고 너비 170px로 바꿔주기

 

이미지 너비를 170px로 바꿔주셨다면 그 다음 이미지를 마우스 커서로 드래그하여 블록을 잡아 준 뒤 이미지에 연결할 인스타 주소 링크를 걸어주세요. 

 

이미지에 링크걸어주기

 

이미지 너비도, 그리고 인스타 주소도 잘연결이 되셨다면, 하단에 html 텍스트를 눌러주세요. 하단의 html 텍스트를 누르면 복잡해 보이는 코드들이 좌르륵 나오는데요, 이 코드가 우리가 필요한 코드랍니다. 모두 복사해주세요. 

 

html 코드 복사하기

 

내블로그 - 관리 - 꾸미기 설정 - 디자인 설정/레이아웃.위젯 설정 페이지로 들어가줍니다. 

 

관리 - 꾸미기 설정 - 디자인 설정/레이아웃.위젯 설정

 

이 페이지에서 스크롤을 조금만 내리다 보면 '위젯 직접 등록'이란 버튼이 보이는데요 이 버튼을 눌러주세요. 

 

위젯 등록

 

버튼을 누르면 팝업이 뜨는데 관리할 위젯명을 입력한 후에 이전에 복사해뒀던 html 코드를 붙여넣어 줍니다.

 

위젯 생성

 

후에 생성된 인스타그램 위젯을 원하는 위치에 두면 완료입니다. : ) 적용 버튼을 눌러주면 위젯이 짠 생기게 됩니다.

 

원하는 위치로 위젯 옮기기

위젯 아이콘