유투브 재생목록을 활용하여 블로그에 동영상 위젯을 추가하는 방법

블로그에 내가 직접 제작했거나 남에게 추천하고 싶은 유투브 동영상 목록을 위젯으로 제공하고 싶으신가요?  이 위젯은 유투브 내 계정의 [재생목록] 공유기능을 통해 제공되고 있습니다. 그 방법은 아래와 같습니다. (단체에서 직접 만든 동영상을 유투브에 올리고, 그 영상들을 홈페이지에서 자동으로 불러오는 방법으로 쓰셔도 됩니다. 그리고 꼭 직접 제작한 동영상이 아니더라도 추천하고 싶은 동영상을 회원들과 공유하는 방법으로 활용하셔도 됩니다)

1. 유투브에서 재생목록 만드는 방법

먼저 유투브(http://youtube.com/)에 로그인한 후에 우측 상단의 내 계정 이름을 클릭하면 [내 동영상]이라는 메뉴가 있습니다.

[내 동영상 및 재생목록] 왼쪽에 보면 다양한 메뉴들이 있습니다. 업로드 동영상, 좋아하는 동영상, 나중에 볼 동영상 등등으로요. 왼쪽 메뉴의 아래쪽에 보면 [재생목록]이라는게 있습니다. [+새 항목]을 클릭하여 재생목록의 제목을 하나 만듭니다. 저는 [조아신 제작/추천 동영상]이라고 이름 붙였습니다.

제 블로그 사이드바에 있는 유튜브 영상은 이처럼 제가 유투브에 만들어놓은 [조아신 제작/추천동영상]이라는 재생목록의 위젯이라고 할 수 있습니다. 따라서 블로그에 저런 위젯을 설치하려면 [재생목록]에 동영상이 있어야겠죠. [재생목록]에 동영상을 추가하는 방법은 아래와 같습니다.

만약 내가 직접 업로드한 모든 동영상을 [재생목록] 리스트에 추가하려면 아래와 같은 방식으로 하시면 됩니다

또 유투브에서 개별 영상을 보다가 [재생목록]에 추가하고 싶다면 아래와 같이 하시면 됩니다.

마지막으로 이제 [재생목록]의 영상 리스트를 블로그의 사이드바에 불러오는 방법입니다. 만들어놓은 재생목록의 이름을 클릭하면 공유메뉴가 있습니다. 공유 메뉴를 클릭하면 아래와 같이 [소스 퍼가기] 기능이 있습니다. 이 코드를 블로그의 사이드바에 갖다 붙이면 됩니다. (가로와 세로 크기는 조절하시고요)

2. 유투브 재생목록 리스트 위젯을 티스토리 블로그에 삽입하는 방법

이제 복사해놓은 소스를 블로그에 추가하는 방법입니다. 편리하게 사이드바에 배너나 위젯 등을 삽입하려면 티스토리 관리자화면 – [플러그인 설정]에서 [배너 출력] 플러그인을 활성화시켜주는게 좋습니다.

[배너출력] 플러그인을 활성화시켰으면 관리자화면의 [스킨] – [사이드바 설정]을 선택합니다. 그리고 [배너 출력] 플러그인을 사이드바의 적당한 곳에 추가시킵니다. (활성화시킨 후에 마우스로 적당한 위치에 드래그하시면 됩니다)

사이드바 [배너출력] 플러그인의 편집버튼을 눌러서 나중에 확인하게 좋도록 이름을 넣고, 그 아래에 복사해놓은 유투브 재생목록 소스를 붙여넣기 합니다.

그러면 아래와 같이 블로그의 사이드바에 유투브 동영상이 추가되었음을 확인하실 수 있을겁니다.

유투브 재생목록을 활용하여 블로그에 동영상 위젯을 추가하는 방법”에 대한 답글 1개

Add yours

  1. 감사합니다. 또 이렇게 직접 포스팅도 해주시고…너무 감사합니다.
    HTML 배너출력 플러그인으로 그동안 많은 문제거리들을 해소했습니다.

    감사합니다.

    좋아요

    1. 질문하신 것 중에 한가지 추가로 알려드리면요. 스킨의 사이드바 가로크기를 조정하고 싶으시다고 하셨죠? 그 방법은 아래와 같습니다. 운영하고 계신 블로그의 모양을 보니 티스토리의 [BASIC 2008] 스킨인 것 같습니다. 이 스킨의 사이드바 가로폭을 조정하려면

      [관리자] – [스킨] – [HTML/CSS편집]에 들어가서요. style.css 의 소스를 복사해서 메모장 같은 곳에 붙여넣기를 합니다. 거기에서 먼저 사이드바의 가로 크기를 지정하는 소스를 찾으세요.아래 소스입니다. (스킨을 수정하셨다면 조금 다를 수도 있는데요. 일단 #sidebar를 찾으세요.)

      #sidebar { float: right; width: 173px; padding: 14px; background-color: #f8f8f8; }

      위 소스의 173px가 사이드바 가로폭입니다. 원하시는만큼 조정을 하세요. 전체 블로그 가로폭이 지정되어 있는데 가로폭을 늘렸으면 본문폭을 같은 넓이만큼 줄여줘야겠죠? 다음으로 아래와 같은 소스를 찾아보세요.

      #content {
      float:left;
      padding: 40px 42px 50px 43px;
      width:/*@post-width=*/630px/*@*/;
      overflow:hidden;
      }

      위 소스의 630px가 본문의 가로크기입니다. 사이드바 늘리신만큼 빼서 지정을 해주세요. 그런 다음 수정된 style.css 파일을 다시 티스토리 HTML/CSS에 붙여넣기 하시면 됩니다.

      이렇게 하시면 변경된 사이드바 크기를 확인하실 수 있으실거예요. 도움이 되셨으면 좋겠습니다.

      좋아요

  2. 그리고 마지막으로 질문하신 내용 관련해서도 답변을 드리면요. 원래 상단의 메뉴바에 들어갈 메뉴명과 링크를 수정하려면 예전에는 스킨편집에서 skim.html 파일을 직접 수정해야 했습니다. 그런데 최근에 티스토리에서 메뉴를 수정하는 메뉴를 선보였습니다.

    [관리자화면] – [스킨] – [메뉴설정] 들어가시면 직접 메뉴를 수정하실 수 있습니다.

    좋아요

  3. 와…상세한 답변 감사합니다.
    하는 김에 질문하나 더 할께요.

    사이드바 가로폭을 넓히면 본문을 줄이라고 했잖아요?
    사이드바 가포폭을 넓히고 본문 가로폭을 줄이지 않는 방법은 없나요?

    지금 본문 가로폭에 사이드파 가록 폭만 넓히고 싶답니다.

    조아신님 블로그와 같은 스킨을 적용하고 싶은데
    어떤 스킨인지요…
    언제나 친절한 설명 감사합니다.

    좋아요

    1. 전체 가로폭을 넓혀야 하는데요. 음.. 일단 제가 쓰고 있는 스킨을 적용하고 싶으시다고 하니까 스킨을 공개합니다.^^ 티스토리 스킨을 수정하여 사용하고 있었습니다. 다른 곳에 쓰실려면 수정하셔야 할 것들이 있는데요. 아래 포스트에 설명해놓았습니다.
      http://actionbasecamp.net/781

      좋아요

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

Create a website or blog at WordPress.com

위로 ↑

%d 블로거가 이것을 좋아합니다: