본문 바로가기

Tistory

티스토리 본문 하단에 미디어로그 추가하기




티스토리 본문 하단에 미디어로그 추가하기


티스토리 본문 하단에 미디어로그 추가하기

 


티스토리 분문 하단에 미디어로그 추가하기


미디어로그에 나오는 썸네일 이미지들을 포스트 본문 하단에 출력하는 방법을 알아보겠습니다.


먼저 미디어로그 페이지에서 오른쪽 클릭으로 소스 보기를 합니다. 그리고 검색으로 카테고리나 파일종류를 찾아서 미디어로그 출력 부분 소스만 복사합니다.


 

티스토리 본문 하단에 미디어로그 추가하기


젤 위에 있는 <div id="mediaLogNest".... 부터 아래에 있는 <b class="rbottom"> 위에 </script></div> 까지 복사합니다.


 

티스토리 본문 하단에 미디어로그 추가하기


개인적으로 포스트 하단에 간단하게 넣으려는 방법이기 때문에 카테고리나 파일종류별로 보기 리스트는 삭제하겠습니다. 위와 같이 블록 설정한 부분만 간단하게 삭제하면 됩니다.


그리고 사이즈를 설정해야 하는데 미디어로그는 가로세로 사이즈에 맞춰서 자동으로 썸네일 이미지 개수가 표시되는데 <div id="mediaLogNest" style="width:100%; height:700px"> 이부분은 미디어로그 외부사이즈를 조절할 때 수정하고 <div id="mediaLogContent" style="width:100%; height:640px;"> 이부분은 미디어로그 내부사이즈를 조절할 때 수정하고 여기서 미디어로그 가로세로 출력 개수를 정하게 됩니다.


가로 사이즈는 100%라서 출력 개수는 블로그 본문 사이즈에 따라 고정적이고 세로 사이즈 370 이상은 2줄 510 이상은 3줄 655 이상은 4줄 이런 식으로 약 140픽셀 정도에서 1줄씩 추가 최고 내부사이즈를 정하게 되면 mediaLogNest에서 적당히 외부 세로사이즈를 조절해 주면 됩니다.


 

티스토리 본문 하단에 미디어로그 추가하기


위 이미지는 본문 하단에 미디어로그가 적용된 모습입니다.


소스 삽입은 관리자 페이지 → HTML/CSS 편집 → skin.html에서 [샵#_article_rep_desc_##]를 검색으로 찾아서 소스 아래쪽으로 적당하게 배치해 주면 되고 윗부분에 넣으면 포스트 본문 상단에 나오기 때문에 개인적으로 추천하고 싶진 않습니다.


 

 

티스토리 본문 하단에 미디어로그 추가하기


그런데 익스플로러에서 위와 같이 오류가 생기는 문제가 발생하였습니다. 이걸 깔끔하게 보일 수 있도록 간단한 소스를 만들어 줍니다.


<div>
<embed width="100%" height="365" wmode="transparent" allowscriptaccess="always" menu="false" salign="lt" id="mediaLog" src="http://cfs.tistory.com/blog/script/medialog/main.swf?seed=6004" flashvars="path=http://ssacur.tistory.com/media/data" type="application/x-shockwave-flash">
</div>


기존 소스를 지우고 위 소스를 수정해서 넣어주면 오류가 수정되고 깔끔하게 보여집니다. 사이즈 수정은 위와 비슷합니다.^^


독학으로 뒤져가면서 꾸미려 했으나 헛고생만 하게 된 상황이네요.;; 이렇게 간단한 방법이 있었는데.ㅠㅠ

 

티스토리 본문 하단에 미디어로그 추가하기


[파일 다운로드]

ml.txt