RSS Widget [Opera Widgetize - Feed Reader]

Category : Web/Design     Posted at 2008.10.12 17:31
RSS Widget [Opera Widgetize - Feed Reader]

오페라 사용자를 위한 Feed Reader 위젯입니다.
저는 베너를 만들어서 오페라 9 다운로드와 함께 티스토리 블로그에 링크해 놓았는데요.




오페라 사용자가 이 피드 리더를 클릭하면 이러한 위젯이 추가됩니다.


말 그대로 피드를 읽어오는 리더기 같은 동작을 합니다.
오페라 유저들에게 좀 더 편하게 구독을 할 수 있는 환경을 구축해 줍니다.
그럼 먼저, 이 오페라 위젯을 어떻게 만들어야 하는가를 알려드리겠습니다.




A. 위젯 만들기.


1. Feed reader 위젯 사이트로 가기.

오페라 사용자라면 누구나 패널바를 사용하실 겁니다.
패널바에는 이런 식으로 북마크, 방문목록 등 여러 패널이 있는데,
그 중에 위젯 패널을 열어 보시면 위와 같은 메뉴가 보입니다.
(사용자가 추가한 버튼에 따라 다를 수도 있습니다.)



이미지와 같이 추가에서 새 위젯을 클릭하면 오페라 위젯 사이트가 열립니다.



+ 만약 아직 마이오페라에 가입 하지 않으셨다면 가입을 하셔야 위젯 사이트도 사용하실 수 있습니다.



친절히 영어를 싫어하시는 분을 위한 가입 방법.








2. Widgetize로 들어가기.

가입이 되었다면 로긴을 하시고 오페라 위젯으로 들어갑니다.
상단에 Widgets, Widgetize, FAQ 등의 네비가 보입니다.
Widgetize를 클릭해서 들어갑니다.






3. 위젯 만들기 시작.

widgetize의 메인 페이지가 나옵니다.
여기서 녹색의 create a widget 버튼을 클릭합니다.





4. 위젯 타입 고르기.


step 1으로 넘어와 위젯 타입을 고르고, I want this type!을 클릭하세요.
우측을 보시면 미리보기가 나옵니다. 원하시는 타입으로 고르시면 되지만,
classic은 이상하게 느리고 잘 작동이 안되서 advanced모드로 추천합니다.
피드리더 외에 갤러리 뷰어도 있는데 마이오페라,플리커,유튜브만 사용 가능합니다.





5. 위젯 꾸미기.

step 2 단계로 넘어와 위젯을 꾸미는 페이지가 나옵니다.





1번 타이틀을 원하시는 대로 채웁니다.
타이틀은 추가되는 위젯의 상단에 표시되고 위젯 목록의 이름으로 쓰입니다.

2번 피드주소를 넣습니다.
마이오페라 홈을 사용하신다면 유저네임을 쓰시면 되고,
저처럼 다른 피드를 사용하시면 아래칸에 feed url을 모두 넣어주세요.
저는 피드버너의 rss 서비스를 사용하므로 그 url을 넣었습니다.



3번 스킨을 고릅니다.
이번에는 블로그에 사용 중인 스킨과 달리 파란 하늘 스킨을 골라보았습니다.
마찬가지로 우측에 미리보기가 뜹니다. 애니메이션으로 최소화와 펼친화면이 모두 나옵니다.
마음에 드는 스킨을 고르셨다면 Make my widget!을 클릭합니다.




6. 테스트 및 완료.

step3이 나오면 설정이 모두 완료된 상태입니다.
아래 try this widget을 클릭하시면 위젯이 추가됩니다.










B. 티스토리에 삽입하기.


1. 소스 카피.

step3에서 만들어진 소스를 하나 골라 복사합니다.
베너가 있는 소스를 하나 골랐습니다.




2. 삽입하기.

사용자모드 > 스킨 편집 > skin.html에서 사이드에 넣거나 푸터에 넣어줍니다.
만들어진 소스를 가운데 삽입하시려면 center를 넣고 테두리 선이 나오지 않도록 border=0를 붙입니다.
베너를 직접 만들어 넣을 실 때는 이미지를 직접 업로드한 후 img src=이미지주소
업로드한 이미지 주소로 바꾸어 줍니다.

적용 예)

Widgetize!



<div>
<center>
<a href="http://widgets.opera.com/widgetize/Feed%20Reader/Advanced/?serve&amp;skin=skin7&amp;widgetname=cream%2Aahnma%20rss&amp;url=http%3A%2F%2Ffeeds.feedburner.com%2Facream&amp;rel=myopera&amp;ref=">
<img src="http://widgets.opera.com/widgetize/icon/168_small_red.png" alt="Widgetize!" title="Widgetize!" border="0">
</a>
</center>
</div>




3. 테스트 및 완료.


만들어진 소스를 스킨에 한번 붙여 보았습니다.
이런 식으로 아래에 추가된 것이 보이실 겁니다.
추가까지 성공하셨다면 확실히 작동되는 지 클릭해 보세요.
처음 테스트 할 때 처럼 위젯 다운로드가 뜬다면 성공입니다.




오페라 위젯이기 때문에 파폭이나 익스에서 클릭하시면 이런 페이지가 나옵니다.






* 위젯 사용 방법


위젯 링크를 클릭하면 이러한 대화 상자가 뜹니다.
위젯 저장 대화상자에서 예를 클릭하세요.




위에서 고른대로 하늘 이미지 스킨의 위젯이 떴습니다.
넣은 타이틀이 표시되고 우측에 3개의 버튼이 보입니다.
발행 글 갯수와 위젯 링크, 닫기 버튼입니다.


이미지를 클릭해 보시면 상세 설명을 보실 수 있습니다.




* RSS 버튼

오페라 베너를 그대로 사용했지만, 원래 그대로 사용하길 거부하는
커스터마이징 세대(?)라서 RSS 버튼으로 바꾸고 싶은데 또 시간 들이기가 귀찮네요.
그러다가 rssbuttons라는 사이트를 발견했는데, 간단히 만들기에 좋은 것 같아요.


이미지를 클릭해 보시면 상세 설명을 보실 수 있습니다.


적용 예)









C.  위젯 구독 확인.

피드버너 가입자라는 전제하에 설명합니다.


피드버너 사이트로 갑니다.
마이 피드로 들어가시면 첫화면에 자신의 블로그 타이틀이 보입니다.



타이틀을 클릭하시면 analyze가 보입니다. 여기서 좌측의 subscribers를 클릭하세요.
우측에서 구독 상태를 일별, 주별, 전체 상태 별로 선택하여 보실 수 있습니다.





파이와 표 모양으로 구독자가 어떤 구독 서비스로 구독하는 지 상세히 설명하고 있습니다.





상태를 원데이로 놓고 어느 하루를 클릭했습니다.
세명의 구독자가 있는데, 오페라 위젯 구독자가 두명이라고 표시 된 것이 보입니다.
마찬가지로 리스트 표에도 오페라 구독자가 표시되어 있음을 알 수 있습니다.



드디어 끝났습니다
내용이 너무 길어서 접을까 따로 자를까 고민을 좀 했었지요.
그냥 보시라고 펼쳤지만 아마도 스크롤의 압박이....
아무튼 오페라 유저에게 도움이 되는 위젯이었길 바랍니다.
오페라 유저가 아니신 분도 오페라를 사용하셨으면 하는 맘도 있고요.
혹자는 다른 브라우저 유저보다 오페라 유저들이 애정이 좀 더 깊다고 하더군요.
저도 이런 것까지 하고 있으니 반박은 못하겠네요.
9.6으로 업글도 했으니 오페라 팁도 좀 올려야 겠습니다.


저작자 표시 비영리 변경 금지
신고
Posted by 크림*앙마

::: Write a comment :::

  1. Favicon of http://www.topchinatrip.com/ BlogIcon china tours commented at 2010.10.25 14:38 신고 │ + - │ add a new comment

    many years ago .I was a student ,like English very much ,because some resons I gave up it .but now I want to learn it again .believe me!!GO GO !!!

  2. Favicon of http://www.tnddj.com BlogIcon Nike Shox commented at 2012.04.24 17:58 신고 │ + - │ add a new comment


    <a href="http://www.tnddj.com/">Nike Shox</a>
    <a href="http://www.tnddj.com/">nike shox rivalry </a>
    <a href="http://www.tnddj.com/">shox </a>
    <a href="http://www.tnddj.com/">shox rivalry </a>
    <a href="http://www.tnddj.com/">nike shox pas cher </a>
    <a href="http://www.tnddj.com/">shox pas cher </a>


    <a href="http://www.tn-tnfrance.com/">air max pas cher </a>
    <a href="http://www.tn-tnfrance.com/">tn air max pas cher </a>
    <a href="http://www.tn-tnfrance.com/">requin cher </a>
    <a href="http://www.tn-tnfrance.com/">pas cher air max </a>
    <a href="http://www.tn-tnfrance.com/">tn requin</a>
    <a href="http://www.tn-tnfrance.com/">air max tn</a>


    <a href="http://www.chaussuresniketnrequin.com/">TN Requin</a>
    <a href="http://www.chaussuresniketnrequin.com/">Nike TN</a>
    <a href="http://www.chaussuresniketnrequin.com/">Chaussures Nike TN</a>
    <a href="http://www.chaussuresniketnrequin.com/">Nike TN Requin</a>

    <a href="http://www.tnrequintnpascher.com">TN Requin</a>
    <a href="http://www.tnrequintnpascher.com">TN Pas Cher</a>
    <a href="http://www.tnrequintnpascher.com">Nike TN</a>
    <a href="http://www.skytnn.com/">Nike air max</a>
    <a href="http://www.skytnn.com/">TN REQUIN</a>
    <a href="http://www.skytnn.com/">Puma Pas Cher</a>

    <a href="http://www.tnrequins2012.com">TN Pas Cher</a>
    <a href="http://www.tnrequins2012.com">Nike tn 2012</a>
    <a href="http://www.tnrequins2012.com">tn foot locker</a>

    <a href="http://www.tnpascherchine.com">TN REQUIN</a> <a href="http://www.tnpascherchine.com">Nike TN</a> <a href="http://www.tnpascherchine.com">Nike Requin</a> <a href="http://www.tnpascherchine.com">Chaussure Requin</a> <a href="http://www.tnpascherchine.com">Air Max Requin TN Pas Cher</a> <a href="http://www.tnpascherchine.com">Puma Pas Cher</a>

  3. Favicon of http://www.dissertation-writers.net/choosing-the-right-dissertation-writers/ BlogIcon dissertation writers commented at 2012.11.28 16:49 신고 │ + - │ add a new comment

    Nothing is more absolutely frustrating to any person than needing to write one's thoughts clearly and concisely on paper, in the form of a personal letter to a friend or loved one, a statement of purpose required in a university application, a professional summation of job performance required by a manager, or an essay, research paper, or thesis required by a high school instructor or college professor for a course grade, and not having the fundamental skills to do so.

  4. Favicon of http://www.swissbusinesscareer.com BlogIcon swissbusinesscareer commented at 2013.01.29 20:15 신고 │ + - │ add a new comment

    i like to see lap in the miles

  5. Favicon of http://www.ancientartsalesroom.com BlogIcon ancientartsalesroom commented at 2013.01.29 20:15 신고 │ + - │ add a new comment

    i like to see lap in the miles

  6. Favicon of http://www.armeniaarts.com BlogIcon armeniaarts commented at 2013.01.29 20:16 신고 │ + - │ add a new comment

    i like to see lap in the miles

티스토리 툴바