메타블로그 추천 버튼 통합 및 배경이미지 넣는 방법

 간만에 블로그 스킨과 관련된 팁을 하나 소개하네요. 제 블로그 스킨의 하단에 포함된 내용이 궁금하신 분들이 많은 듯 하더군요 ^^ 스킨 꾸미는게 완전 노가다(?)라서 작업할 땐 짜증나지만 깔끔하게 봐주시면 또 뿌듯한 것이 ㅎㅎ  질문주신 분들을 위해 아래 사진처럼 다음뷰, 믹시 등 메타블로그의 추천 버튼을 정렬 / 통합하고 그 옆에 배경 이미지를 넣는 방법을 소개하겠습니다.



 개인적으로 포스팅을 하고나서 메타블로그 추천 플러그인들이 본문 아래쪽에 세로로 2~3줄 늘어서면 상당히 보기 싫더군요.  그래서 요즘 꼴통짓(?)을 많이 하는 믹시를 제거할까 심히 고민했지만, 믹시를 통해 알게된 지인들도 많은지라 버릴수는 없고해서 위 사진처럼 정렬하는 방법을 택했는데요. 블로그독 버튼은 아직 자동으로 플로그인 추가가 안되고 수동만 되다보니 ㅠㅠ 계속 준비중이라고만 하는데.. 언제 되려는건지;;; 그러고보니 제가 추천 버튼을 꾸밀 때는 켄사쿠님과 러브드웹님이 소스를 알려주셔서 많은 도움을 받았습니다. 이 자리를 빌어 한번 더 감사의 인사를 ^^

 각설하고 위 사진의 좌측처럼 추천 버튼을 정렬하는 방법은 이미 다른 분들이 고생하시면서 완성단계까지 끌어올린 소스들이 있습니다. 바로 아래 출처의 주소에 그 내용들이 있는데요. 추천 버튼 정렬 / 통합에 대한 내용은 아래 주소를 참고해 주세요.

▶ 출처 : http://blog.missflash.com/543


 위 페이지를 참고하시면서 소스를 준비하셨다는 가정하에, 추천 버튼들 우측에 이미지로 된 문구를 넣는 방법을 알려드리겠습니다. <table> 태그를 이용해서 그냥 직접 타이핑을 해도 되긴 하지만 저는 조금 밋밋한 느낌이 들더군요. 그래서 착안한 것이 <div> 태그에 class 값을 줘서 css 에서 스타일을 지정하는 방법입니다. 지금부터 나름(?) 간단하게 설명드릴게요 ^^

메타블로그 추천 버튼 통합 + 배경 이미지 넣기

 먼저, Skin.html 에서 추가할 소스를 알려드릴게요. 아래 소스는 제 블로그 스킨의 Skin.html 에 포함된 내용입니다. 위 출처 링크에서 버튼을 정렬 / 통합하는 소스와 같은 내용으로, 원문과 함께 참고하실 때 헷갈리시지 않게 변경하셔야 할 내용은 빨간색과 초록색으로 표시를 했습니다. 본인의 블로그에 해당하는 빨간색 부분을 쉽게 확인하시려면 ☞여기를 참고하세요. 아래 소스 내용들을 본문 마지막 부분에서 텍스트 파일로 올려드릴테니, 드래그 복사가 안된다고 당황해하지 마세요 ^^;;

<div class="Meta_Blog">
<div id="MissFlash_Div">
<div class="MF_Left_Float" style="height:70px; margin-left:5px;">
    <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='73' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
    <param name='allowScriptAccess' value='always'/>
    <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=128250&guid=http://liverex.tistory.com/<##_article_rep_id_##>&rdate=<##_article_rep_date_##>
&showhitcnt=0&platform=1'/>
    <param name='quality' value='high' />
    <param name='wmode' value='window' />
    <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=128250&guid=http://liverex.tistory.com/<##_article_rep_id_##>&rdate=<##_article_rep_date_##>
&showhitcnt=0&platform=1' quality='high' wmode='window' width='73' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />
    </object>
</div>
<script type="text/javascript">
//<![CDATA[
// Created by MissFlash(http://blog.missflash.com)
var MissFlash_Div = document.getElementById('MissFlash_Div');
MissFlash_Div.setAttribute("id", "MissFlash_Div" + MissFlash_Div_Num);
var MF_Recommend_ID = "MF_Recommend" + MissFlash_Div_Num;
var MF_Recommend_Div = document.createElement('div');
MF_Recommend_Div.setAttribute("id", MF_Recommend_ID);
MF_Recommend_Div.className = "MF_Right_Float";

// by chatii - http://chatii.tistory.com/52
// last updated at 09/03/15

// Modified by MissFlash(http://blog.missflash.com)
var recombox = document.getElementsByTagName("embed");
for (var i=0; i<recombox.length; i++) {
    if (recombox[i].getAttribute("src") && recombox[i].getAttribute("src").indexOf("http://api.v.daum.net/static/recombox1.swf") != "-1") {
        var recomdiv = recombox[i].parentNode;
        recomdiv.innerHTML = recomdiv.innerHTML.replace("recombox1.swf", "recombox3.swf").replace("400", "67");
        var param = recomdiv.parentNode.getElementsByTagName("param");
        for(var j=0; j<param.length; j++) {
        if (param[j].getAttribute("value").indexOf("mixup") != "-1") {
            param[j].parentNode.removeAttribute("align");
                recomdiv.appendChild(param[j].parentNode);
            }
        }
        MF_Recommend_Div.innerHTML = recomdiv.innerHTML;
        recomdiv.style.display = "none";
    }
}
MissFlash_Div.appendChild(MF_Recommend_Div);
//]]>
</script>
</div>
</div>

 위 소스를 보시면 원문과는 다른 색상이 하나 보이시죠? 바로 노란색입니다. 바로 노란색처럼 <div class> 태그를 추가해주고 css 에서 스타일만 지정하면 간단하게 이미지를 추가하실 수 있습니다. 물론 응용하시면 위 내용뿐만 아니라 다른 곳에도 같은 방식으로 배경에 이미지를 추가하실 수 있겠죠?

 다음으로 style.css 에 추가하실 소스입니다. 역시 제 블로그 스킨에 포함된 내용 그대로입니다.

.Meta_Blog {
border : 1px solid #e5e5e5;
margin : 0 0 10px 0;
padding : 3px;
background: transparent url("./images/click.gif") no-repeat right;
height : 80px;
}

 class 에서 지정한 값을 style.css 에서 .(점) 뒤에 입력하시면 그 값에 대한 스타일이 만들어집니다. 즉, 위 소스는 Skin.html 에서 <div class> 로 지정한 Meta_Blog 값에 대한 스타일인거죠.

 위 소스에서 빨간색 URL 이 바로 "그냥 가시려구요? 추천 버튼을 꾹! 눌러주세요" 라는 이미지입니다. 제가 직접 만든건데... 본인이 원하는 스타일로 이미지를 제작하시면 되겠네요 ^^ 그리고는 스킨에 파일을 업로드하고 해당 파일명을 click.gif 대신에 입력해 주시면 됩니다. 주의하실 점은 기존에 업로드되어 있는 파일과 동일명이면 안되는거 아시죠? ^^ 스킨에 포함된 다른 이미지가 덮어쓰여져서 사라져버립니다. 

 그리고 초록색 부분이 해당 이미지의 위치를 어디에 둘 것이냐를 설정하는 것인데, right bottom, right top, 500px 40px 등과 본인이 원하는 위치에 설정하실 수 있습니다. margin, padding 등도 본인이 원하는대로 수치를 조정해서 여백 등을 설정하시면 되겠습니다.

버튼 통합 - 이미지 넣기.txt

 
 위 텍스트 파일에는 위에서 언급한 소스들만 포함되어 있습니다. </head> 위에 추가해야 할 소스, 카테고리 글 더보기 플러그인의 순서 지정, 추천 버튼 정렬 css 등은 출처를 참고하세요 ^^