홈페이지 운영할때나 지금처럼 블로그 운영을 하면서 제가 신경쓰는 부분은 전체적인 레이아웃이 깔끔한가 아닌가를 신경씁니다.
깔끔하게 정리된 블로그,홈페이지가 방문하시는 분들께 정보 전달력이 더 좋은거 같아요.
그래서 본문 글 작성할때 상당히 신경을 쓰고 있답니다.
제 블로그에도 '믹시,다음뷰,그리고 광고'가 달려있습니다.
광고로 수익이 발생하는 부분은 없지만 그래도 남들 다 달기에 달아봤습니다.-.-
이것저것 추가 하다보면 본문에 작성한 글 읽기가 상당히 어지러워질수 있습니다.
그래서 깔끔하게 정리해서 사용중인데 그 부분을 소개 할까 합니다.
일단 소스 수정을 하시기 전에 믹시 설치코드를 얻어 두세요.
회원 가입이 안되있으신 분들은 회원가입후 따라 하시면 됩니다.
믹시홈페이지(http://mixsh.com/) -> 마이믹시 -> 믹스업위젯 -> 설치코드생성해서 복사
위 이미지로 설명을 합니다.
1. 로그인후 '마이믹시'를 눌러주세요.
2. 화면 하단에 보시면 2번 이미지처럼 나오죠.'믹스업위젯'을 눌러주세요.
3. 간단한 설정화면 입니다. 자신의 블로그 선택하시고 '확인'을 눌러주세요.
그럼 위 화면 처럼 코드가 생성됩니다.
박스친 부분을 마우스로 클릭하면 '클립보드'에 자동으로 복사를 합니다.
'확인'을 눌러주시고 메모장을 열어서 붙혀넣기 해두세요.
블로그 관리자로 들어가서 DAUM view,믹시,카테고리글더보기 설정을 합니다.
플러그인설정->글 보내기->DAUM view를 열어서 위 '표시하지 않음'에 체크하고 '저장'을 눌러주세요.
플러그인설정->글 보내기->믹시를 열어서 위 '표시안함'에 체크하고 '저장'을 눌러주세요.
이렇게 하는 이유는 HTML/CSS 편집에서 위 두개의 소스를 직접넣어줄려고 하는것입니다.
플러그인설정->꾸미기->카테고리 글 더보기를 열어서 목록갯수을 지정하시고 '저장'을 눌러주세요.
이제 HTML/CSS 편집에서 소스만 넣어주면 됩니다.
HTML/CSS 편집
만일의 사태에 대비하시고 작업을 하셔야 문제가 생겨도 복구가 가능합니다.
HTML/CSS 편집에서 소스 수정,추가 할 부분 세부 사항입니다.
1. 카테고리 글 더보기 위치 변경 소스1
2. 카테고리 글 더보기 위치 변경 소스2
3. 다음뷰,믹시 추천버튼 코드 수정 소스 추가
4. 추천 권유 문구
위 순서대로 설명을 하겠습니다.
1. 카테고리 글 더보기 위치 변경 소스1
HTML/CSS 편집 -> skin.html 에서 문자열' _page_title_'를 찾아서 아래부분에 "카테고리 글 더보기 위치 변경 소스1" 붙여넣기
<!-- 카테고리 글 더보기 위치 변경 소스1 start -->
<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>
<!-- 카테고리 글 더보기 위치 변경 소스1 end -->
2. 카테고리 글 더보기 위치 변경 소스2
HTML/CSS 편집 -> skin.html 에서 문자열' _article_rep_desc_'를 찾아서 아래부분에 "카테고리 글 더보기 위치 변경 소스2" 를 붙여넣기
글 색상이 기본 그레이로 되어있습니다. 두번째 코드 gray 부분을 원하는색으로 수정 (플러그인에서 변경 불가능)
<!-- 카테고리 글 더보기 위치 변경 소스2 start -->
<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");
if (ref_source == null) //카테고리로 분류되지 않은 글이 있는 경우 에러처리
{
// alert("Error of NULL data"); This article doesn't have categories.
// return true;
}
else // This article is classified into some of categories.
{
MF_Reference.innerHTML = ref_source;
MissFlash_Div_Num += 1;
//]]>
}
< /script>
3. 다음뷰,믹시 추천버튼 코드 수정 소스 추가
HTML/CSS 편집 -> skin.html 에서 문자열' _article_rep_desc_'를 찾아서 아래부분에 "다음뷰,믹시 추천버튼 코드 수정 소스 " 소스를 수정후 붙여넣기
<!-- 추천버튼 코드수정 start-->
<table width="100%" style="border-collapse:collapse; border:1px #E5E5E5 solid;">
<tr height="100"><td width="20" rowspan="2"></td><td width="150" rowspan="2">
구글광고,블로그박스 광고 주소 등 넣을위치
</td><td align=center valign=bottom>
<embed src="http://api.v.daum.net/static/recombox1.swf?nurl=본인 블로그 주소 입력[##_article_rep_link_##]"quality="high" bgcolor="#ffffff" width="400" height="80" type="application/x-shockwave-flash"></embed>
</td></tr>
<tr><td>
본인의 믹시 코드주소
</td></tr>
</table>
<!-- 추천버튼 코드수정 end -->
빨간색으로 체크된곳에 소스를 넣어주시면 됩니다.
4. 추천 권유 문구
"글이 맘에 드시면 손가락 꾹 눌러주시고..구독+하시는 센스까지.." 문구넣기
HTML/CSS 편집 -> skin.html 에서 문자열' _article_rep_desc_'를 찾아서 아래부분에 "추천 권유 문구 소스" 를 수정후 붙여넣기
빨갛게 표시된
http://v.daum.net/my/anikorea1 은 자신의 다음뷰 주소로 수정
http://anikorea.tistory.com 이 부분은 자신의 블로그 주소로 수정
<div style="text-align: center;">
<a style="padding: 5px; background-color: #4169e1; font-family: Dotum; color: white; font-size:
10pt; text-decoration: none;" href="http://v.daum.net/my/anikorea1? blogurl=http://anikorea.tistory.com"
target="_blank">글이 맘에 드시면 손가락 꾹 눌러주시고.. <span style="color: yellow; font-weight:
bold; text-decoration: underline;">구독+ </span>하시는 센스까지.. ^^</a></div>
소스 작업은 끝났습니다.
작업을 하시면서 느끼신분들 계실듯.. '_article_rep_desc_' 아래에 들어가는 소스 순서대로 본문에 보여줍니다.
그래서 작업 과정이 약간 복잡했을수도 있습니다.
혹시나 실수가 있으실까봐 일부러 그렇게 한것입니다.^^
완성된 화면은 제 블로그 하단에 (이 글) 바로 보입니다.
'글이 맘에 드시면 손가락 꾹 눌러주시고..' 이 부분만 약간 틀립니다. 색상만 바꾸면 되는 부분이죠.
이 글은 '인포모아(http://infomoa.kr/261)에서 가져와 약간 수정했습니다.
아~~ 참고로 다음뷰 아이콘 바꾸는 방법 아세요?
http://api.v.daum.net/static/recombox1.swf 에서 recombox1 <- 1이란 숫자를 바꾸시면 됩니다. 1~4번까지 있습니다.
감사히 고쳤습니다.
댓글 감사합니다.^^
저도 카테고리 글더보기를 이동해 보려고 소스를 서핑중이었습니다. 근데 저는 말씀하신대로 했는데 기존에 있던 카테고리글보기는 그대로 있고 변경한 위치에 새로운 blank 박스만 하나 생겨 납니다. 방법이 없을까요?
안녕하세요.텐션님 방금 블로그 들어가 보니 잘 적용되신듯 합니다.
벌써 수정하신듯 하네요.
사용하는 스킨마다 html코드가 달라서 보여주는 틀이 깨지는 경우도 있고 합니다. 그 부분이 제일 힘들지요.
어이쿠야 ㅋㅋㅋㅋㅋ 진짜 좋은정보를 놓칠뻔했네요
바로 바꿧습니다~ 감사합니다^^!
소스적용을 바로바로 하시는거 보니 내공이 상당하시네요.^^
블로그 이쁘게 알차게 운영하세요.^^
비밀댓글입니다
안녕하세요 벼룩이님
질문하신 다음뷰는 제 생각으론 글 작성시 발행을 안해서 안되는거 같습니다.
글 수정 들어가셔서 발행을 해보세요.
아마 그 문제일듯 합니다.
믹시는 저두 사용하다보니 안되더군요.
이상하다 생각하구 믹시 홈에 로그인을 해보니 제 계정이 정지되 있더군요. 이유는 모르겠지만...
그래서 글 남겼더니 잘 돌아가더군요..
천천히 확인해 보세요.^^