사이드바가 허전하다면 유튜브 영상을 넣어보자.

유튜브 영상

 

유튜브 영상

 

티스토리 블로그를 여기저기 방문하다보면, 사이드바에 달린 유튜브 영상을 발견하고는 합니다. 쓰임새는 개인마다 차이가 있겠지만, 블로그의 취지에 맞게 또는 포스팅의 내용에 부합되는 광고를 삽입 한다면, 일석이조의 효과를 누릴 수 있을거라는 생각을 해보게 됩니다.

 

참고로 영상을 사용하시기 전에 블로그의 최적화를 먼저 보셨으면 합니다. 종종 블로그의 상태에 따라 로딩 속도의 차이가 나는데, 요즘은 접속이 조금만 느리더라도 방문자들이 방문을 하기도 전에 나가버리는 불상사(?)가 생기기에 현재 운영하는 블로그의 접속 상태가 어떤지를 보시고 사용을 하시는 것을 추천합니다.

 

영상 넣기

 

사이드바에 유튜브 영상을 넣기 위해서는 사이드바에 HTML 배너출력 추가와 유튜브 소스만 알면 됩니다.

 

먼저 티스토리 관리자 / 꾸미기 / 사이드바 항목에서 HTML 배너출력 항목을 찾아 사이드바에 추가 시켜 줍니다. 추가 시키는 방법은 아래 이미지와 같이 + 버튼을 눌러 주면 됩니다.

 

티스토리 사이드바

 

 


 

개인이는 유튜브 영상을 사이드바 제일 하단에 넣으려고 합니다. 본인이 원하는 위치에 드래그를 통해서 위치를 선정해 주시면 됩니다.

 

티스토리 사이드바

 


 

편집을 클릭 해서 이름을 적당히 적어주시고, 다음으로 유튜브 영상 소스를 입력해야 합니다.

 

사이드바

 


 

유튜브에 접속하셔서 삽입하고자 하는 영상을 찾으신 뒤 소스 코드 항목에서 해당 소스를 가져오시면 됩니다. 이때 아래 빨간 네모박스 항목의 체크를 해제 하시고 가져오시기를 바랍니다. (동영상이 완료되면 추천 동영상 표시 항목 체크 해제)

 

유튜브

 


 

다시 HTML 배너출력 항목에서 방금 가져온 유트브 영상 소스를 입력하여 줍니다. 이때 width="640" 항목을 잘 보시기를 바랍니다.

 

유튜브

 


 

미리보기를 통해 블로그를 살펴보니 유튜브 영상은 삽입이 되었는데, 빨간 네모 박스 부분 만큼 넓이가 오바되어버렸습니다. 해당 사이드바 폭에 맞게 변경하기 위해 소스 수정이 필요합니다.

 

유튜브

 


 

티스토리 관리자 / HTML/CSS 편집 / style.css 항목에서 #sidebar 항목을 찾습니다. 아래 width:300px 가 보이시나요? 스킨마다 차이가 있겠지만, width 항목이 현재 사이드바의 넓이를 말해 주고 있는 것입니다. 이 값을 가지고서 유튜브 영상 소스를 수정해야 합니다.

 

유튜브

 


 

다시 앞서 올렸던  width="640" 이란 수치를 방금 확인한 사이드바의 넓이와 동일하게 변경하여 주시면 됩니다. 

 

유튜브

 


 

이제 다시 미리보기를 통해 확인하면 사이드바 넓이에 맞게 적용이 되신것을 확인 하실 수가 있습니다. 개인이도 한동안 영상을 사용해 보았는데, 방문자 보다는 개인적으로 자주 보게 되는 것 같아서 그냥 없앴는데, 블로그 성향에 따라 사용을 하시면 이것보다 괜찮은 건 없다라고 생각이 됩니다.

 

결론은 사용자의 몫이겠지만 한번쯤 이런것도 있다라는 정도로 보시면 좋을 것 같습니다.

 

유튜브

 

  • BlogIcon 메모공주 2013.08.25 15:29 신고

    유용하게 쓰이겠는데요
    무료음악듣기사이트 까먹어서 다시 보고 가네요 ㅋㅋ
    주말 마무리 잘 하시구용^^

    • BlogIcon 개인이 2013.08.26 19:03 신고

      안녕하세요 ^^ 주말 잘 보내셨나요? 전 당직근무였네요 ㅠ 방문 감사드려요 ~ 좋은 하루 되세요 ^^

  • BlogIcon 충아밥먹자 2013.08.27 09:19 신고

    정말이지 매번 좋은정보 감사합니다

    맨날 따라하기~

    • BlogIcon 개인이 2013.09.01 21:13 신고

      도움이 되셨다니 정말 뿌듯? 감사합니다. ^^ 부족하지만 종종 찾아와 주세요 ^^

  • 2014.04.16 11:15

    비밀댓글입니다

    • BlogIcon 개인이 2014.04.24 22:17 신고

      도움이 되셨다니 다행입니다. ^^ 종종 찾아 주세요 ~ 감사합니다 ~

Designed by CMSFactory.NET