Back to the Source LV1 Widget for Textcube.com

capcold님의 Back to the Source 캠페인을 축하하는 의미에서 textcube.com용 LV1 위젯 만들기.

제작시간 15분. 적용시간 1분.

아래의 코드를 긁어다가, [꾸미기]->[위젯]에서 새로운 사이드바 위젯으로 등록하면 된다.

<style>

.btsnote {

font-size:0.7em;

position:relative;

display:inline;

top:0;

left:0;

width:0;

height:0;

}

.btsnote .btswrapper {

position:absolute;

width:200px;

z-index:999;

top:20px;

left:0px;

padding:2px;

background-color:#EEE;

}

.btsnote .btsheader {

background-color:#EDC;

font-weight:bold;

padding:2px;

display:block;

}

.btsnote .btscontent {

padding:2px;

display:block;

}

</style>

<script src="http://www.google.com/jsapi"></script>

<script>

google.load("jquery", "1.3.2");

</script>

<script>

$(document).ready(function() {

$(".entry-content a").hover(

function() {

var title = $(this).attr("title");

var href = $(this).attr("href");

$(this).prepend(

$("<div class=\"btsnote\"></div>")

);

$('.btsnote').html(

"<div class=\"btswrapper\"><span class=\"btsheader\">"

+ title

+ "</span><span class=\"btscontent\">"

+ href

+ "</span></div>"

)

},

function() {

$(this).find(".btsnote").remove();

}

);

})

</script>

 

사용법은 그냥 이 포스트 본문 첫머리의 링크에 마우스 올려보면 알 거임. 링크 걸 때, a 태그에 title과 href만 적어주면 됨.

이하는 본문보다 긴 사족.

ps1.

텍큐나 티스토리나 그게 그거라서 아마 대충 먹히리라고 생각하긴 하지만, 스킨에 따라 다를 수 있으므로,

$(".entry-content a").hover(

에서 굵게 되어있는 부분을 자신의 스킨에 따라 바꾸면 이 위젯이 적용되는 범위를 고치거나 혹은 다른 스킨이나 혹은 다른 블로그에서도 사용가능할지도.

ps2.

설치형 텍큐나 주석플러그인이 있는 티스토리라면 LV6 수준까지 만들어낼 수 있겠지만, 본인은 걍 아무것도 손댈 수 없는 textcube.com만 쓰는 관계로 LV1로만 만족.

ps3.

일부 브라우저에서는 a 태그에 title을 기술하면 풍선tooltip이 뜰 수도 있음. 추가로 rel, rev 태그등을 이용하면 더 많은 정보와 다양한 용도로 담을 수도 있을 것임. 귀찮아서 패스.

ps4.

그러나 텍큐의 WYSIWYG 편집기는 a 링크걸 때 title을 입력받지 못하므로 매번 HTML 편집기에서 손으로 고쳐야 하는 귀찮음을 주므로 당장 만든 나 조차도 아마 이거 안 쓸거임.

결국 나는 안쓸것이기 때문에 배너 따위도 달지 않을 생각. 사실 이 글 작성하면서도 매번 손으로 수정하는 노력을 보여야 하는 바, 걍 출처링크를 안적어도 되는 글만 양산하기로 결심.

ps5.

아래는 천성이 게으른지라 내가 만들 생각은 없지만, 사용자의 특별한 추가 입력없이 자동으로 LV6까지 구현해주는 플러그인을 만들 용자를 위한 가이드.

1) 포스팅이 완료되어 저장될 때(권장), 혹은 해당 엔트리가 방문자에게 보일 때(비권장)

2) 본문을 스캔하여 a 링크를 모두 긁어낸 후,

3) href에 기록되어 있는 주소의 웹문서를 스크린스크래핑한 후,

4-1) 해당 웹문서 HTML내부에 Trackback RDF가 들어있는지를 찾아서, Trackback RDF가 있다면 그 안에 해당 웹문서의 title이 <dc:title>로 기술되어 있을테니 그것을 문서의 제목으로 삼으면 됨.

4-2) Trackback RDF가 없다면 걍 얌전히 HTML의 <title>태그를 찾아서 그걸로 문서의 제목을 삼으면 되지만... 국내 블로그 중 일부, 그리고 웹문서들의 대부분은 이 <title>태그를 잘못 적는 경우가 있으니 좀 찝찝함.

4-3) 혹시 microformat에 맞추어 웹문서가 만들어져있다면 이를 이용해 author나 title 등을 추출해낼 수도 있겠지만 설마 국내에 그런 것을 지켜서 만들어진 웹문서가 있을리가.

5) 어쨌거나 2~4를 통해 뭔가 정보를 찾아냈다면, 포스팅 본문의 a 링크에 id를 부여하고, 본문 마지막에 각주처럼 해당정보를 추가하고 대응하는 id를 부여하여 저장한 후,

6) 방문자에게 해당 엔트리를 보일 때 javascript를 이용하여 각주로 들어간 정보는 모두 가리고, 대신 각 a 링크에 hover될 때 대응하는 id를 가진 각주블록만 예쁘게 가공하여 링크 근처에 뿌려주면 됨.

-_-a 적고 나니 안만들길 잘했음. 이런 걸 만들리가.