블로그독 추천 버튼, 스킨에 추가하기 + 크기 조정 및 하단 정렬

 다음뷰, 마이픽업 등 추천 버튼 위치 설정하기 포스팅에서 각 추천 버튼을 본문 하단에 깔끔하게 정렬하는 방법을 소개했었는데요. 기억하시나요? ^^ 그 글에서 제가 언급하기를... 네이트 블로그독은 각 글마다 수동으로 추천 버튼을 추가해야 해서 번거롭다. 그런데 6월초에 블로그독 추천 버튼도 스킨에 자동으로 추가되는 소스를 제공한다더라고 말씀드렸었죠? 드디어 소스를 공개 했더군요. 요즘 연애 사업(?)에 빠져있어서 신경을 못쓰고 있었는데 형석님께서 알려주셔서 ^^;;
 그런데 소스 자체는 좀 실망스러웠습니다. 뭐 그런 이야기는 지루하니까 패스하고~ 약속했던대로 블로그독 추천 버튼을 스킨에 추가하여 각 포스팅마다 자동으로 생성되게 하고, 하단에 깔끔하게 정렬하는 방법까지 소개를 하겠습니다.

 덧붙여, 원래 블로그독 추천 위젯의 크기가 아래 이미지처럼 좀 크죠? ^^;;

 버튼형으로 제공해 줄거라 생각했는데 이 부분도 좀 아쉽네요. 언젠가는 나오겠지요. 아무튼 블로그독 위젯의 크기도 적당하게... 즉, 크기를 조정하는 방법도 간략하게 설명하겠습니다.

블로그독 추천 버튼, 스킨에 추가하기

▼ 네이트온 블로그독에서 [마이페이지] 로 이동합니다. 자신이 작성한 글에 커서를 가져가면 [위젯] 버튼이 표시되는거 아시죠? 위젯 버튼을 클릭해 주세요 ^^ 아무 글이나 상관 없습니다.

▼ [스킨에 넣기] 메뉴를 선택하고, 자신의 블로그 서비스를 선택합니다. 저는 티스토리니까 티스토리를 기준으로 설명드릴게요.

 위 소스를 복사하여 스킨에 추가하면 처음에 보여드린 블르그독의 큰 추천 버튼 위젯이 각 글마다 자동으로 표시가 됩니다.

블로그독 추천 버튼 크기 조정 / 정렬하기

크기 상관없이 사용하실 분은 위 내용을 skin.html 의 원하는 위치에 추가하시면 됩니다. 아래 내용은 추천 버튼의 크기를 현재 제 블로그 하단에 보이는 것처럼 표시하면서 정렬하는 방법입니다.

▼ 위에서 복사한 스킨에 추가하는 블로그독 위젯 소스입니다. 노란색으로 표시한 부분이 원래 소스에는 없지만 추가한 내용입니다. class 를 부여했는데요. CSS 에서 스타일을 지정하기 위함입니다.

▼ 아래는 style.css 에 추가하면 되는 내용입니다. 현재 제 블로그 CSS 에 추가된 내용인데요. 노랗게 표시한 .blogdoc 보이시죠? class 에서 부여한 이름과 동일해야 제대로 스타일이 지정됩니다.

 위 CSS 내용은 아래 텍스트 파일을 다운로드 받아서 이용하시면 되는데요. 참고로 저처럼 블로그독의 배경을 회색톤으로 표시하지 않고 흰색 등으로 변경하시려면 background-color 와 border 의 색상을 변경하시면 됩니다.

 

블로그독 CSS.txt

 마지막으로, 만약 다음뷰, 마이픽업 등 추천 버튼 위치 설정하기 포스팅의 내용을 참고하거나 적용하신 분들은 skin.html 에 적용할 때 아래 이미지처럼 넣으시면 됩니다. 스킨에 적용된 일부분만 보여드릴게요 ^^;;;

 빨간색 네모 박스를 보시면 얼추 순서가 짐작되시죠? 제 블로그 하단과 비교해 보시면 바로 이해되실 듯... 참고로 view 는 예전에 소개한 웹표준(XHTML) 에러 없는 다음뷰 추천 버튼 추가하기 포스팅에서의 다음뷰 추천 버튼 소스입니다.

수정한 블로그독 추천 버튼 테스트 장면

 아래 영상은 단순히 별표 모양의 버튼만 보이게 한 후 클릭시 제대로 추천이 이뤄지는지 테스트해 본 장면입니다.

 

 제대로 잘 되는걸 확인하실 수 있죠? 제가 확인한 결과 '익스플로러8(IE8), 파이어폭스, 구글 크롬, 오페라' 에서 지정한 스타일대로 이상없이 표시되면서 추천도 되는 걸 확인했습니다. 요청에 의해 잽싸게 하느라 좀 엉성한 면도 있습니다만 관련해서는 차차 보완할게요. 네이트 블로그독 버튼을 스킨에 자동으로 추가하고 원하는 위치에, 원하는 크기로 깔끔하게 정렬해서 사용해 보세요 ^^