당구치는 개발자

티스토리 블로그 첫화면 원하는 포스트 고정하는 방법

티스토리 첫페이지 첫화면을 지정하기 위해서는 티스토리에서는 [태터데스크,티에디션] 를 이용할 수 있는데요.

문제는 태터데스크나 티에디션이 기능이 뭐라해야할까요 한정적이라 해야할지 원하는 포스트 하나를 블로그 첫 진입시 보여줄 수 없더군요.

이런 분들에게 필요합니다.

1. 원하는 포스트를 티스토리 블로그 첫화면 첫페이지에 보이고 싶다.
2. 원하는 링크를 티스토리 블로그에 첫 진입시 보이게 하고 싶다.

여러 이유가 있겠지만 저는 제 블로그를 소개하는 포스팅글 [2015/01/22 - [프로필] - 디자이너 Bruce Kim의 꽁냥꽁냥 블로그 소개] 을 블로그 시작할 때 첫화면으로 넣고자 하였습니다.

방법도 여러 방법이 있겠지만 저는 이 방법이 가장 편하더군요.

※ 여기서 중요한 점은 자신의 티스토리 블로그 주소/ 

뒤에 슬러시를 꼭 붙여줘야 합니다. 안그러면 티스토리 블로그 첫화면을 자신이 원하는 포스트로 고정하지 못해요!!

※ Skin.html 아무곳에 넣어도 됩니다만, skin.html 맨 아래에 body 위에 올려놓았습니다.

복사가 불가능한 분들을 위해 파일을 준비했습니다.

출처 : http://brucekim.tistory.com/119

1.파일을 업로드 한다.

2.HTML클릭

3.SWF로 끝나는 파일주소 복사

4.다 지우고

<embed width="가로크기" height="세로크기" src="/attachment/복사했던 주소" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer">

로 바꾸어 적는다.

지난 시간에는 움짤(플짤) 만드는 방법에 대해서 설명했었습니다. 하지만 어떻게 올려야 하는지 난감하셨을 것이라 생각합니다. 저 또한 마지막에 제가 만든 움짤(플짤)을 올리려고 했지만 사진과 슬라이드 쇼 마지막으로 동영상 메뉴를 모두 찾아봤지만 올릴 수 없었습니다. 그래서 오늘은 이 SWF 파일을 티스토리 블로그에 올리는 방법에 대해서 설명드리겠습니다.

우선 위에 보이는 티스토리 글쓰기 메뉴에서 파일을 클릭해서 SWF 파일을 불러옵니다.

그럼 위와 같은 창이 뜨는데 파일 찾기를 눌러서 원하는 파일이 있는 폴더에 SWF 파일을 선택해서 불러옵니다.

 파일을 눌러 불러오기를 하면 위의 사진에서 보이는 것처럼 플래시 파일 표시에 자신이 불러온 파일 이름으로 표시되는 것을 볼 수 있을 것입니다. 이대로 저장을 하고 미리 보기나 글을 올리면 파일이 올라가 있는 것입니다.

 설명한 것처럼 파일을 불러오고 미리 보기를 했을 때 모습입니다. 보는 것처럼 SWF 파일이 화면에 제대로 표시되는 것을 볼 수 있을 것입니다.

 이 동영상은 재작년 서울 불꽃축제에 가서 찍었던 영상을 움짤(플짤) 화 시킨 것입니다.

 파일을 올릴 때에는 주의할 점은 티스토리에서는 10MB까지 허용하기 때문에 초과하지 않도록 움짤(플짤)을 만들 때에는 용량을 조절해야 합니다.

출처 : http://mudnji.tistory.com/167

싸이월드나 네이버 블로그에서는 배경음악을 구입하여 내 블로그에 쉽게 적용 할 수 있습니다. 하지만, 티스토리를 이용 하시는 분들은 소스 편집이외에는 블로그에 배경음악을 넣기 힘든데요, 이번 포스팅을 잘 읽어보시면, 티스토리에도 배경음악을 쉽게 넣으실 수 있습니다.

배경음악 설정하기 <- 클릭

  위의 링크를 클릭하여, 배경음악을 만드는 사이트로 이동 합니다.

  사이트로 이동하면 가장 먼저 위와 같은 플레이어 종류가 뜨는데요, 자신이 운영하고 있는 티스토리 스킨과 어울릴 플레이어를 선택해준 후 Next 버튼을 클릭해줍니다.

 다음으로 하실 일은 배경음악으로 쓰고자 하는 동영상 혹은 음악의 링크를 가져 오는 것인데요, SONG TITLE 아래는 플레이어에 표시하고자 하는 음악의 제목을 입력해주시면 되고, SONG URL 은 그 음악의 URL을 입력하시면 됩니다. 가장 쉬운 방법은 유튜브에서 쓰고자 하는 음악을 검색하고, 그 동영상의 URL을 입력 하는 것입니다. 음악은 여러개 추가 가능하고 한개만 등록하고 나머지는 빈칸으로 두셔도 무방 합니다. 다 입력 하셨으면 Next 를 눌러 줍니다.

 이번에는 플레이어를 설정하는 일인데요, 

Auto Play - 블로그 방문시 자동으로 음악이 플레이 되게 하실 거라면 Auto Play에 체크 해줍니다. 

Shuffle Playback - 음악을 랜덤 재생 하고자 한다면 Shuffle Playback 에 체크 해줍니다.

Default Volume - 음악의 볼륨을 조정 하는 것입니다.

Repeat Mode - 음악을 한번만 재생 시킬거라면 Play Playlist Once에 체크, 계속 반복 재생 할거라면 Repeat Playlist에 체크 해줍니다.

Placement of Player Bar - 플레이어를 어디에 나타낼지 설정하는 것입니다. 상단(Top)과 하단(Bottom)중 선택 가능 합니다.

Show Playlist by Default - 플레이 리스트를 보여줄 것이라면 체크 해줍니다.

  설정이 완료 되었다면 Done을 클릭 해줍니다.

 위와 같은 소스코드가 나오면 나만의 플레이어 만들기는 완료 된 것입니다. 이 HTML 을 티스토리에 적용만 해주면 되는데요, 

  위 사진처럼, 생성된 소스 코드를 티스토리 HTML 편집 하는 곳에서 body 항목을 찾고 그 아래에 붙여 넣기 한 후 저장 하시면 됩니다. HTML 수정 페이지에서 body 가 여러개 있더라도, body 항목 안에만 위치하면 되기때문에, 고민 하지 마시고 저장 하셔도 됩니다.

출처 : http://money2015.tistory.com/147

유투브 동영상을 플러그인을 이용하면 쉽게 동영상을 올릴 수 있다.

하지만 자동 재생 반복 재생등 좀 더  디테일한 설정을 해 줄 수 있는데 조금 복잡하지만

한번 해보면 쉽게 할 수 있으니 따라해 보자~

먼저 유투브로 가서 원하는 동영상을 클릭한다.

1. 동영상 아래쪽에 공유를 클릭~

2. 아래 소스코드를 클릭~

3. 모든체크는 꺼주고 동영상 크기도 원하는 사이즈로 선택한다.

4. 위 이미지의 텍스트 부분을 모두 선택해서 복사 해준다.

5. 우선 티스토리에서 글쓰기 버튼을 누른후 우측위쪽에 HTML 체크표시를 켜준다.(체크 활성화)

6. 그리고 좀전에 복사한 코드를 그대로 붙여 넣기 해보자 .

복사 하면 보통

 <iframe width="640" height="480" src="//www.youtube.com/embed/ZH8BYNwmR5Q?rel=0" frameborder="0" allowfullscreen></iframe>

이런 내용이 복사 될것이다.

이대로 붙여넣기 하면 그냥 일반 재생이 된다. 우리가 원하는건 자동 재생 반복재생~

붙여논 소스 사이에 아래와 같은 코드를 넣어준다.

&amp;autoplay=1&amp;loop=1

위치는 ▽

<iframe width="640" height="480" src="//www.youtube.com/embed/ZH8BYNwmR5Q?rel=0&amp;autoplay=1&amp;loop=1" frameborder="0" allowfullscreen></iframe>

붙여넣기후 활성화했던 HTML체크표시를 다써 꺼주자 (비활성화)

- 끝 -

자동재생Ok 반복재생 OK  ㅋㅋ 

반복재생이 안될때는 playlist 태그를 넣어주면 된다.

embed/ 뒷부분이 바로 동영상파일네임이다. ?rel=0 앞까지 복사해준다.

예를 들면

//www.youtube.com/embed/ZH8BYNwmR5Q?rel=0

붉게 강조한 부분을 복사~!

아까 붙여 넣기 했던  &amp;autoplay=1&amp;loop=1 뒤에

;playlist=ZH8BYNwmR5Q

를 붙여 준다~~

그럼 결과적으로

<IFRAME height=480 src="//www.youtube.com/embed/ZH8BYNwmR5Q?rel=0&amp;autoplay=1&amp;loop=1;playlist=ZH8BYNwmR5Q" frameBorder=0 width=640 allowfullscreen></IFRAME>

이렇게 코드가 만들어 지고 다시 HTML 체크 박스를 끈후 저장하면

자동 반복 무한반복 진짜 ㅇㅋ

참 쉽죠잉?????

출처 : http://siren7.tistory.com/5