위즈군의 라이프로그
Reboot... Search /

다음뷰 추천버튼에 텍스트 추가하기

2009.07.30 15:55
오랜만에 개발관련 내용을 작성하는 것 같습니다. 빡지님의 요청으로 다음뷰 추천버튼 부분에 텍스트를 추가하는 코드를 만들어봤습니다.

스킨에 적용해 사용 시 클라이언트 환경이나 스킨에 따라서 많은 로드가 걸릴 수도 있습니다.
그래도 사용을 하고 싶으시다면 아래 코드를 복사해서 블로그 스킨 하단에 추가를 해주시면 됩니다.

티스토리의 경우 관리자->스킨->HTML/CSS 편집에 들어가서 "skin.htm" 부분을 스크롤 해서 "</body>" 앞에 넣어 주시면 됩니다.

출력을 원하시는 문구는 아래코드의 반전 부분을 참고해서 살짝 바꿔주시면 됩니다.

<script type="text/javascript">
  function WizDaumViewText(txt)
  {
    var els = document.getElementsByTagName('div');
    for (var tmpi = 0; tmpi < els.length; tmpi++)
    {
      if (els[tmpi].className == 'blogger-news-widget')
      { els[tmpi].innerHTML = (txt+els[tmpi].innerHTML); }
    }
   }
   WizDaumViewText('글이 마음에 드셨다면 추천 한번 눌러주는 센스~!');
</script>

추가로 글자 스타일을 적용하고 싶으신 분은 스킨수정 페이지의 하단 style.css의 끝에 아래 코드를 수정해서 적용하시면 됩니다.
div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;}
font-size:12px <- 폰트의 크기를 설정합니다.
color:#FF0000 <- 폰트 색상을 설정합니다.
font-weight:800 <- 폰트의 굵기를 설정합니다. (400~800)
background-color:#c3c9e0; <- 배경 색상을 설정합니다.

색상코드는 http://html-color-codes.info/ 를 참고하세요.


출력 예시 화면은 아래와 같습니다.
다음뷰 추천버튼에 텍스트 추가하기

이전에 작성한 "CSS로 티스토리 추천버튼 정렬하는 방법"를 같이 사용해도 좋을 것 같군요.^^
버그나 문의는 이 포스트에 댓글로 작성을 해주세요.
신고
이전 댓글 더보기
열정거북 2010.03.24 15:12 신고 E / R
아우.. 저는 이상하게
문장 밑에 다음뷰 배너가 나오는게 아니라

문장 오른쪽에 배너가 나와요.. 이거 어떻게 해야 하죠?? 알려주시면 감사하겠습니다
위즈 2010.04.02 10:58 신고 E
중간에 width 부분을 조절해서 사용하시면 될것 같은데요.
달콤한인생 2010.04.16 11:10 신고 E / R
좋은 정보 감사합니다.
전 글자색을 어떻게 바꿀까? 한참 고민했었는데...
위즈 2010.04.21 11:46 신고 E
즐거운 하루되세요.^^
고구악마 2010.05.06 19:52 신고 E / R
우와우와우와
감사합니다!
조흔 정보 살포시 업어갑니다 ^_^
위즈 2010.05.10 11:45 신고 E
즐거운 하루되세요.
유쾌한상상 2010.05.14 14:24 신고 E / R
근데요...저는 저 글씨가 추천버튼 왼쪽으로 자꾸 갑니다. 텍스트 꾸미기도 안되구요.
문제가 뭘까요???

그리고, 위말고 아래에 텍스트나 이미지를 넣으려면
어떻게 해야되는지...질문이 많아서 죄송..
위즈 2010.05.16 11:57 신고 E
스킨에 들어간 스타일 중 어떤 것 때문에 꼬여서 그런것 같네요.
스킨에서 하나씩 조절을 해보셔야 할 것 같네요.

텍스트를 아래 보이게 하려면
{ els[tmpi].innerHTML = (txt+els[tmpi].innerHTML);
이 부분을 아래와 같이 수정해주세요.
{ els[tmpi].innerHTML = (els[tmpi].innerHTML+txt);

즐거운 하루되세요.
청담골노대감 2010.05.26 21:32 신고 E / R
안녕하세요~^^
저도 좋은 팁 한번 배워볼까 해서 열심히 따라해봤는데..
윗님과 비슷하게 글씨와 왼쪽에 배열되고 뷰가 오른쪽으로 밀려나와요..
그래서 위 댓글처럼 수정을 했더니 이번엔 반대로 글씨가 오른쪽으로 가고 뷰는 왼쪽으로 밀리는 현상이 발생하네요 ㅠ 초보라 많이 서툰데.. 어떻게 해결해야 될까요?? 좋은 가르침 부탁드립니다~! ^^
위즈 2010.05.28 13:02 신고 E
적용하신 소스 부분을 알려주시면 제가 소스를 수정해서 보내드리도록 하겠습니다.^^
즐거운 하루되세요.
磨斧作針 2010.06.02 23:08 신고 E / R
6월 1일부터 갑자기 다음뷰 추천버튼이 "태그정보가 잘못되었습니다."라는 오류가 뜨네요...
위즈님 블로그의 다음뷰 추천버튼도 마찬가지네요...아마 제가 위즈님께서 위에서 가르쳐준
방법대로 그대로 따라했기 때문에 저도 위즈님처럼 다음뷰 추천버튼에 오류가 생긴것 같은데요
어떻게 고칠 수 없을까요? 다음뷰 추천버튼에 있는 텍스트는 지우고 싶지 않은데...
위즈 2010.06.03 09:56 신고 E
다음 뷰 관련 개편 때문에 다음 쪽에 문제가 있는 것 같네요.
지금은 잘 나오고 있습니다. 한번 확인 해보세요.^^
磨斧作針 2010.06.03 14:58 신고 E
네 잘 되네요...감사합니다...
공학코드 2010.06.06 01:27 신고 E / R
좋은정보 감사합니다
위즈 2010.06.07 09:38 신고 E
즐거운 하루되세요.^^
은퇴농장 2010.06.07 06:58 신고 E / R
저도 청담골노대감님처럼 나오는데요.. 소스는 아래와 같습니다. 감사합니다.

<div align="center">
<script src="http://2u.lc/packer/js/rt.js/default"></script>
<script>
var fn = 'default';
var username = 'euntoi';
var hosturl = 'http://euntoi.tistory.com';
var url = hosturl+('');
var title = ('').replace('"','');
_rt(fn, username, url, title);
</script>
</div>
위즈 2010.06.01 13:18 신고 E
style.css 하단에 추가한 부분을 이렇게 수정하시고.
div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;width:400px;float:right;}

보내주신 소스의 가장 윗부분을
<div align="center" style="width:400px;float:left;">
이렇게 수정해보세요.
그리고 CCL 플로그인도 제외를 해줘야겠네요.
그럼 즐거운 하루되세요.
은퇴농장 2010.06.01 15:29 신고 E
바꾸었는데요... 변화가 없네요.. ㅠ.ㅠ..
위즈 2010.06.01 15:41 신고 E
style.css 하단에 추가한 부분을 이렇게 다시한번 수정해보세요.
div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;width:350px !important;overflow:hidden;float:right;}


그리고 넓이는 width:350px 이부분을 수정해서 조절하시면 될 것 같습니다.
파츠피아 2010.06.07 09:35 신고 E / R
센터에 맞추어 지지 않고 왼쪽에 맞추어지는데요. 센터를 옮기는 방법을 부탁드립니다.
소스는 아래와 같습니다.

<div align="center" style="width:400px;float:left;">
<script type="text/javascript">
function WizDaumViewText(txt)
{
var els = document.getElementsByTagName('div');
for (var tmpi = 0; tmpi < els.length; tmpi++)
{
if (els[tmpi].className == 'blogger-news-widget')
{ els[tmpi].innerHTML = (txt+els[tmpi].innerHTML); }
}
}
WizDaumViewText('글이 마음에 드셨다면 추천 한번 눌러주는 센스~!');
</script>

div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;width:400px !important;overflow:hidden;float:left;}
위즈 2010.06.07 09:38 신고 E
div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;width:400px !important;overflow:hidden;float:left;}
부분에서 float:left;를 삭제하면 됩니다.
div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;width:400px !important;overflow:hidden;}
이렇게요.^^
즐거운 하루되세요.
파츠피아 2010.06.07 09:54 신고 E
어이쿠 벌써 답을 주셨네요. 감사합니다. 그런데.. 중앙으로 옮겨지지 않고 있습니다. ㅠ.ㅠ

<div align="center" style="width:400px;float:left;">
여기에 있는 float:left; 를 지워보기도 하고..

style="width:400px;float:left;" 를 지워보기도 하였는데요..
변함이 없습니다.


다른 방법이 없을런지요.
위즈 2010.06.10 12:59 신고 E
div.blogger-news-widget {display:block;font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;width:auto;}

이렇게 한번 수정을 해보세요. 물론 div 에서도 width:400px;float:left를 width:auto로 변경하시구요.
이번에는 꼭 성공하면 좋겠네요.^^
파츠피아 2010.06.24 20:11 신고 E
너무 감사하고 죄송합니다. 오늘 해 보았는데요.
해결이 되지 않네요.. ㅠ.ㅠ
뭐.. 지금 왼쪽으로 치우쳐 있기는 하지만 사용하는데 전혀 문제가 없으니 그냥 이상태로 사용하겠습니다.
몇번씩 도와주시는데.. 해결되지않아서 제가 다 죄송하네요.
moncler coats 2010.09.03 17:44 신고 E / R
태그정보가 잘못되었습니다."라는 오류가 뜨네요...
위즈님 블로그의 다음뷰 추천버튼도 마찬가지네요...아마 제가 위즈님께서 위에서 가르쳐준
방법대로 그대로 따라했기 때문에 저도 위즈님처럼 다음뷰 추천버튼에 오류가 생긴것 같은데요.
위즈 2010.09.07 20:46 신고 E
사용하시는 브라우저 버전이 어떤 건가요?
moncler jackets 2010.09.03 18:19 신고 E / R
위에서 가르쳐준
방법대로 그대로 따라했기 때문에 저도 위즈님처럼 다음뷰 추천버튼에 오류가 생긴것 같은데요
어떻게 고칠 수 없을까요?
hohoba 2010.11.08 16:33 신고 E / R
추천하기랑 위에 글 붙여져있는거 너무 부러웠는데 덕분에 올렸어요.
너무 감사합니다~
오클라호마호 2011.03.11 16:12 신고 E / R
이거 어떻게 하는지 정말 궁금했는데 여기서 배우고 가네요~
좋은 정보 대단히 감사합니다~
즐거운 하루 보내세요~
위즈 2011.04.10 02:24 신고 E
즐거운 하루되세요.
차테크 2011.07.13 16:38 신고 E / R
위즈님 안녕하세요 문의좀 드리고자 이렇게 댓글 남깁니다.
저 역시 청담골 노대감님과 같은 증상이었는데요.
위즈님 위에 파츠피아님의 글에 댓글 남겨주신것을 참고해서 적용해봤더니
청담골노대감님의 증상은 사라졌지만 파츠피아님과 같이 좌측으로 고정되어버렸습니다.
아무리 해보려 노력해도 아무래도 안되어서 이렇게 문의드려봅니다.


<div align="center" style="width:400px;float:left;">
<script type="text/javascript">
function WizDaumViewText(txt)
{
var els = document.getElementsByTagName('div');
for (var tmpi = 0; tmpi < els.length; tmpi++)
{
if (els[tmpi].className == 'blogger-news-widget')
{ els[tmpi].innerHTML = (txt+els[tmpi].innerHTML); }
}
}
WizDaumViewText('글이 마음에 드셨다면 추천 한번 눌러주는 센스~!');
</script>


div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;width:400px !important;overflow:hidden;width:auto;}


링크의 제 블로그 들어가시면 바로 보이실거구요..ㅠㅜ
위에처럼 했는데 잘 안되고 있네요.
위즈 2011.07.19 16:42 신고 E
위 코드에 보시면 float:left; 부분을 이용해서 조절이 가능합니다.
어떤 형태로 수정을 하고 싶으신지 한번 더 알려주시면 코드를 작성해보겠습니다.

즐거운 하루되세요.
Happy매니저 2011.08.11 16:52 신고 E / R
저는 style/css 이부분에 div.blogger-news-widget {font-size:12px;color:#FF0000;font-weight:800;background-color:#c3c9e0;} 이런태크가 전혀 없습니다
그래서 글자크기가 변경이 안되네요 그리고 없으면 추가하면되는지요 되면 어디부눈에 추가 하면되는지요
단호한결의 2011.08.19 13:44 신고 E / R
좋은 팁 알려주셔서 감사합니다^^
neck scarves 2012.01.06 23:59 신고 E / R
이것이 내가 한국 사람의 블로그를 방문이 처음이다.
익숙한 인사.
저는 한국 드라마를보고 싶어 ^ ^
이병준 2012.03.06 16:41 신고 E / R
뷰버튼 가운데 정렬이 잘 안되시는 분은 이렇게 해보시길. div.blogger-news-widget {margin:0 auto; font-size:12px;color:#FF0000;font-weight:800;background-color:#ACFA58;width:400px !important;overflow:hidden;}
정우민 2012.07.15 19:18 신고 E / R
오오.. 유용하게 잘 썼습니다. 감사해요~
오자서 2013.05.16 17:58 신고 E / R
ㅎㅎ 감사합니다. 좋은 정보네요~~
Name : Password : Blog : ( )

위즈군의 라이프로그

Category

전체 (569)
개발 (0)
정보 (0)
일상 (0)
정리중 (569)
Total:2,069,299
Today:46 / Yesterday:254
Daum 코드
Powered by Tistory / Skin by 위즈 / Copyright Click Here 라이센스정책 rss 2.0