스킨 한계를 뛰어넘는 티스토리를 꾸미는 4가지 방법

티스토리는 스킨을 자유자재로 바꿀 수 있어 많은 분들이 다양한 방법으로 스킨을 통해 티스토리를 꾸미고 광고를 넣는 등 다양한 활동을 하고 있습니다. 기본 제공하는 스킨도 좋고, 직접 스킨을 만들어 쓰시는 분들도 많습니다. 하지만 그렇게 스킨을 통한 확장성이 좋은 티스토리도 한계가 있습니다. 티스토리 모바일의 경우 스킨을 제공하지 않아서 꾸밀 수 없고, 광고 넣는 것에도 제약이 많습니다. 또한 다음 view 추천 버튼을 넣는 위치 등도 제약이 있고, 소셜웹 반응글의 경우 유독 스타일을 적용할 수 없도록 제한되어 있습니다. 이와 같은 티스토리 블로그의 제약을 자바 스크립트를 이용하여 꾸미는 4가지 방법을 소개해 드립니다.

티스토리 모바일에 스타일 시트를 적용하고 광고를 넣자

티스토리 모바일에는 광고를 스킨을 통해 적용할 수 없고, 스킨의 스타일 시트도 적용할 수 없습니다. 본문에 특정 코드를 넣어야 한다는 점에서 벗어날 수는 없으나, 그것을 좀 더 효율적으로 할 수 있는 방법입니다.

2013/01/08 - 티스토리 모바일에 스타일을 적용하여 꾸며보자
2013/01/08 - 자바스크립트로 티스토리 모바일에 광고 넣기

두 가지 방법 모두 원리는 똑같습니다.

(function() { var currentM; currentM = location.href.split(';/')[3]; //<;-- // 구분자로 짤라와서 if(currentM=='m'){ [모바일 전용 적용 코드] } })();

티스토리 모바일의 주소가 http://[블로그 주소]/m으로 구성된 것을 착안하여 블로그 주소 다음에 “m”이 올 경우에만 동작하는 코드를 통하여 구현하고 있습니다. 저 모바일 전용 적용 코드에 document.writeln(‘[적용 코드]’);를 넣어서 쓰면 스타일부터 자바 스크립트 등 원하는 모든 것을 ‘모바일에서만’ 적용하도록 할 수 있습니다.

다음 view 추천 버튼을 넣고 소셜웹 반응글을 꾸민다

이 기능은 데스크탑 모드에만 해당합니다. 이것은 데스크탑으로 나오는 코드에서 특정 태그를 추출하여 그에 따라 원하는 곳에 innerHTML로 적용하는 방법을 사용합니다.

2013/01/10 - 자바스크립트로 다음 view 추천 버튼을 원하는 곳에 넣을 수 있다면?

<script language="JavaScript"> <!-- var i; for(i=0;;i++) { var emb_flashvars=document.getElementsByTagName('embed')[i].getAttribute('FlashVars'); if(emb_flashvars.split("=")[0]=="nid") { document.getElementById("[div id]").innerHTML='[본문에서 추출한 nid를 이용한 다음 추천 버튼 HTML 코드를 지정한 div id에 삽입]'; } } //--> </script>

다음 view의 경우 추천 상자의 nid가 필요합니다. 이것은 각 본문마다 달라지기 때문에 이것을 위해서 많은 이들이 본문에 직접 추천 상자 코드를 써넣고 있습니다. 자동으로 할 수 있도록, 그것을 본문에서 추출한 다음 innerHTML을 써서 원하는 곳의 div 태그에 내용을 넣는 방식으로 구성됩니다.

2013/01/11 - 티스토리의 소셜웹 반응글! 자바스크립트로 꾸며본다

<script language="JavaScript"> <!-- var i; var div_social=document.getElementsByTagName('div'); for(i=0;i<div_social.length;i++) { var div_id=div_social[i].getAttribute('id'); if(div_id==null) {} else { if(div_id.substr(0,20)=="container_socialPost") { var div_post=div_id.substr(10,div_id.length-10) [추출한 소셜웹 반응글의 id인 div_post 함수를 이용한 스타일 시트 적용 코드 삽입] } } } //--> </script>

이 역시 본문 내에서 소셜웹 반응글의 코드를 뽑아 그에 따라 적용할 수 있도록 하는 것입니다. 자세한 것은 역시 상단 링크를 참고하여 주시기 바랍니다.

다음 티스토리에 바란다, 스킨의 기능을 업그레이드해라

다음 티스토리는 블로그 스킨의 확장성과 자유도로 각광 받고 있습니다. 하지만 어느 시점부터 새롭게 추가되는 플러그인의 기능을 스킨에서 처리할 수 없고 심지어 스타일 시트 적용도 되지 않습니다. 게다가 모바일의 경우 스킨을 전혀 제공하지 않아 광고를 넣거나 스킨을 꾸밀 수 없습니다. 모바일의 경우 다음은 장치 호환성을 위해서라지만 현재 안드로이드 및 iOS는 그런 문제가 거의 없습니다. 만약 그러하더라도 블로그 개인이 책임져야 할 문제입니다. 다음은 그 핑계를 대지 말고 모바일 티스토리에서도 스킨을 제공해야 합니다.

티스토리는 플러그인으로 제공되는 기능과 스킨과의 융합을 좀 더 개선하고, 좀 더 발전시켜 스킨과 플러그인을 하나하나 블럭으로 조립할 수 있도록 해서 스킨의 기능을 개선하고, 마찬가지로 모바일에도 스킨에 제공하면 하는 바람입니다.