티스토리 HTML 배너 플러그인으로 사이드바 위젯 입맛대로 구성하기

왕초보 블로거인 저는 아직도 플러그인, 위젯, HTML 등 전문 용어 비슷한 것만 나요면, "블로그 하면서 꼭 이런것들을 알아야 하나?"라고 생각해왔습니다.

그러다 파워블로그를 방문하거나, 멋진 구성을 갖춘 블로그를 만나면 "내 블로그도 저렇게 구성할 수 있었으면 좋겠다!"고 부러워만했습니다.

얼마전 조아신의 액션배이스캠프(http://actionbasecamp.net/)에 들러 패이스북 코멘트 플러그인을 다는 방법을 물었고, 이번에는 사이드 메뉴로 구성된 유투브 동영상을 넣는 법을 물었습니다. 참 친절하고 세심한 설명으로 제 블로그 사이드 메뉴를 구성하게되었습니다.

저 같은 초보 블로거가 편집으로 시간 빼앗기는 것을 방지하기 위해 HTML 배너 플러그인 사용법을 적어보기로 했습니다.

시행착오

블로그 편집이나 구성을 위해 가끔 포스팅된 내용을 읽다가 따라해 보기도 하지만 HTML 소스를 가져다 붙이면 된다고 하는데, 저 같은 경우 어디다 붙여야 하는지, 혹시 잘 못 붙여서 페이지가 이상해 질까 불안했습니다.

사실 몇번 소스를 가져다 붙였지만 제대로 실행되지 않아서 긴 시간 헤메기도 했습니다.
그러다 이번 HTML 플러그인을 알게된 것이죠 ^^

문제해결 

티스토리 블로그를 사용하는데 사이드바에 패이스북 페이지, Youtube 동영상 위젯을 달고 싶은데, 잘 적용이 안될 때 HTML 배너를 적극 활용하시기 바랍니다.

1. 티스토리 관리자/스킨/사이드바 설정으로 들어갑니다.

2. 사이드바 기본 모듈에서 플러그인 모듈을 클릭하고 아래에 보면 HTML 배너출력 플러그인을 사이드바 꾸미기로 활성화시켜서 원하는 위치에 옮겨놓습니다.
 

3. HTML 배너출력에 보면 편집이라는 아이콘을 클릭하여 이름과 패이스북 페이지나 Youtube 동영상 소스를 가져다붙여주기만 하면 위젯이 원하는 위치에 적용됩니다.

4. 유투브 동영상 넣기는 조아신의 액션배이스 캠프에 포스팅된 글 유투브 재생목록을 활용하여 블로그에 동영상 위젯 추가 방법http://actionbasecamp.net/774 을  참고하여 따라하시면 되겠습니다.

5. 패이스북 페이지 위젯을 달고 싶은 경우

  가. 제가 달아논 패이스북 패이지 아래쪽 facebook social plugin을 클릭합니다.

  나. 아래와 같은 facebook developers 패이지로 이동하면, 박스 안에 Like Box를 클릭합니다.

  다. Like Box로 이동한 화면

 라. 본인의 패이스북 패이지 주소를 넣으면, 아래와 같이 본인 패이지 플러그인이 활성화 됩니다. 여기에서 간단한 편집을 통해 Get Code를 클릭하여 소스를 받습니다.

  마. 패이스북 Like Box 코드 화면입니다. 스를 복사하여 티스토리 관리자/스킨/사이드바 설정으로 들어가 HTML 배너출력 플러그인의 편집 아이콘을 클릭하여 붙여넣기만 하면 됩니다.

 바. 소스를 복사하여 티스토리 관리자/스킨/사이드바 설정으로 들어가 HTML 배너출력 플러그인의 편집 아이콘을 클릭하여 붙여넣기만 하면 됩니다.

 사. 저장하고 블로그로 나가면 사이드 메뉴로 위젯이 붙어 있는 것을 확인하실 수 있을 것입니다.

  아. 혹시 사이드 메뉴 폭을 벗어났을 경우 사이드바 설정으로 들어가 편집 아이콘을 클릭하여 폭 넓이를 조절해 주면됩니다.

마무리

사실 HTML도 모르면서 스킨메뉴 중 HTML/CSS 편집 메뉴를 들여다보고 따라해보기는 했지만 언제나 불안했었는데, 이제 이 비밀(?)을 알아버렸으니, 좀 더 멋진 구성의 블로그를 편집할 수 있을 것 같습니다.

주민 모두가 시의원 블로그가 파워 블로그 될 그날을 위해...언제나 노력할께요 ^^

가르침 주신 조아신님 감사합니다.

아직도 이 HTML 편집 메뉴는 머리가 아픕니다.

524437c48f2744d5f9b2de5f35bddcb5

YjA5YzlkZDFhOTBhN2ZmNzc1YjVkN2VhOWVlNGIzNTY=