예전 블로그 글에 카테고리 글 더보기 위치 변경하기 글 작성을 했었습니다.
그때 작성한 글 내용은 카테고리 글 더보기 위치 변경을 하면서 믹시,다음뷰를 넣는 글이였지요.
이번에 새롭게 작성하는 카테고리 글 더보기 위치 변경하기는 소스를 새롭게 하는것이 아니라 응용편이라고 보시면 될듯합니다.
제가 반응형 스킨 FastBoot를 테스트 블로그에 설치해서 이것저것 해보는데 '카테고리 글 더보기 위치 변경하기'는 꼭 추가해야 겠더군요.
그래서 글 작성을 다시 합니다.
'카테고리 글 더보기'플러그인을 사용하면서 본문 글 하단에 어떠한 아이템을 장착하고자 할때 아래 이미지처럼 보일것 입니다.
전 각종 SNS버튼 + 블로그 도움말 (?) 링크를 걸어둘려고 소스 입력을 했습니다. 제가 의도한 레이아웃은 '카테고리 글 더보기' 위로 보여야 하는데 위 이미지처럼 카테고리 글 더보기 아래로 들어가 버렸네요.
이 부분을 소스 추가를 통해 바꿔 보겠습니다.
위 이미지처럼 나오게 하는거랍니다.^^
FastBoot 카테고리 글 더보기 위치 변경하기
스킨 백업을 하셨다면 진행해 보겠습니다.
티스토리 관리 - > HTML/CSS 편집란에 추가할 소스는 2군데 입니다.
<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 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>
<!-- 카테고리 글 더보기 위치 변경 소스2 end -->
카테고리 글 더보기 위치 변경 소스1 ,카테고리 글 더보기 위치 변경 소스2 로 나눠져 있는데 일단 카테고리 글 더보기 위치 변경 소스1 을 넣어 보겠습니다.
티스토리 관리 - > HTML/CSS 편집을 선택 하시고 Ctrl + F를 눌러 찾기 창에 </head>를 입력하세요.
검색된 '</head>'위 (화살표 참조)에 <!-- 카테고리 글 더보기 위치 변경 소스1 start --> 부터 <!-- 카테고리 글 더보기 위치 변경 소스1 end -->까지 넣어주시면 됩니다.
그리고 찾기 창에 'article_rep_desc'를 입력 하세요.
'article_rep_desc', /DIV 사이에 <!-- 카테고리 글 더보기 위치 변경 소스2 start --> 부터 <!-- 카테고리 글 더보기 위치 변경 소스2 end -->까지 넣어주시면 됩니다.
그리고 저장을 해주시면 카테고리 글 더보기 위치 변경 작업은 끝났습니다.
이제 사용자 아이템을 넣을때 <!-- 카테고리 글 더보기 위치 변경 소스2 start --> 위로 소스를 입력하면 '카테고리 더보기' 목록 위로 보이고 <!-- 카테고리 글 더보기 위치 변경 소스2 end --> 아래로 소스를 입력하면 '카테고리 더보기'목록 아래로 보이게 됩니다.
간단하게 소스 추가를 통해 본문 글 하단을 꾸밀수 있게 되었습니다.
블로그를 운영하면서 여러가지 신경쓸것들이 많지만 글 읽는 입장에서 편안하고, 깔끔하게 정리된 본문 글이 가독성이 좋습니다.
그러니 방문자 편의를 위한 아이템을 설치할때 정리된 느낌을 주는것도 중요하다고 생각합니다.^^
^^ getElementsByClass 함수에 저는 눈이 더 가는걸요.. ㅎㅎ
좋은 응용입니다. 소셜창도 미리 만들어놓는게 나으려나요.. 저는 AddThis로 만족을 하고있어서.. ^^
잘 보았습니다.
안녕하세요.
저두 AddThis로 만족한답니다. 이것저것 이용해 봤지만 AddThis를 선택 했네요.
댓글,방문 감사합니다.