하지만 ViewOn과 믹시 추천 버튼은 티스토리 플러그인으로 넣은 것이기 때문에 소스를 수정할수 없어서 곤란했습니다. 하지만 검색의 힘...
한참을 검색을 해서 제가 원하는 곳을 찾았지만 HTML 이란게 100% 모든 환경에 다 맞는 것이 아니기 때문에 한참을 애 먹었습니다. 결국 해결을 하고 저와 같이 ViewOn 과 믹시 버튼 옆에 광고를 넣고 싶어 하는 분께 지식을 공유하려 합니다.
| 애드센스, ViewOn, 믹시 위치 정하기 |
<div class="GAD">
구글 애드센스 코드 삽입
</div>
구글 애드센스 코드 삽입
</div>
그리고 CSS 편집 코드 맨 마지막에 아래의 코드를 넣습니다. IE 및 파폭 에서 정상적으로 보이는 코드 입니다.
div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:410px !important;overflow:hidden !important;margin-top:10px;}
div.mixup_widget {display:inline;float:right;clear:both;width:420px !important;margin-bottom:-5px;}
div.GAD {clear:none;width:200px !important;}
div.GAD tr {line-height:15px;height:15px;}
div.blogger-news-widget embed {float:left;}
div.mixup_widget {display:inline;float:right;clear:both;width:420px !important;margin-bottom:-5px;}
div.GAD {clear:none;width:200px !important;}
div.GAD tr {line-height:15px;height:15px;}
div.blogger-news-widget embed {float:left;}
위외 작업을 다 하시고 페이지를 보시면 아래 이미지와 같이 되어 있을것입니다.
여기서 주의 하실점은 ViewOn, 믹시 버튼 아래에 있는 플러그인은 다 해제를 해주시기 바랍니다. 그렇지 않으면 애드센스가 제대로 들어가지 않습니다. 만약 아래에 올블로그 광고나 카테고리 글더보기를 넣고 싶으시면 플러그인이 아닌 HTML 코드에서 직접적으로 넣어야 합니다.
올블로그 광고는 홈페이지에 올블릿 관리에서 쉽게 코드를 얻어서 원하는 자리에 넣으면 정상적으로 보여서 쉽게 해결했습니다.
하지만 카테고리 글더보기는 쉽게 되는게 아니더군요. 그럼 지금부터 카테고리 글더보기 원하는 위치에 넣기 코드를 알아 보도록 하겠습니다.
| 카테고리 글더보기 원하는 위치에 넣기 |
<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>
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" 부분이 실질적으로 카테고리 글더보기 부분이 표현될 코드 입니다.
<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>
<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>
여기서 주의 하실점은 티스토리 플러그인에서 카테고리 글더보기를 설정하신 다음에 위 코드를 넣어야 카테고리 글더보기가 보입니다.
이상과 같이 코드를 다 넣으셨으면 제 블로그 하단 부분과 같이 플러그인들이 정리가 됩니다. 이 코드를 정리는 위즈님과 MissFlash님의 블로그를 참고 하였습니다.
제가 사용한 디자인 말고 더 다양한 모양과 디자인을 내기 위한 코드는 위 사이트를 참조 하시면 많은 정보를 얻으실수 있을것입니다.
아울러 이런 좋은 자료를 알려주신 위즈님과 MissFlash님께 감사드립니다.
'블로그' 카테고리의 다른 글
| 블로그독! 업데이트 안하나 (18) | 2009.12.14 |
|---|---|
| 티스토리 주제별 새글에 등록이 안될때 (10) | 2009.12.09 |
| 티스토리 ViewOn, 믹시 추천 버튼 옆에 광고달기 (24) | 2009.11.19 |
| [마감]티스토리 초대장 배포합니다.[5장] (17) | 2009.11.19 |
| 네이트 블독 때문에 태그에 신경 써야 겠습니다. (0) | 2009.10.14 |
| 티스토리... 내 간담을 서늘케 하다. (2) | 2009.10.01 |
감사합니다.^^;
그래도 제 포스팅을 보고 도움이 되셨다니 저도 기쁘네요. 수고하셨습니다.
저 같은 경우는 올블로그와 아이태그 이미지 사이에 소스를 넣었습니다.
<올블로그 광고는 홈페이지에 올블릿 관리에서 쉽게 코드를 얻어서 원하는 자리에 넣으면 정상적으로 보여서 쉽게 해결했습니다> 하셨는데요~정확하게 어디다 코드를 넣는지 몰라서요~가르쳐주시면 안될까용?
그런데 제 블로그에 적용시키니 오류가 조금 생기네요~
저는 왼쪽으로 다음뷰와 믹시를 정렬하고 오른쪽에 배너를 넣으려고 하거든요..
괜찮으시다면 소스를 좀 알려주심 감사하겠어요 ㅠ.ㅠ..
애드센스가 들어가는 부분은 배너로 대체를 하여서 div 소스를 넣었어요.
css에 정렬하는 부분이 좀 어긋난거 같애요..
부탁드립니당. (__);;
저두 따라 해볼려고 하니까, 잘 안되네요..
저두 왼쪽에 광고, 오른쪽에 다음뷰 추천(위) / 믹시(아래)
이렇게 하려고 하는데, 잘 안되네요..
위에 가르쳐 주신대로 해보니까...추천 버튼은 오른쪽에 잘 정렬이 되었는데,
추천버튼 왼쪽은 광고가 안들어가고 비어있구요.
그 광고는 밑에 '카테고리 다른글' 밑에 광고가 붙어요...어떻게 해야 하나요?
제가 하고 싶은게요..
이미지 광고 - 다음뷰(믹시) 추천버튼
-----------------------------
카테고리다른글 - 이미지광고
-----------------------------
이렇게 만들고 싶은데요..
저두 광고가 내려와 있어여..
http://wiz.pe.kr/544
해결해 드릴수 없는점 정말 죄송하게 생각합니다.
이글 보고 해결했어요 ㅠㅠ ㅋㅋ
카테고리 다른 글 보기 옵션을 끄니까 간단하게 해결 되는 군요..
컴맹이라 여기까지 오는데도 머리가 뽀개지는 듯 해서
일단 여기까지 해놓고 나중에 카테고리 글 보이는 코드도 따라해봐야겠어요 ㅋㅋㅋ
진짜 도움 많이 되었어요. 감사합니다 ㅠㅠ ㅋ
카테고리 글 더보기를 위치 지정하는 코드란 말이 무슨말인지 조차 이해 못해서(워낙 컴맹이에요ㅠ ㅋ)
덧글 중 _article_rep_desc_ 아래 넣으라는 말만 보고 무조건 거기 넣는거구나 싶어서 했더니 자꾸만
광고가 내려가더라구요.. ㅋㅋㅋ
알고보니 말 그대로 원하는 위치에 그 코드를 집어넣으면 되는 거였네요^^;;
제 경우에는 다음뷰 추천버튼과 믹시버튼은 플러그인 설정으로 자동으로 들어가는거라
html편집창에서는 두 버튼의 코드위치가 어딘지 알 길이 없어서 여기저기 시도해보다가 결국
추천버튼들 옆에 있는 구글 좌측 하단 광고 코드가 끝나는 바로 아래 이어붙였더니
구글 광고만 혼자 아래로 밀리는 현상이 사라졌어요. ㅋㅋ
덧글 보니까 광고만 밀리는 현상 겪는 분들 저 말고도 계신것 같아서 혹시나 도움될까 싶어 덧글 남기고 가요 ㅋ