현재 두가지 스킨을 배포중인데요. 스크롤하면 왼쪽에 따라다니는 뷰온 버튼이 있습니다. 얼마전에 다음 뷰온 버튼의 디자인이 변경돼서 이를 수정해줘야합니다. 두개의 스킨이 조금 다른데 우선 첫번째 스킨인 아래의 스킨을 수정해보겠습니다.
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>
워드프레스 완벽입문: HTML/CSS 기초부터 부트스트랩을 활용한 테마 제작까지
트위터 부트스트랩 책 발간(디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀)
워드프레스 쇼핑몰 만들기 책 발간(우커머스와 한국형 결제 플러그인으로 온라인 쇼핑몰 만들기)
DIY! 워드프레스 - 빠르고 간편하게 만드는 워드프레스 블로그/홈페이지 서적 출간(워드프레스 완벽입문 개정판 1권)
DIY! 워드프레스 쇼핑몰 - 프리미엄 테마로 만드는 쇼핑몰/웹사이트 서적 출간
서브라임 텍스트 - 프로그래머와 디자이너가 선택한 텍스트 에디터 서적
트위터 부트스트랩으로 만드는 워드프레스 테마
프리미엄 테마로 만드는 워드프레스 사이트
댓글 목록
<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>
알려주신대로 하고 위와 같이 블로그 주소를 수정했는데요. 그래도 안나와요 ㅠ
글 내용의 코드를 수정했으니 잘 보고 다시 해보세요. 코드를 잘 봐야합니다. [ ##_article_rep_id_##] 을 추가해보세요.
<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>
바쁘실텐데... ㅎㅎ;; 죄송 죄송!!! 수정된 코드로 삽입하였습니다. 아직 안뜹니다 ㅠ
첨부 파일을 참고하세요. 샤프와 대괄호 사이에 공간이 없어야 합니다.
알려주신대로 했는데 아쉽게도 아직 안되고 있어서요 ㅋ..
<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>
저도 그렇네요~ 무엇이 문제인지 잘 모르겠습니다 ㅠ.ㅠ
<iframe width="76" height="90" src="http://api.v.daum.net/widget2?nurl=http://jaeuk.pe.kr/" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
생각해보니 원래의 티스토리 URL이 아닌 경우 뷰온버튼이 나오지 않는 것 같습니다. 윗분도 그렇고 도메인을 변경해서 그런 것 같습니다. 별도의 뷰온버튼을 만드는 것은 티스토리가 권장하는 사용방법이 아니라서 그런것 같습니다. 원래의 도메인으로 바꾸면 잘 나올 겁니다.