스크립트 입력이 귀찮으신 분들을 위해 소스를 직접 올려드립니다. (본문 하단)
필요하신분은 다운로드해서 사용하세요. 단 적용하는 단계에서 조심해서 다루시길 바랍니다. ^^
그리고, 원문에 비해 좀더 알아보기 쉽도록 코드를 정리하였고, 스타일을 약간 변경하였습니다.
다음 블로거뉴스 위젯을 블로그에 달려고 하면 한가지 고민이 생깁니다. 추천뉴스, 인기뉴스, 최신뉴스라는 세가지 정보화면 중에서 어떤것을 메인으로 할까에 대한 고민이지요.
물론, 조그만 역삼각형을 클릭하면 드롭다운 목록이 열리면서 다른 목록으로 전환이 되긴 합니다만, 사람 심리가 왠지 두번 클릭을 하면 영~ 귀찮은 생각이 들기 마련입니다.
추천/인기/최신 탭
그래서 생각한것이, 바로 가기 버튼을 이용해서 탭을 만들어보자고 생각을 했습니다.
이게 말로 설명할려니까 좀 힘든거 같은데, 아래 그림을 보는것이 이해가 빠를 듯 합니다. 사실, 혼자 생각한건 아니구요, 믹시의 mixUP 캐스트위젯을 좀 참조했습니다. ^^
위쪽에 세가지 뉴스를 나타내는 링크를 달고, 각각을 클릭하면 해당 목록을 아래에 보여주면서 메뉴의 색상을 진하게 바꾸도록 하였습니다.
만들어 보자
My글 퍼가기
이를 위해서는 우선, 블로거 뉴스화면 - My글 퍼가기로 가서 원하는 디자인을 선택한 후에, 소스퍼가기 부분의 소스를 메모장 같은 곳에 복사하여 둡니다.
제 경우는 이렇게 되는 군요 (클릭하시면 크게 보입니다.)
이중에서 src='어쩌구저쩌구' 하는 부분을 자세히 보면 아래와 같습니다.
http://api...../my_widget?skin=2&page_size=7&init_type=recommend&is_footer=1&daumid=crazybar03
코드 작성하기
다시 메모장을 새로 열어서 아래 코드를 입력합니다. 이때, 1번 부분은 위 주소의 빨간색 부분을 입력하고, 2번 부분은 위 주소의 파란색 부분을 입력합니다. (클릭하시면 크게 보입니다.)
블로거뉴스위젯이 IFRAME 태그를 이용해서 내용을 채우도록 되어 있는데, 이를 링크와 연동하여 원하는 내용으로 바꾸도록 한 것입니다. 이때, 선택된 링크의 스타일을 약간 다르게 적용시켜서 눈에 띄도록 하였습니다.
웹페이지에 적용하기
이제 이 코드를 블로그 상의 붙이고 싶은 부분에 가져다 붙이면 모든 준비가 끝이 나는 군요. 제 경우는 우측 사이드바에 붙여두었습니다.
모든 절차가 완료 되었으면, 각각의 링크를 클릭하여 원하는 기능이 잘 수행되는지 확인해 보면 되겠죠 ^^.. 결과가 궁금하시면 본블로그 우측 사이드바를 보세용
참고로, 크롬과 익스플로로 7.0에서는 정상동작함을 확인하였습니다.
나머지
혹시 필요하신분 계실까봐 소스코드도 같이 올립니다. 적용하시는 단계에서 기존의 스킨의 틀이 깨지지 않도록 섬세하게 작업하시기 바랍니다.
bloggernews.zip
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| 딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자 (2) | 2009/02/25 |
|---|---|
| 2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요? (14) | 2009/02/25 |
| 블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가) (2) | 2009/02/25 |
| 자주 안보는 목록은 드롭다운박스로 바꾸자 (10) | 2009/02/19 |
| HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기 (9) | 2009/02/19 |
| 위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기 (4) | 2009/02/18 |
댓글을 달아 주세요
좋은정보 감사합니다.ㅎㅎㅎ
저도 아직 달 염두가 안나는군요ㅠㅠ
댓글 감사드립니다. ^^
근데 역시 문제는 기능이 아니고 디자인인가봐요.
스킨과 어울리도록 만드는게 더 오래걸리네용.. 에궁..