오늘은 티스토리 블로그에서 다음뷰 추천버튼과 믹시의 추천버튼을 깔끔하게 정리할 수 있도록 하는 소스를 제공하고자 합니다. 티스토리의 플러그인을 통한 기능은 깔끔한 정렬이 되지않아서 블로그의 이미지에 어려움이 많지요. 혹은 작은아이콘을 통해서 사용하시는 분들도 많아 저도 작은 아이콘들을 통해서 사용해봤지만 실직적으로 추천율을 올리는데에는 별로 좋지 않은 것 같아 다시 배너타입의 위젯으로 넘어왔습니다. 이에 그 적용소스를 나누고자합니다.
현제 저의 블로그에서 사용되고있는 형태의 추천버튼입니다. 왠지는 남들과는 다른형태로 저만의 블로그를 조금씩 꾸며보고자 여러시도를 하고 있는 중에 있다보니 이런 저런형태로 만들어지네요. 이러한 형태로 추천 버튼을 활용하시면 조그마한 이미지나 문구를 통해서 추천유도 및 전하시고 싶으신 말을 남기 실 수 있습니다.
| 1. 소스 및 설정방법 |
먼저 첨부된 파일을 내려받습니다. 그후 아래에 적힌 설정법에 따라 진행하세요.
이미지&소스.zip가.이미지 업로드 및 이미지 주소 확인법 2010/08/13 - 티스토리 블로그를 알면 황금이 보인다!
나.다음 등록 블로그 주소 - 다음등록뷰블로그 주소는 자신이 다음뷰의 본인의 등록블로그를 넣어주시면 됩니다. 저같은경우는 http://verus.tistory.com이 되겠죠.
다.믹시코드 - 믹시코드는 그림을 통하여 설명하겠습니다. 먼저 믹시사이트 우측상단블로그관리에 들어갑니다.
수정부분에 넣으세요.
라.플러그인설정 - 티스토리 관리자모드의 플러그인 설정에 들어가셔서 아래와 같이 설정해 줍니다.
두개다 표시하지 않음으로 설정하셨다면 이제 모든 준비가 끝났습니다. 이제는 적용만 시행하시면 됩니다.
마.본인의 본문넓이에 따른 테이블크기조절 - 모든 티스토리의 이용자들의 본문 넓이가 일률적으로 다 똑같지 않습니다. 사용하시는 스킨에 따른 본문의 넓이가 다르기때문에 사용자의 본문 넓이에 맞추어 그 폭을 조절해 주셔야합니다.
본문 넓이를 쉽게 알수 있는방법은 CSS설정에 들어가셔서 /* 포스트 */나 /* content */ 부분에 있는 article의 넓이를 파악해주시면 쉽게 알 수 있습니다.
현제 보면 본문의 넓이가 610px이고 제가 배포하는 적용 소스가 테이블 넓이 width="610"으로 동일하나 예를 들어 본문의 넓이가 580일경우에는 소스를 수정해주어야합니다.
| <table width="610" style="border-collapse:collapse; border:1px #E5E5E5 solid;"> <tr height="100"><td width="20" rowspan="2"><td width="150" rowspan="2"> |
위와같은 소스부분에서 빨간색으로 칠해진 Table전체의 width="580"으로 수정해주시고
두번째 이미지가 들어가거나 글이 들어갈 부분인 2번째의 TD 넓이를 width="120"으로 수정해 주시면 되겠습니다.
| 2. 적용방법 |
적용법은 티스토리에서 구글애드센스나 기타의 수익창출형 광고를 달아보신 적이 있으시다면 전혀 어렵지 않습니다. 스킨 HTML/CSS편집에 들어가셔서 HTML부분의
오늘은 티스토리 블로그에서 다음뷰 추천버튼과 믹시의 추천버튼을 깔끔하게 정리할 수 있도록 하는 소스를 제공하고자 합니다. 티스토리의 플러그인을 통한 기능은 깔끔한 정렬이 되지않아서 블로그의 이미지에 어려움이 많지요. 혹은 작은아이콘을 통해서 사용하시는 분들도 많아 저도 작은 아이콘들을 통해서 사용해봤지만 실직적으로 추천율을 올리는데에는 별로 좋지 않은 것 같아 다시 배너타입의 위젯으로 넘어왔습니다. 이에 그 적용소스를 나누고자합니다.
현제 저의 블로그에서 사용되고있는 형태의 추천버튼입니다. 왠지는 남들과는 다른형태로 저만의 블로그를 조금씩 꾸며보고자 여러시도를 하고 있는 중에 있다보니 이런 저런형태로 만들어지네요. 이러한 형태로 추천 버튼을 활용하시면 조그마한 이미지나 문구를 통해서 추천유도 및 전하시고 싶으신 말을 남기 실 수 있습니다.
| 1. 소스 및 설정방법 |
먼저 첨부된 파일을 내려받습니다. 그후 아래에 적힌 설정법에 따라 진행하세요.
가.이미지 업로드 및 이미지 주소 확인법 2010/08/13 - 티스토리 블로그를 알면 황금이 보인다!
나.다음 등록 블로그 주소 - 다음등록뷰블로그 주소는 자신이 다음뷰의 본인의 등록블로그를 넣어주시면 됩니다. 저같은경우는 http://verus.tistory.com이 되겠죠.
다.믹시코드 - 믹시코드는 그림을 통하여 설명하겠습니다. 먼저 믹시사이트 우측상단블로그관리에 들어갑니다.
수정부분에 넣으세요.
라.플러그인설정 - 티스토리 관리자모드의 플러그인 설정에 들어가셔서 아래와 같이 설정해 줍니다.
두개다 표시하지 않음으로 설정하셨다면 이제 모든 준비가 끝났습니다. 이제는 적용만 시행하시면 됩니다.
마.본인의 본문넓이에 따른 테이블크기조절 - 모든 티스토리의 이용자들의 본문 넓이가 일률적으로 다 똑같지 않습니다. 사용하시는 스킨에 따른 본문의 넓이가 다르기때문에 사용자의 본문 넓이에 맞추어 그 폭을 조절해 주셔야합니다.
본문 넓이를 쉽게 알수 있는방법은 CSS설정에 들어가셔서 /* 포스트 */나 /* content */ 부분에 있는 article의 넓이를 파악해주시면 쉽게 알 수 있습니다.
현제 보면 본문의 넓이가 610px이고 제가 배포하는 적용 소스가 테이블 넓이 width="610"으로 동일하나 예를 들어 본문의 넓이가 580일경우에는 소스를 수정해주어야합니다.
| <table width="610" style="border-collapse:collapse; border:1px #E5E5E5 solid;"> <tr height="100"><td width="20" rowspan="2"><td width="150" rowspan="2"> |
위와같은 소스부분에서 빨간색으로 칠해진 Table전체의 width="580"으로 수정해주시고
두번째 이미지가 들어가거나 글이 들어갈 부분인 2번째의 TD 넓이를 width="120"으로 수정해 주시면 되겠습니다.
| 2. 적용방법 |
적용법은 티스토리에서 구글애드센스나 기타의 수익창출형 광고를 달아보신 적이 있으시다면 전혀 어렵지 않습니다. 스킨 HTML/CSS편집에 들어가셔서 HTML부분의 을 찾아줍니다. 쉽게 찾는법은 Ctrl+F를 활용하세요.
찾으셨다면 의 아래부분에 위에서 설정한 소스를 붙여넣기만 하시면 됩니다. 그럼 바로편하게 적용이 가능합니다.
혹시 카테고리의 다른 글 플러그인을 사용하실 경우 카테고리의 다른 글 위치를 추천아래부분으로 위치하고 싶으실 때에는 플러그인 - HTML/CSS설정에서 HTML의 설정부분에 아래의 소스를 추가하면 됩니다.
* 카테고리 이동 부분은 MissFlash님의 티스토리에서 카테고리 글 더보기 위치 설정하기!!! 에서 발췌하였습니다. 자세한부분은 들어가보시면 됩니다.
| * </head> 태그 바로 위에 아래소스 붙여넣기 <script type="text/javascript" language="javascript"> var MissFlash_Div_Num = 1; </script> <script type="text/javascript" language="javascript"> function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){ // JavaScript function was developed by MissFlash (http://blog.missflash.com) var classElements = new Array(); if(node == null) node = document; if(tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); var j = 0; var MissFlash_Check = 1; var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num; for(i=0; i<elsLen; i++){ if(pattern.test(els[i].className)){ classElements[j] = els[i]; j++; if(els[i].id.indexOf("MF_Reference") == -1){ var result = els[i].innerHTML; els[i].style.display = "none"; } } } return result; } </script> |
| * 추천코드 소스 아래에 집어넣기 <!-- 카테고리 더보기 시작--> <div id="MF_Reference" class="another_category another_category_color_gray"></div> <script type="text/javascript"> //<![CDATA[ // Created by MissFlash(http://blog.missflash.com) var MF_Reference = document.getElementById('MF_Reference'); MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num); MF_Reference.className = "another_category another_category_color_gray"; var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category"); MF_Reference.innerHTML = ref_source; MissFlash_Div_Num += 1; //]]> </script> <!-- 카테고리 더보기 끝 --> |
이렇게 적용하시면 현제 제 블로그의 상태처럼 추천버튼아래로 카테고리 더 보기가 이동하게 될 것입니다. Tip.블로그 정렬의 편의를 위하여 카테고리의 위치를 추천소스 아래에 위치하게 된다면 추천소스부분에서 <Table>위에 <br />를 추가해주세요. 글정렬에 편합니다.
가로 150px 세로189px로 이루어져있습니다. 사용하시는 본문의 크기에따라서 이미지의 가로부분의 넓이를 맞추어 사용하신다면 문안하게 사용가능 할 것으로 보여집니다.
어느 이미지를 원하시던 다 넣으셔서 적용하시면 됩니다.
대신에 가로의 크기는 본문에 넓이에따라 변동, 세로는 고정을 지켜주세요.
원하시는 이미지나 문구가 있으시다면 제가 폭 넓이에 맞추어 제작해드립니다. 댓글로 남겨주세요.
찾으셨다면
오늘은 티스토리 블로그에서 다음뷰 추천버튼과 믹시의 추천버튼을 깔끔하게 정리할 수 있도록 하는 소스를 제공하고자 합니다. 티스토리의 플러그인을 통한 기능은 깔끔한 정렬이 되지않아서 블로그의 이미지에 어려움이 많지요. 혹은 작은아이콘을 통해서 사용하시는 분들도 많아 저도 작은 아이콘들을 통해서 사용해봤지만 실직적으로 추천율을 올리는데에는 별로 좋지 않은 것 같아 다시 배너타입의 위젯으로 넘어왔습니다. 이에 그 적용소스를 나누고자합니다.
현제 저의 블로그에서 사용되고있는 형태의 추천버튼입니다. 왠지는 남들과는 다른형태로 저만의 블로그를 조금씩 꾸며보고자 여러시도를 하고 있는 중에 있다보니 이런 저런형태로 만들어지네요. 이러한 형태로 추천 버튼을 활용하시면 조그마한 이미지나 문구를 통해서 추천유도 및 전하시고 싶으신 말을 남기 실 수 있습니다.
| 1. 소스 및 설정방법 |
먼저 첨부된 파일을 내려받습니다. 그후 아래에 적힌 설정법에 따라 진행하세요.
가.이미지 업로드 및 이미지 주소 확인법 2010/08/13 - 티스토리 블로그를 알면 황금이 보인다!
나.다음 등록 블로그 주소 - 다음등록뷰블로그 주소는 자신이 다음뷰의 본인의 등록블로그를 넣어주시면 됩니다. 저같은경우는 http://verus.tistory.com이 되겠죠.
다.믹시코드 - 믹시코드는 그림을 통하여 설명하겠습니다. 먼저 믹시사이트 우측상단블로그관리에 들어갑니다.
수정부분에 넣으세요.
라.플러그인설정 - 티스토리 관리자모드의 플러그인 설정에 들어가셔서 아래와 같이 설정해 줍니다.
두개다 표시하지 않음으로 설정하셨다면 이제 모든 준비가 끝났습니다. 이제는 적용만 시행하시면 됩니다.
마.본인의 본문넓이에 따른 테이블크기조절 - 모든 티스토리의 이용자들의 본문 넓이가 일률적으로 다 똑같지 않습니다. 사용하시는 스킨에 따른 본문의 넓이가 다르기때문에 사용자의 본문 넓이에 맞추어 그 폭을 조절해 주셔야합니다.
본문 넓이를 쉽게 알수 있는방법은 CSS설정에 들어가셔서 /* 포스트 */나 /* content */ 부분에 있는 article의 넓이를 파악해주시면 쉽게 알 수 있습니다.
현제 보면 본문의 넓이가 610px이고 제가 배포하는 적용 소스가 테이블 넓이 width="610"으로 동일하나 예를 들어 본문의 넓이가 580일경우에는 소스를 수정해주어야합니다.
| <table width="610" style="border-collapse:collapse; border:1px #E5E5E5 solid;"> <tr height="100"><td width="20" rowspan="2"><td width="150" rowspan="2"> |
위와같은 소스부분에서 빨간색으로 칠해진 Table전체의 width="580"으로 수정해주시고
두번째 이미지가 들어가거나 글이 들어갈 부분인 2번째의 TD 넓이를 width="120"으로 수정해 주시면 되겠습니다.
| 2. 적용방법 |
적용법은 티스토리에서 구글애드센스나 기타의 수익창출형 광고를 달아보신 적이 있으시다면 전혀 어렵지 않습니다. 스킨 HTML/CSS편집에 들어가셔서 HTML부분의 을 찾아줍니다. 쉽게 찾는법은 Ctrl+F를 활용하세요.
찾으셨다면 의 아래부분에 위에서 설정한 소스를 붙여넣기만 하시면 됩니다. 그럼 바로편하게 적용이 가능합니다.
혹시 카테고리의 다른 글 플러그인을 사용하실 경우 카테고리의 다른 글 위치를 추천아래부분으로 위치하고 싶으실 때에는 플러그인 - HTML/CSS설정에서 HTML의 설정부분에 아래의 소스를 추가하면 됩니다.
* 카테고리 이동 부분은 MissFlash님의 티스토리에서 카테고리 글 더보기 위치 설정하기!!! 에서 발췌하였습니다. 자세한부분은 들어가보시면 됩니다.
| * </head> 태그 바로 위에 아래소스 붙여넣기 <script type="text/javascript" language="javascript"> var MissFlash_Div_Num = 1; </script> <script type="text/javascript" language="javascript"> function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){ // JavaScript function was developed by MissFlash (http://blog.missflash.com) var classElements = new Array(); if(node == null) node = document; if(tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); var j = 0; var MissFlash_Check = 1; var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num; for(i=0; i<elsLen; i++){ if(pattern.test(els[i].className)){ classElements[j] = els[i]; j++; if(els[i].id.indexOf("MF_Reference") == -1){ var result = els[i].innerHTML; els[i].style.display = "none"; } } } return result; } </script> |
| * 추천코드 소스 아래에 집어넣기 <!-- 카테고리 더보기 시작--> <div id="MF_Reference" class="another_category another_category_color_gray"></div> <script type="text/javascript"> //<![CDATA[ // Created by MissFlash(http://blog.missflash.com) var MF_Reference = document.getElementById('MF_Reference'); MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num); MF_Reference.className = "another_category another_category_color_gray"; var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category"); MF_Reference.innerHTML = ref_source; MissFlash_Div_Num += 1; //]]> </script> <!-- 카테고리 더보기 끝 --> |
이렇게 적용하시면 현제 제 블로그의 상태처럼 추천버튼아래로 카테고리 더 보기가 이동하게 될 것입니다. Tip.블로그 정렬의 편의를 위하여 카테고리의 위치를 추천소스 아래에 위치하게 된다면 추천소스부분에서 <Table>위에 <br />를 추가해주세요. 글정렬에 편합니다.
가로 150px 세로189px로 이루어져있습니다. 사용하시는 본문의 크기에따라서 이미지의 가로부분의 넓이를 맞추어 사용하신다면 문안하게 사용가능 할 것으로 보여집니다.
어느 이미지를 원하시던 다 넣으셔서 적용하시면 됩니다.
대신에 가로의 크기는 본문에 넓이에따라 변동, 세로는 고정을 지켜주세요.
원하시는 이미지나 문구가 있으시다면 제가 폭 넓이에 맞추어 제작해드립니다. 댓글로 남겨주세요.
혹시 카테고리의 다른 글 플러그인을 사용하실 경우 카테고리의 다른 글 위치를 추천아래부분으로 위치하고 싶으실 때에는 플러그인 - HTML/CSS설정에서 HTML의 설정부분에 아래의 소스를 추가하면 됩니다.
* 카테고리 이동 부분은 MissFlash님의 티스토리에서 카테고리 글 더보기 위치 설정하기!!! 에서 발췌하였습니다. 자세한부분은 들어가보시면 됩니다.
| * </head> 태그 바로 위에 아래소스 붙여넣기 <script type="text/javascript" language="javascript"> var MissFlash_Div_Num = 1; </script> <script type="text/javascript" language="javascript"> function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){ // JavaScript function was developed by MissFlash (http://blog.missflash.com) var classElements = new Array(); if(node == null) node = document; if(tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); var j = 0; var MissFlash_Check = 1; var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num; for(i=0; i<elsLen; i++){ if(pattern.test(els[i].className)){ classElements[j] = els[i]; j++; if(els[i].id.indexOf("MF_Reference") == -1){ var result = els[i].innerHTML; els[i].style.display = "none"; } } } return result; } </script> |
| * 추천코드 소스 아래에 집어넣기 <!-- 카테고리 더보기 시작--> <div id="MF_Reference" class="another_category another_category_color_gray"></div> <script type="text/javascript"> //<![CDATA[ // Created by MissFlash(http://blog.missflash.com) var MF_Reference = document.getElementById('MF_Reference'); MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num); MF_Reference.className = "another_category another_category_color_gray"; var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category"); MF_Reference.innerHTML = ref_source; MissFlash_Div_Num += 1; //]]> </script> <!-- 카테고리 더보기 끝 --> |
이렇게 적용하시면 현제 제 블로그의 상태처럼 추천버튼아래로 카테고리 더 보기가 이동하게 될 것입니다. Tip.블로그 정렬의 편의를 위하여 카테고리의 위치를 추천소스 아래에 위치하게 된다면 추천소스부분에서 <Table>위에 <br />를 추가해주세요. 글정렬에 편합니다.
가로 150px 세로189px로 이루어져있습니다. 사용하시는 본문의 크기에따라서 이미지의 가로부분의 넓이를 맞추어 사용하신다면 문안하게 사용가능 할 것으로 보여집니다.
어느 이미지를 원하시던 다 넣으셔서 적용하시면 됩니다.
대신에 가로의 크기는 본문에 넓이에따라 변동, 세로는 고정을 지켜주세요.
원하시는 이미지나 문구가 있으시다면 제가 폭 넓이에 맞추어 제작해드립니다. 댓글로 남겨주세요.
'돈되는 블로그 > 블로그 관리' 카테고리의 다른 글
| 블로그 수익올리기 세번째, 레뷰(Revu) (38) | 2010.08.23 |
|---|---|
| 다음뷰 구독버튼 배포합니다. (14) | 2010.08.19 |
| 나눔글꼴 웹폰트로 사용여부논란 종결! (6) | 2010.08.16 |
| 다음뷰 구독버튼 사이드바에 크고 확실하게 다세요. (20) | 2010.08.16 |
| 운명의 메타블로그 "레뷰"와의 8일간의 동거이야기 (24) | 2010.08.15 |
