[위젯관련 6] 메시지 전달을 위한 위젯 포스트에 설치

들어가기 전에 

여기 글에서는 메시지를 알리기 위한 아래와 같은 다음위젯뱅크의 전광판 위젯을 티스토리 블로그에 설치해 보는 것에 다루겠습니다. 여기서는 사이드바가 아닌 포스트(글)에 위젯을 삽입하는 것이니 사이드바라고 착각하시지 마시기 바랍니다. 그리고 스킨 설정에서 아래 위젯은 스킨 3으로 한 경우입니다.

위젯 설치하기

 

아래는 캠타시아(camtasia) 7로 만든 것인데 아래 강좌가 귀찮으시다면 아래 동영상을 보시고 아니면 아래 동영상을 보시고 강좌를 보시면 위젯을 포스트(글)에 달기가 쉬우실 것 같습니다. 참고로 아래 동영상은 에디터에서 올린 것이 아니고 다음 TV팟에 올린 후 퍼온 것이고 마지막에 광고가 나옵니다.

1. http://widgetbank.daum.net/ 클릭하여 다음위젯뱅크로 이동하면 최신 위젯 목록이 나오는 페이지로 이동합니다. 거기서 주간인기 위젯을 클릭하여 아래와 같은 전광판 위젯을 찾아 클릭합니다. 제가 이 글을 적을 시점에는 전광판 위젯이 첫줄 첫번째에 있었는데 다음주는 어떻게 될지 모르나 인기위젯이라 거의 첫번째나 두번째 줄에 있는데 전광판 위젯이 어떤 것인지 보세요. 

혹시 착각할 까 적겠는데 아래 위젯은 LED 전광판이 위젯이고 위가 전광판 위젯입니다. 아래에서 보시는 LED 전광판은 위젯 설정은 위한 옵션이 적어요. LED 전광판은 여기서 설명하는 전광판과 다른 점이 아래 글 3번처럼 설정하기가 다양하지 않다는 것이라 생각하면 됩니다. 아래 위젯은 http://min-blog.tistory.com/371 보시면 다운로드 하는 방법을 알 수 있습니다. 

2. 위젯을 클릭하면 아래 그림과 같이 나오는데 그 창에서 자세히보기 버튼을 누르면 위젯 퍼가기 페이지로 이동하게 됩니다. 바로 이동하기는 http://widgetbank.daum.net/widget/view/113을 클릭해도 되나 왜 복잡하게 설명했냐면 전광판 위젯만 아니고 다른 위젯도 보라고 위와 같이 설명한 것입니다.

3. 페이지에서 아래 그림의 1번인 HTML 소스를 클릭한 후 2번 처럼 위젯을 설정하는데 위젯에 나올 메시지는 글입력에 입력하고 설정을 마쳤으면 3번의 퍼가기 버튼을 클릭합니다. 위 1번에서 말했는데 LED 전광판 위젯인 경우는 아래 그림에서 2번에서 단지 글입력만 있습니다.

위와 같이 설정하면 아래처럼 나오는데 아래 보면서 다양하게 바꿀 수 있습니다. 글꼴(폰트)는 메시지의 글자체이고 글입력은 메시지로 나올 것이고 스킨을 전광판 형태로 스킨 1은 아래와 같고 스킨 3은 이 페이지 맨위에 있는 것입니다.

4. 저는 크롬 8을 사용하는데 소스를 복사하기 위해서 코드에 마우스 포인터를 이동한 후 마우스 왼쪽이 아닌 오른쪽 버튼을 클릭하여 나오는 메뉴에서 아래그림처럼 복사를 클릭하여 소스를 복사했습니다. 참고로 키보드의 Ctrl+C를 눌러도 코드를 복사할 수 있습니다. 위젯의 코드를 보면 <script>~</script>로 된 것을 확인할 수 있는데 모두다 스크립트이니 포스트(글)에 스크립트를 지원하는 곳만 가능합니다.

5. 글에 위젯을 삽입하기 위해서 자신의 블로그로 이동한 후 글쓰기 화면으로 들어간 후 에디터에 있는 멀티미디어 아이콘을 클릭합니다. 참고로 각 블로그마다 에디터에서 코드 삽입은 http://min-blog.tistory.com/351 을 보시기 바랍니다. 제가 알기로 포스트에 위젯 삽입은 자바스크립트가 되는 다음 블로그와 티스토리 블로그만 되는 것으로 압니다. http://min-blog.tistory.com/358 에서는 위젯 코드 삽입에 대한 블로그의 제한에 대해 적었으니 참조하시기 바라며 티스토리 블로그에서 코드는 멀티미디어로 삽입할 수 있습니다. 글에서 위젯 코드를 삽입하는 것을 알아 보고 있으니 동영상 코드 등을 삽입할 수 있으니 많이 활용하시기 바랍니다.

6.복사한 소스를 직사각형안에 키 마우스 오른쪽 버튼을 클릭한 후 붙이기를 하여 코드를 붙이면 아래 그림의 초록색박스처럼 되고 아래의 확인 버튼을 눌러 위젯을 글에 넣습니다. 참고로 키보드의 Ctrl+V를 눌러 복사한 것을 붙여도 됩니다.

7. 글에 멀티미디어라고 입력되면 그 멀티미디어(위젯)를 가운데로 위치시키기 위해 멀티미디어 영역이 벗어난 오른쪽을 클릭하여 마우스 커서가 깜박이도록 한 후 아래 그림에서 볼 수 있는 가운데 정렬 아이콘을 눌러 위젯을 가운데로 하면 아래 그림과 같이 되면 끝입니다.

다른 블로그에 올리기

위는 티스토리 블로그에서의 경우고 다음 블로그에도 자바스크립트가 지원되는데 하는 방법은 아래 동영상을 보시는데 동영상에서 위젯 퍼가기에 대한 영상은 없습니다. 그리고 네이버 블로그,이글루스 블로그는 포스트(글)에 자바스크립트가 불가능하므로 포스트(글)에 위젯을 넣을 수 없고 싸이월드 블로그의 경우는 모든 곳에서 HTML이 포스트에 위젯넣기는 안됩니다. 싸이월드 블로그에서 HTML이 되는 곳의 위젯을 복사한 후 에디터에 붙여 됐는데 마지막으로 글을 등록하면 위젯이 사라졌습니다.

마치며

전에는 단지 사이드바에 위젯 등을 설치하는 것을 보았을 것인데 이 글에서는 사이드바가 아닌 글(포스트)에 위젯을 삽입하는 것을 배웠습니다. 위젯 코드가 자바스크립트라 글에 자바스크립트를 허용하는 곳에서만 됩니다. 위젯은 여러가지 문제를 발생할 수 있으니 http://min-blog.tistory.com/359 보시고 위젯 설치에 신중하시고요. 참고로 스마트폰에서는 위젯이 보이지 않습니다.

• 트위터 위젯을  사이드바에 위젯 설치에 대해서는 http://joojoo.com/361 를 보세요.

보험비교하기

BY 보험몰닷컴