포스팅을 하다보면 각종 추천버튼들이 있습니다.
글을 쓰시는 분들은 아시겠지만 내가 올린 글이 오늘은 몇 개의 추천을 받고
글을 읽은 사람은 몇 명인지 또한 방문자는 얼마나 왔는지 참으로 궁금하지 않을 수 없습니다.
어제 트위터 가입방법을 포스팅하고 열심히 방문자 수를 늘려볼 요량으로 검색창에서
트위터로만 검색을 해보니 많은 분들이 있길래 한 열분 정도에게 트랙백을 날렸습니다.^^
그리고 오늘 제 블로그에 트랙백 1개가 달려있어서 인사차 보내주신 분의 블로그에 갔습니다.
라이브렉스님의 블로그에 보니 다음뷰, 마이픽업 등 추천 버튼 위치 설정하기 란 글이 있기에
유심히 일어보고 그곳에 메타블로그 추천버튼 글도 보면서 머리아픈 html과 style.css 소스를
가지고 재 스킨창에 점목을 시켜봤습니다. 그렇게 3~4시간 정도 뻘짓을 해가며 결국엔 완성 ^^V.
그렇게 머리 아파가며 한것이 위의 자랑스런 사진 입니다.
html은 무지에 가까운 편이고, 더군다나 style은 만져본 역사가 없는데 진짜 큰 맘 먹고
좌충우돌 해가며 완성하니 기쁨과 뿌듯함이 밀려오더군요^^ 그런데 한가지 문제가 있다면
기존에 다음뷰와 믹시를 나타나지 않게 할 수 없다는 것이 또 하나의 과제 꺼리고 남았습니다.
더군다나 믹시도 적용시켜 보려했는데 liverex님과 MissFlash님의 글을 모두 참조 하였으나
실패하여 그냥 현재의 것으로 만족하면서 쓰려고 합니다.
이곳에선 위의 두분의 설명과 소스를 참조하여 저 같이 소스코드를 어디에 넣야할지 모르시는
분들에게 밥상과 숫가락 까지 차려드려서 드시기만 하면 되도록 설명 드리려 합니다.
저 처럼 헤메시는 분이 없도록 미연의 방지차원 이라고 할까요? ㅋㅋㅋㅋ
아래의 소스 중 빨간글씨 만 수정하여 드래그 후 복사하여 사용하세요!! (소스 파일도 올려 놓습니다.)
추신 : 블로그 독 같은 경우 c_seq=30080 코드 번호도 수정 하셔야 합니다.
라이브렉스님이 오셔서 고치해주셨습니다. 렉스님 감사합니다.^^
<!-- 다음뷰 블독 마이픽업 추천버튼 -->
<div class="Meta_Blog">
<div class="view">
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://001ti.tistory.com/" width="67" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://001ti.tistory.com/" /></object>
</div>
<div class="blogdoc" style="text-align:center;"><script type='text/javascript'>document.write("<scr"+"ipt type='text/javascript' src='http://w.blogdoc.nate.com/widget.php?c_seq=30080&p_url=http://"+document.domain+"'></scr"+"ipt>");</script></div>
<div style="float:left; margin-left: 2px; ">
<script type="text/javascript" src="http://2u.lc/packer/js/rt.js/default"></script>
<script type="text/javascript">
var fn = 'default';
var username = 'flywhan'; <--트위터 아이디
var hosturl = 'http://001ti.tistory.com';
var url = hosturl+('');
var title = ('').replace('"','');
_rt(fn, username, url, title);
</script>
</div>
</div>
<!-- 카테고리 글 더보기 모듈 -->
<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>
==========================================================================================
/*★ style.css 추가 내용 ★*/
.Meta_Blog {
border : 1px solid #e5e5e5;
margin : 0 0 5px 0;
padding : 2px;
background: transparent url("이미지 주소") no-repeat right bottom;
height : 80px;
}
.view {
float:left;
margin-left : 5px;
}
.blogdoc {
float:left;
margin-left: 2px;
background-color : #f9f9f9;
border : 1px solid #d8d8d8;
height : 75px;
padding : 3px 5px 0 0;
width : 70px;
overflow : hidden;
}
소스출처 : LiveRex님
<div class="Meta_Blog">
<div class="view">
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://001ti.tistory.com/" width="67" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://001ti.tistory.com/" /></object>
</div>
<div class="blogdoc" style="text-align:center;"><script type='text/javascript'>document.write("<scr"+"ipt type='text/javascript' src='http://w.blogdoc.nate.com/widget.php?c_seq=30080&p_url=http://"+document.domain+"'></scr"+"ipt>");</script></div>
<div style="float:left; margin-left: 2px; ">
<script type="text/javascript" src="http://2u.lc/packer/js/rt.js/default"></script>
<script type="text/javascript">
var fn = 'default';
var username = 'flywhan'; <--트위터 아이디
var hosturl = 'http://001ti.tistory.com';
var url = hosturl+('');
var title = ('').replace('"','');
_rt(fn, username, url, title);
</script>
</div>
</div>
<!-- 카테고리 글 더보기 모듈 -->
<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>
==========================================================================================
/*★ style.css 추가 내용 ★*/
.Meta_Blog {
border : 1px solid #e5e5e5;
margin : 0 0 5px 0;
padding : 2px;
background: transparent url("이미지 주소") no-repeat right bottom;
height : 80px;
}
.view {
float:left;
margin-left : 5px;
}
.blogdoc {
float:left;
margin-left: 2px;
background-color : #f9f9f9;
border : 1px solid #d8d8d8;
height : 75px;
padding : 3px 5px 0 0;
width : 70px;
overflow : hidden;
}
소스출처 : LiveRex님
이제 소스를 알려 드렸으니 스킨에서 html.css 과 스타일시트(style.css)에 넣을 차례 입니다.
1. 스킨HTML 에 소스 넣기
위에 사진을 보시면 낳익은 소스 코드가 보일 것입니다.
##_article_rep_desc_## 은 애드센스 하단 소스 넣을때 보았던 그 소스 입니다.
##_article_rep_desc_## </div> 아래 복사한 html 소스를 넣으시면 됩니다.
물론 점선 위의 것이 html 소스인거 아시죠? ^^ 저는 사진에 [메타블로그 추천 버튼]이라고 넣었습니다.
2. 스타일시트 style.css 에 소스넣기
위의 사진에서 보시듯 /*본문*/ 과 /*키워드*/ 중간에 소스를 넣는게 보이실 겁니다.
그냥 본문 아래에 복사한 소스를 넣어주시고 그 다음은 [미리보기]로 한 보신 후 맞으면 [저장] 쿡~ 끝~!!
이렇게 해서 추천버튼 만들기는 끝이 났습니다.
중간에 제가 설명을 드리지 않은게 있는데 그것은 소스 중간에 보시면 [카고리 글 더보기] 기능에 관한
소스 설명 입니다. 그냥 그 소스는 같이 복사하셔서 붙여 넣기하시면 편리하기에 쓰면 되기에 간략하게
추가 설명을 드리는 것입니다.
그리고 혹시~ 이글 보시는 분 중에 믹시 소스와 다음뷰, 믹시버튼 없애는거 아시는 분은 알려주셨으면 합니다.
위 사진처럼 다음과 믹시 그리고 새롭게 만든 버튼 3개가 공존해 있으면 골치 아프기에 없애는 법 알려주셨으며 합니다.
그리고 믹시를 없애면서 새로 만든 버튼안에 들어갈 수 있게 하는 방법까지 알려주세용^^
믹시 html / style 소스 모두 알려주시면 감사하겠습니다.
또한 본 글이 본인에게 도움이 많이 되셨다면~ 그러한 분들은 추천 ★팍팍★ 과 댓글의 센스를 남겨주세요^^
사업자 정보 표시
(주)부동산중개법인이산 | 박우열 | 서울시 마포구 마포대로 63-8, 지하1층 69호(삼창빌딩) | 사업자 등록번호 : 528-88-00035 | TEL : 010-3777-1342 | Mail : 1004kpwy@hanmail.net | 통신판매신고번호 : 해당사항없음호 | 사이버몰의 이용약관 바로가기
'■ 컴생활정보 ■' 카테고리의 다른 글
2달 간의 애드젯 보고서 얻은것과 잃은것이 있다면.... (0) | 2010.10.13 |
---|---|
추천버튼 작게만들기 2탄- 믹스+ 트위트미미 버튼 추가 (2) | 2010.06.13 |
모든 계약서 한곳에서 무료로 다운받아 써보자 (0) | 2009.07.22 |
내게 필요한 각 경제관련 사이트 (0) | 2009.07.21 |
얼마가 필요해? 돈 가져가세요^^ (2) | 2009.04.01 |