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



 개인적으로 포스팅을 하고나서 메타블로그 추천 플러그인들이 본문 아래쪽에 세로로 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 등도 본인이 원하는대로 수치를 조정해서 여백 등을 설정하시면 되겠습니다.


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

LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)

LiveREX유튜브구독
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. BlogIcon 새라새 2010.03.31 05:16 신고

    처음 블로그 만들고 나서 스킨 때문에 고생을 많이해서 이제는 영 손대고 싶은 생각이 없는데..
    이걸보니 또 슬슬 병이 도지네요 ㅋㅋ

  2. BlogIcon 깜신 2010.03.31 06:37

    이거 해야지,해야지 하면서도 계속 미루고 있다능 ^^;;

  3. BlogIcon 불타는 실내화 2010.03.31 08:29 신고

    이거 정말 좋네요~
    그럼 저 그림은 LiveRex님이 직접 그리신건가요~?

  4. BlogIcon 밋첼™ 2010.03.31 17:11 신고

    정말이지.. 이런 글 보면.. 저도 해보고싶지만...
    웹프로그램과 스킨 이런건.. 보기만 해도 머리가 아프네요..ㅠㅠ

  5. BlogIcon semix2 2010.04.01 12:40

    덕지덕지 붙어있던 녀석들을 깔끔하게 정리할 수 있군요! 저도 나중에 시간 내서 한 번 해 봐야겠습니다. 좋은 정보 잘 보고 갑니다~

  6. BlogIcon 미후왕 2010.04.01 19:53 신고

    위의 타이틀도 그렇고 센스있게 잘 배치하시는 것 같습니다.
    깔끔하니 보기 좋습니다. ^_^
    황사에 건강 조심하세요!

  7. BlogIcon CSKIN 2010.04.02 21:06 신고

    저는 할라고 하는데 귀찮아서 자꾸 미루고있습니다요..
    에혀~

  8. BlogIcon 노지 2010.04.06 15:08 신고

    전 포기했어요...

  9. BlogIcon 웅이아뿌 2010.04.20 21:36 신고

    러브드웹님 블로그에서 보고
    탐나서 해야지 했는데 ~

    정말 해야지 하면서 안되는거 같아요 ...
    좋은 포스팅 잘 보았습니다 ~

  10. BlogIcon 노지 2010.04.26 08:44 신고

    좌측연결부터가 전 안되니.......못 알아듣겠어요 켁;;

  11. BlogIcon 찌질철이 2010.07.03 10:11 신고

    아이고 라이브렉스님 힘드네욤~ 드뎌 저도 아래 버튼 모음이랑 왼쪽 고정 버튼까정 일단
    장착했습니다요~ 렉스님 포스트들을 미친뇬 널뛰듯이 보면서 겨우 했네요 ㅎ
    사실은 css이용하는 건 영 감이 안 와서 그냥 html에 테이블 섞어서 넣어 버렸어요 ㅡㅡ;;;;
    어쨌뜬 무지 감사합니다.. 이제 구독자 퐉퐉 늘라나요? ㅎ~

    • BlogIcon LiveREX 2010.07.03 13:07 신고

      어이쿠~ 블로그팁 찾아보시면 더 쉽게 설명한 내용도 있는데... ^^;;

    • BlogIcon 찌질철이 2010.07.03 13:30 신고

      몰라욧~ 전 렉스님바께 몰라요~ 채김지셔욤~~ +.+;
      근데 왼쪽 버튼들이요, left로 여백을 0을 주니까
      왼쪽 끝에 붙어 버려서..적당히 본문에 붙였었거든요.
      근데 이게 브라우저 크기를 바꾸면 본문과의 거리가
      아니라 왼쪽 끝에서 거리가 일정해서 깨져버리드라고요.
      근데 렉스님꺼는 안 그러네요 신기~~
      먼가 스킨의 기본세팅이 다른건가요. 렉스님읜 왼쪽끝을 본문의 왼쪽끝으로 인식하는건가요..움..어렵다

댓글을 남겨주세요 :)




submit