서로를 꿈꾸는 Fake Traveller

내 블로그에 위젯을 달아보자~ 1편 : 위젯이 뭐야? 에서 이어지는 포스트입니다^^

위젯을 설치하려면 먼저 마음에 드는 위젯을 찾아야겠죠?
내 마음에 드는 위젯을 찾을 수 있는 제일 좋은 방법이 무엇일까요?
무작위로 아무 블로그나 찾아가봐서 어떤 블로그에 어떤 위젯이 달려있나 하나씩 찾아보는 방법도 있고~ 메신져에 등록되어있는 사람중에서 블로거가 있다면 말 걸어서 괜찮은 위젯 없나요? 하고 물어보는 방법도 있고~ 뭐 여러가지 방법이 있겠지만!
제일 좋은 방법은 여러가지 위젯이 모여있는 사이트에 접속해보는것이 아닐까요?

현재 국내에서 위젯을 서비스되고있는 사이트들은 꽤 많지만 그중 위젯 하면 여기다! 라고 할 수 있는 곳이 딱 세 군데 있습니다.

바로 나만의 시작페이지를 만들 수 있는 위자드닷컴(http://www.wzd.com) 그리고 많은 분들께서 친숙한 다음의 위젯뱅크(http://widgetbank.daum.net)  입니다.



그럼 위젯을 하나 골라서 설치해보도록 하죠!
마음에 드는 위젯 하나 고르셨나요? 저는 다음 위젯뱅크에서 마이크로탑텐 위젯을 퀸테센스 블로그에 설치해보려고 합니다

다음 위젯뱅크에서는 네이버 블로그, 다음 블로그, 다음 카페, 티스토리에 위젯을 설치하고자 하는 분들께 생각할 필요도 없이 시키는데로만 하면 쉽게 위젯을 설치할 수 있도록 아래와 같이 서비스를 골라서 클릭만 하면 되게끔 해놓았지만!!!

다음 위젯뱅크의 마이크로탑텐 위젯

다음 위젯뱅크 뿐 아니라 다른 서비스에서 제공하는 위젯을 설치하시는 분들이 계실 수 있기 때문에 그 방법은 사용하지 않기로 하겠습니다! 굳이 그건 알려드릴 필요도 없긴 하지만요 ^^; (자신의 블로그에 로그인하시고 선택하신다음 퍼가기 버튼을 클릭만 하시면 돼요~ 잘 모르시겠다 하시는분들은 댓글 남겨주세요~ 친절히 알려드립니다~)

그럼 우리는 서비스명을 선택하지 말고! HTML 소스를 선택하고 퍼가기 버튼을 눌러보도록 하죠!
아래와 같은 창이 뜨지요? 이것이 바로 제가 선택한 마이크로탑텐 위젯을 나타내게 해주는 HTML 소스 입니다.

마이크로탑텐 관심요약기사 위젯

뭔 알쏭달쏭한 말들이 잔뜩 늘러져있지만!!
<script 로 시작되는 부분부터 </script>로 끝나는 부분까지 마우스로 주우우욱 선택하시고 Ctrl + C 를 누르시거나 마우스 우측버튼을 클릭하신 후 복사하기를 하신 후 위젯을 설치할 블로그의 관리자 화면으로 이동합니다!!

티스토리의 관리화면을 보시면 아래와 같이 스킨 메뉴 아래에 사이드바 설정 이라는 메뉴가 있습니다.
바로 우리가 위젯을 설치할 장소인 블로그의 사이드바 영역을 편집하기 위해 이동하는 것이지요!

사이드바 설정 페이지로 이동하시면 아래와 비슷한 화면이 보이실겁니다 뭐가 참 많은 것 같지만 어려우실건 없습니다.
스크린샷에 보이듯 사이드바에 설치할 수 있는 기능들은 왼쪽에 놓여져 있고 오른쪽에는 지금 현재 사이드바에 설치되어있는 기능들을 보여주고있는것이거든요~

창을 한개 더 띄우셔서 자신의 블로그 화면을 보며 비교해보면 아~ 이런것이구나 라고 이해하실 수 있습니다.
위치를 바꾸거나 지우고 싶으신 기능이 있으시다면 해당 기능을 마우스로 하나씩 끌어보세요~ 위치가 바뀌기도 하고 x 를 클릭하시면 그 기능들이 사라진답니다.

자 그럼 위젯을 설치하기 위해 우리가 사용할 모듈은 아래에 표시한 태그 입력기 입니다.

아참!! 태그 입력기가 없으신분이 계실 수 있겠네요!

그렇다면 클릭!

아무리 찾아봐도 태그 입력기가 안보이시는 분은 블로그의 관리페이지에서 플러그인 메뉴를 클릭하신 다음 플러그인들 중에서 태그 입력기를 찾아서 사용 하도록 클릭해보세요

태그 입력기를 추가해보세요

위처럼 태그 입력기 플러그인을 추가하신다음 아까의 사이드바 설정 화면으로 돌아와 보시면 태그 입력기가 보이실거에요

위젯을 어디에 설치하실지 위치는 결정하셨나요? 저는 퀸테센스 블로그의 최근에 받은 트랙백 바로 아래에 위젯을 추가해보도록 하겠습니다.
아래와 같이 태그 입력기 모듈을 마우스로 끌어다가 자신이 원하는 위치로 이동시켜보세요~

원하는 위치에 이동 하셨나요? 그럼 태그 입력기 우측에 생긴 편집 버튼을 마우스로 클릭해보세요
그럼 아래와 같은 창이 하나 뜰텐데요~

눈치 빠르신 분은 지금쯤 이미 위젯 설치를 완료 하셨을지도 모르겠네요

바로 이 위치에 아까 다음 위젯뱅크에서 복사한 위젯의 HTML 코드를 붙여넣기 하시고 확인 버튼을 클릭하시면 됩니다.
Ctrl + V 혹은 마우스 우측클릭 - 붙여넣기!!! 그리고 확인!

자 이제 마지막 절차가 남았습니다.
사이드바 설정 페이지 오른쪽 위을 보시면 미리보기 버튼과 저장 버튼이 보이시죠? 굳이 이 버튼이 뭔지 설명드릴 필요는 없을 것 같네요~ 저장 버튼을 클릭하시고 자신의 블로그를 확인해보세요!

와!! 수고하셨어요!!!
퀸테센스 블로그에 마이크로탑텐 위젯이 설치되었습니다!!!

어? 그런데 위젯의 가로 길이가 조금 짧아보이지 않나요?
블로그 스킨마다 사이드바의 넓이가 조금씩 다르기 때문에 조금 좁아보이거나 넓어보인다면 아까 사이드바에 붙여넣었던 HTML 코드를 조금만 손보면 됩니다

width=166 이라고 되어있는 부분 보이시죠? 바로 이 부분이 위젯의 가로 사이즈를 의미합니다.
이 부분을 자신의 블로그에 맞게끔 수정해보세요 ^^; (저는 width=200 으로 수정하였습니다~)

또 상단이나 하단에 있는 요소와 너무 붙어있다 싶으면 사이드바 모듈중에서 빈 줄 표시 라는 모듈을 찾아서 추가해보세요~ 약간의 공간을 만들어주는 모듈입니다 ^^ (이 기능도 안보이시면 플러그인 메뉴에서 추가하시면 되구요~)


지금까지 티스토리 블로그에 위젯을 추가하는 방법을 말씀드렸습니다.
설명은 꽤나 길게 했지만 어렵지 않으시죠? 조금 어렵다고 느끼셔도 차근 차근 따라하시면 금방 하실 수 있으실겁니다~
혹시 궁금한점 있으시면 댓글 남겨주세요~ 'ㅡ')/ 성심 성의껏 답변 드릴게요 ^^

제 뉴스레터 잉드야의 블로그! 블로거!와 마이크로탑텐 위젯도 많이 사랑해주세요~

지금까지 잉드였습니다~ 'ㅡ'/