몽리, 꿈속으로

2010.06.07 07:50  인터넷/블로그팁

블로그 꾸미기

네이트에서 운영하는 메타사이트 블로그독(블독)의 좋아 추천버튼 위젯을 이제 일일이 번거롭게 글 발행후 방문하여 추천버튼 위젯 소스를 복사하고 블로그 게시물등에 넣고 발행할 일이 없어졌습니다. 반대로 말하면 게시물에 블로그독(블독) 좋아 추천버튼 위젯의 소스를 직접 일일이 추가를 해서 발행을 한 블로그들은 일이 좀 커져버렸다는 얘기입니다. 혹시나 블로그독(블독)도 언젠가는 블로그 스킨에 넣고 사용을 할수 있는 추천버튼 위젯을 내놓지 않을까 싶었는데 블로그독(블독)을 오픈한지 9개월만에 스킨에 넣고 사용할수 있는 위젯 형태의 좋아 추천버튼 서비스를 시작했습니다.  저도 물론 블로그독(블독) 추천버튼을 블로그 스킨에 넣고 사용을 했었지만 강제로 사이즈를 줄여 사용을 했었는데 일이좀 많아졌습니다.

제 블로그에 강제로 블로그독(블독) 추천버튼을 줄여 사용하는것을 보고 많은 분들이 문의를 하셨는데 글 발행후 소스를 따와 강제로 줄이는 무식한 방법이라 소개를 안드렸었는데 이제 블로그 스킨에 소스코드만 한번만 추가해 주시면 되겠습니다.

블로그독에 가입하여 블로그 등록을 한 블로거들에게 해당되는 내용입니다.




블로그독 추천버튼 위젯 블로그 스킨에 넣기


블로그 꾸미기 - 블로그독(블독) 추천버튼 위젯 크기 작게 만들어 블로그 스킨 원하는곳에 넣는 방법블로그독 마이페이지 추천 위젯 퍼오기


블로그독 추천버튼 위젯을 블로그 스킨에 넣는 방법은 아주 간단합니다. 우선 블로그독 마이페이지(http://blogdoc.nate.com/user/list) 에서 등록된 글 리스트항목에서 우측 상단에 마우스 룰오버시 나오는 위젯을 클릭하시고 위젯 넣기 창에서 우측상단의 스킨에 넣기를 선택후 사용중인 블로그 서비스툴을 선택하시고 생성된 추천 위젯 소스를 블로그에 넣어주시면 되겠습니다.


블로그 꾸미기 - 블로그독(블독) 추천버튼 위젯 크기 작게 만들어 블로그 스킨 원하는곳에 넣는 방법블로그독 추천 위젯 원본 크기


스킨에 넣기를 통해 생성된 블로그독 추천 위젯 소스코드를 블로그 스킨에 넣으면 이러한 형태로 출력이 되게 됩니다. 크기가 좀 크죠 가로 , 세로 크기가 349 x 74 입니다.


 <!--블로그독 위젯 시작 -->
<div 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=7689&p_url=http://"+document.domain+"[# #_article_rep_link_##]'></scr"+"ipt>");</script></div>
<!--블로그독 위젯 끝-->

티스토리 블로그용 예제 : 
티스토리 치환자 문제로 # # = ## 입니다. 7689 라는 숫자 외에는 동일한 소스로 생각이 됩니다.



블로그독 추천버튼 위젯 작게 만들어 블로그 스킨에 넣기


블로그 꾸미기 - 블로그독(블독) 추천버튼 위젯 크기 작게 만들어 블로그 스킨 원하는곳에 넣는 방법블로그독 추천 위젯 사이즈 조절후 크기


블로그독(블독) 추천버튼 위젯이 크면 크기를 줄여주면 되는것이죠. 원하는 크기로 팍팍 줄여서 사용을 하시면됩니다. 줄여서 사용을 해보디 적당히 좋은 사이즈가 나오긴 하더군요.

블로그독 추천버튼 위젯소스 원본 소스에서 한줄만 수정을 해주고 CSS에 스타일만 지정을 해주시면 아주 간단하게 완료가 됩니다. 물론 위치는 적당한 곳에 잡으시면 되고요. 공유버튼 소스는 이미 공개를 해드렸고 추천버튼 박스 정렬도 바로 정리해서 올려놓겠으니 참고 하시면 되겠습니다. 오늘은 너무 졸려서..

<div style="text-align:center"> => <div class="blogdoc_widget"> 이렇게 바꿔주시고 하단의  style.css 추가내용을 추가해주시면 됩니다. 아주 간단하죠.

skin.html 추가내용
 <div class="blogdoc_widget"><script type='text/javascript'>document.write("<scr"+"ipt type='text/javascript' src='http://w.blogdoc.nate.com/widget.php?c_seq=7689&p_url=http://"+document.domain+"[# #_article_rep_link_##]'></scr"+"ipt>");</script></div>

style.css 추가내용
 .blogdoc_widget{
float:left;
background-color : #ffffff;
border-right : 1px solid #CCCED3;
height : 72px;
margin: 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
width : 74px;
overflow : hidden;
}

margin과 padding 여백등은 일단 값이 없지만 스킨에 따라 숫자만 변경을 해주시면 됩니다. 배경색(background-color)과 테두리 색상도(border-right) 변경이 가능하나 딱 잘 맞춘듯하니 그냥 사용을 하셔도 되고요. 가로(width)와 세로(height ) 크기도 역시 변경이 가능하나 제가 보기 좋게 잘 맞췄네요. +_+;;

드래그가 안되시는 분들은 아래의 첨부파일을 다운받으세요.
blogdoc_widget.txt

신고
몽리, 꿈속으로의 모든 게시물은 사전 동의 없이 펌질, 재배포, 재사용을 할 수 없습니다.
직접 링크를 선호합니다. [저작권 규약]
트랙백2개 댓글 34 개가 달렸습니다.
욕설, 비방 글과 음란,사행성,상업적 광고의 댓글은 삭제와 동시에 스팸 필터링 합니다.
닉네임 및 정확한 사이트 주소 (개인블로그, SNS 또는 이메일)가 없는 댓글은 무대응 및 삭제될 수 있습니다.

  1. BlogIcon 배리본즈님의 댓글

    좋은 정보 잘 보고 갑니다. 즐거운 하루 되세요.

  2. BlogIcon 러브드웹님의 답글

    매번 댓글 감사합니다~

  3. BlogIcon 펨께님의 댓글

    좋은 정보 감사합니다.

  4. BlogIcon 러브드웹님의 답글

    감사합니다~

  5. BlogIcon 안다님의 댓글

    아~좋은 정보 감사합니다.
    저도 제 블로그에 요렇게 한번 달아봐야겠어요.
    아침부터 기분 좋은 글입니다.
    날씨는 덥지만 시원한 한주 보내는 러브드웹님 되세요~!!!

  6. BlogIcon 러브드웹님의 답글

    아 시원한 맥주 보내 주신다는것으로 봤어요 ㅋㅋ

  7. BlogIcon 마음의 꿀단지님의 댓글

    정보 감사합니다 ~

  8. BlogIcon 러브드웹님의 답글

    감사합니다~

  9. BlogIcon 씨디맨님의 댓글

    굿 정보! 저는 왼쪽에 작게 해서 구겨 넣어봐야겠어요. 근데 블독도 별 위에 숫자가 나오면 좋겠다는.

  10. BlogIcon 러브드웹님의 답글

    그르네 별위에 숫자가 나오면 더 좋겠다~~ 너가 만들어줘~ 어서~~~

  11. BlogIcon 돌이아빠님의 댓글

    이걸 줄여야 하나 말아야 하나 고민중입니다. ㅎㅎ

  12. BlogIcon 러브드웹님의 답글

    개인적인 의견으로는 다음뷰 말고는 다 줄여주시는게 좋지 싶어요. 다음뷰는 구독 버튼도 있으니 안줄여줘도 좋고요~

  13. BlogIcon G_Kyu님의 댓글

    제게 완전 필요한 정보였는데 감사 합니다 ㅠㅠ

  14. BlogIcon 러브드웹님의 답글

    그렇군요~ 일찍 정리를 해서 올렸어야 하는데..
    적용하시다 안되시면 오세요~

  15. BlogIcon skagns님의 댓글

    블독 버튼 다시는 분들께 도움이 많이 되겠네요. ^^
    잘 보고 갑니다. 즐거운 하루 되시구요.

  16. BlogIcon 러브드웹님의 답글

    블독에 보내면 네이트 메인에 걸릴 기회가 생기니까요~
    감사합니다~

  17. BlogIcon 밉쌍님의 댓글

    오오 이렇게 하는 방법이 있었군요..
    잘배워갑니다 ㅎㅎㅎ

  18. BlogIcon 러브드웹님의 답글

    별거 없죠~ 아주 쉬워요~

  19. BlogIcon 무식한욱님의 댓글

    좋은 정보 감사합니다. 왜 이리도 모르는게 많은지 이런거 어디서 배우시는지? 저도 남들한테 이런거 알려줄 수 있을 만큼 성장했으면 좋겠네요. 부럽습니다.

  20. BlogIcon 러브드웹님의 답글

    별로 어렵지 않아요~ 자주 하다 보시면 슬슬 실력이 늘어나실꺼에요~

  21. BlogIcon 라라윈님의 댓글

    매번 입력하고 있는데,
    스킨에 집어 넣어야겠는데요~ ^^
    좋은 방법 알려주셔서 감사해요~ :)

  22. BlogIcon 러브드웹님의 답글

    언제 오프모임에 노트북 들고 나오시면 직접 수정해드리겠듬~~ 아니면 시디맨을 시켜서라도요 ㅋㅋ

  23. BlogIcon 윈컴이님의 댓글

    감사합니다 +_+
    그런데 물하고 기름 만남인지 daum view 와 이것하고 같이 다니지 않네요. 어떻게 하죠?

  24. BlogIcon 러브드웹님의 답글

    지금 보니까 잘 넣어두신것 같은데요 ^^

  25. BlogIcon ILOVEENHYE님의 댓글

    블로그 독 추천 위젯을 러브드웹님의 글처럼 해서 넣었는데요

    추천 위젯은 뜨는데

    추천위젯에 글이 연결되지 않네요.

    혹시 IE 버젼에 따라 달라지는 건가요?

  26. BlogIcon 러브드웹님의 답글

    블로그독 마이페이지 추천 위젯 퍼오기를 통해 본인의 소스를 퍼와서 <div style="text-align:center"> => <div class="blogdoc_widget"> 이부분만 수정을 하고
    아래의 내용은 style.css에 추가하시면됩니다.

  27. 님의 댓글

    비밀댓글입니다

  28. BlogIcon yemundang님의 댓글

    코드가 안긁어져요. T.T
    타이핑할께요. 오타 나면 안되는데...

  29. BlogIcon 러브드웹님의 답글

    아 우클릭 막아놓고 첨부파일을 안넣어 두었네요.
    첨부파일 다운받으세요. ^^

  30. BlogIcon 샘쟁이님의 댓글

    요상한 곳에 댓글이 달렸네욧;;;;

  31. BlogIcon 더머님의 댓글

    모든분들이 저처럼 매번 위젯버튼으로 html소스 넣는것만은 아닌거 거군요 ㅜㅜ 그.. 그런데 skin.html 어디에다 넣는거죠 ㅜㅜ

  32. BlogIcon 애드젯님의 댓글

    안녕하세요^^ 애드젯입니다.
    돈 버는 위젯, 애드젯을 아시나요?

    블로그 예쁘게 꾸며주는 위젯 + 광고 수익을 창출 하실 수 있는 위젯입니다.
    간단한 위젯 설치이기 때문에 어려운 점은 없습니다!!

    애드젯 구경해 보시고 예쁜 위젯 설치하세요!
    >> 애드젯 : www.adget.co.kr

    애드젯 위젯으로 수익을 많이 창출해 보세요!^_^
    앞으로도 더 많은 애용 부탁드립니다.
    감사합니다.(--)(__)

  33. 손님님의 댓글

    안녕하세요...

    반갑습니다...