작성일자
카테고리 CMS/티스토리 가이드

현재 두가지 스킨을 배포중인데요. 스크롤하면 왼쪽에 따라다니는 뷰온 버튼이 있습니다. 얼마전에 다음 뷰온 버튼의 디자인이 변경돼서 이를 수정해줘야합니다. 두개의 스킨이 조금 다른데 우선 첫번째 스킨인 아래의 스킨을 수정해보겠습니다.



HTML/CSS 편집창에서 아래와 같은 코드를 찾습니다.


<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://martian36.tistory.com/[ ##_article_rep_id_## ]" width="53" height="67" style="border:1px solid #ccc;margin-top:4px;">

<param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://martian36.tistory.com/[ ##_article_rep_id_## ]"></object>


위 코드를 다음과 같이 수정합니다.


<iframe width="76" height="90" src="http://api.v.daum.net/widget2?nurl=http://martian36.tistory.com/[ ##_article_rep_id_## ]" frameborder="no" scrolling="no" allowtransparency="true"></iframe>


위 코드에서 http://martian36.tistory.com 부분은 자신의 블로그 URL을 입력하면 됩니다.


그런 다음 style.css 창에서 아래와 같은 코드를 찾습니다.


#floating-box {

display:none;

position: absolute;

left: -66px;

border: 1px solid #CCC;

border-right: 0px;

padding: 5px;

background: white;

box-shadow:-3px 3px 5px rgba(125,125,125,0.2);

}

#floating-box .arrow {

padding: 5px 0 5px 7px;

}


아래의 코드로 변경해줍니다.


#floating-box {

display:none;

position: absolute;

left: -87px;

border: 1px solid #CCC;

border-right: 0px;

padding: 5px;

background: white;

box-shadow:-3px 3px 5px rgba(125,125,125,0.2);

}

#floating-box .arrow {

padding: 5px 0 5px 12px;

}

수정한 데모 사이트 -->http://explorer36.tistory.com/


해당 글 --> http://martian36.tistory.com/952



위 스킨은 iframe 태그의 코드를 수정하는 것은 같지만 스타일시트에서 아래처럼 해줘야합니다.


#floating-box { position: absolute; left: -87px; border: 1px solid #CCC; border-right: 0px; padding: 5px; background: white; box-shadow:-1px 1px 3px rgba(125,125,125,0.2); z-index: 1000; } #floating-box .arrow { padding: 5px 0 5px 12px; } #viewon iframe { z-index:1 !important; }


수정한 데모 사이트 --> http://saaien.tistory.com/


수정한 스킨 파일은 해당 글에 올리겠습니다.


해당 글 --> http://martian36.tistory.com/1074


수정코드.txt



아울러 두번째 스킨의 눈내리는 효과는 겨울에 만들어서 사용한 것인데 skin.html 화면의 하단에서 아래의 코드를 제거하면 됩니다.


<script src="./images/jsnow.js"></script>

<script type="text/javascript">

$(function() {

$().jSnow();

});

</script>



저작자 표시 비영리 변경 금지
신고
BlogIcon 4차원섭이

<div id="viewon">

<iframe width="76" height="90" src="http://api.v.daum.net/widget2?nurl=http://mapoku.co.kr/" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
<div style="width:30px;margin:4px 0 0 8px;">

</div>
</div>

알려주신대로 하고 위와 같이 블로그 주소를 수정했는데요. 그래도 안나와요 ㅠ

BlogIcon 베누시안

글 내용의 코드를 수정했으니 잘 보고 다시 해보세요. 코드를 잘 봐야합니다. [ ##_article_rep_id_##] 을 추가해보세요.

BlogIcon 4차원섭이

<div id="viewon">
<iframe width="76" height="90" src="http://api.v.daum.net/widget2?nurl=http://www.mapoku.co.kr/[ ##_article_rep_id_## ]" frameborder="no" scrolling="no" allowtransparency="true"></iframe>;
<div style="width:30px;margin:4px 0 0 8px;">

</div>
</div>

바쁘실텐데... ㅎㅎ;; 죄송 죄송!!! 수정된 코드로 삽입하였습니다. 아직 안뜹니다 ㅠ

BlogIcon 베누시안

첨부 파일을 참고하세요. 샤프와 대괄호 사이에 공간이 없어야 합니다.

BlogIcon 4차원섭이

알려주신대로 했는데 아쉽게도 아직 안되고 있어서요 ㅋ..


<div id="viewon">
<iframe width="76" height="90" src="http://api.v.daum.net/widget2?nurl=http://mapoku.co.kr/" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
<div style="width:30px;margin:4px 0 0 8px;">
</div>
</div>

BlogIcon 웅돌

저도 그렇네요~ 무엇이 문제인지 잘 모르겠습니다 ㅠ.ㅠ

<iframe width="76" height="90" src="http://api.v.daum.net/widget2?nurl=http://jaeuk.pe.kr/" frameborder="no" scrolling="no" allowtransparency="true"></iframe>

BlogIcon 베누시안

생각해보니 원래의 티스토리 URL이 아닌 경우 뷰온버튼이 나오지 않는 것 같습니다. 윗분도 그렇고 도메인을 변경해서 그런 것 같습니다. 별도의 뷰온버튼을 만드는 것은 티스토리가 권장하는 사용방법이 아니라서 그런것 같습니다. 원래의 도메인으로 바꾸면 잘 나올 겁니다.

티스토리 툴바