Sep 23
alonesweb2.0 blog, blogging, web2.0, 디자인, 블로그, 스킨
스킨을 변경할 경우나 새로운 위젯을 삽입하고 나면, 다른 환경에서는 어떻게 보일까? 라는 고민이 생깁니다.
실제로 예전 스킨을 변경하고 잘 쓰고 있는데 PC방에서 제 사이트에 접속하고 놀란 적이 있습니다. IE로 접속했는데 우측 프레임이 아래쪽으로 내려가있는 것을 발견하고 스킨을 변경한 적이 있습니다.
그 이후로 파이어폭스에서도 가끔 IE Tab으로 확인하는 버릇이 생겼습니다.
Give Your Blog a Checkup 을 읽다 이와 같은 문제를 해결하기 위한 좋은 사이트를 발견해서 소개해드립니다.
Test your web design in different browsers 라는 곳으로 제목 그대로
OS는 Linux, Mac OS, Windows
브라우저는 FireFox, IE, Safari, Opera 등
에서 웹 사이트의 스크린샷을 보여줍니다.
(※ 각 상황에서 스크린샷을 찍어 주는데는 길게는 30분 이상 걸리지만 한 번에 모든 결과를 볼 수 있어서 좋습니다)
Test your web design in different browsers에 접속하셔서 url을 입력하시고 30분 정도 기다리면 다음과 같이 각 환경에서의 스크린샷을 보여줍니다.
물론, 각 스크린샷을 클릭하면 확대해서 볼 수 있고 모든 스크린샷 이미지들을 다운로드 받을 수도 있습니다.
여러 분의 블로그 (사이트) 방문자를 고려해서 한 번 확인해보는게 좋지 않을까요?
Sep 23
alonesweb2.0 blog, blogging, SEO, tools, web2.0, 블로그
최근 심플블로그님이 제 Google Blogger의 로딩 시간이 3분 정도 걸린다고 제보를 해주셔서 문제가 되는 스크립트를 제거한 적이 있습니다.
(그래서 Alones 3 Column XML Template을 수정하기도 했습니다.)
(저도 그렇지만) 방문자의 인내심은 (그 사이트가 정말 가고 싶은 곳이 아니면) 5~8초가 한계일 것입니다.
티스토리나 Google Blogger, 네이버, 다음 등의 블로그 서비스를 이용한다고 해서 무시할 사항은 아닌 것 같습니다.
요즘 유용하고 재미있는 위젯이나 특정 서비스를 위한 스크립트 코드를 많이 사용하는데, 그런 코드들 때문에 페이지 로딩 시간이 길어질 수 도있기 때문입니다. (저 처럼)
이와 같이 블로그나 사이트의 페이지 로딩 시간이 길어서 방문자를 놓치는 경우를 막기 위해서 SELP SEO라는 곳에서 페이지 로딩 시간을 체크해주는 도구를 웹에서 제공해줍니다.
페이지 로딩 시간 체크는 간단합니다.
1. SELP SEO의 Free website speed checker에 접속합니다.
2. 에디터 박스에 (최대 10개까지) 체크하고자하는 사이트 주소들을 기재합니다.
예전 비누넷 블로그와 이 블로그, 위키, 그리고 Google Blogger를 입력해봤습니다.
3. 에디터 박스 아래 “Check” 버튼을 클릭하면, 아래와 같이 결과가 나옵니다.
외국의 서비스라서 그런지 여기 (서울) 서는 alones.kr/blog가 가장 빠르게 느껴지고 구글 블로그가 더 느립니다.. 반대인 것 같습니다.
그리고 위 표와 같이 사이트의 첫 페이지의 크기도 나오니 트래픽 체크할 때도 좋을 것 같습니다.
Ref: Give Your Blog a Checkup
Sep 22
alonesweb2.0 Blogger, Design, flash, widget, 블로그, 블로그 위젯, 위젯
Widgetbox에 가보면 블로그나 웹 사이트를 위한 다양한 위젯들이 아주 많습니다.
플래시 기반이라 모양도 이쁘고 참신한 것들이 많습니다.
각 카테고리별로 위젯들을 정리해뒀고 필요한 위젯들을 검색할 수도 있습니다.
Google Blogger 등 유명 블로그 서비스는 위젯을 바로 설치할 수 있고,
그외 블로그나 사이트를 위한 code도 제공합니다.
수많은 위젯 중 재미있는 것을 몇 가지 소개해드리면 다음과 같습니다.
아주 이쁜 시계
플래시 카운터
YouTube Videos 2.0
자신의 YouTube 비디오나 favorite 비디오 목록을 왼쪽의 그림과 같이 보여줌
cyber-pet
애완동물을 키울 수 있습니다. 토끼 같은 경우는 당근을 줄 수 있더군요.
Google Site Translator
말그대로 구글의 번역 엔진을 이용해서 사이트를 번역 해줍니다.
대한민국도 있군요 ^^
이외에도 수 많은 위젯들이 있습니다. ^^
Sep 22
alonesweb2.0 Alones 3 Column XML Template, Blogger, Design, Google Blogger, Template, Templates, 블로그 스킨, 스킨
Alones 3 Column XML Template이 update되었습니다.
Alones 3 Column XML Template을 사용하고 있는 Google Blogger 블로그의 로딩 속도가 중국에서 3분이상 걸린다는 심플블로깅님 (mjjin)의 제보에 따라서 Template을 수정했습니다.
(한국에서 접속하면 3분까지는 안 걸리지만, 조금 느리다는 것을 느낄 수 있었습니다)
원인도 심플블로깅님이 말씀해주셔서 빨리 수정할 수 있었습니다. ^^
원인은 Template의 header에 속해 있는 anniyalogam.com의 script 때문인 것 같아서 제거했습니다.
이 템플릿의 베이스 템플릿에서 사용되던 코드인데 hosting 주소가 http://anniyalogam.com에서 http://bvibes.com로 변경되어서 생긴 문제인 것 같습니다. (hackophere의 관련글)
Update 방법
- Alones 3 Column XML Template 포스트에서 새로 XML을 받으시거나
- Template -> Edit HTML 탭에서 아래 스크립트 코드를 찾아서 삭제 하시면 됩니다.
<script src=’http://www.anniyalogam.com/widgets/hackosphere.js’ type=’text/javascript’/>
Sep 21
alonesweb2.0 Google Blogger, XML template, 구글 블로거, 블로거, 블로그 스킨
구글 블로거 (Google Blogger)의 XML Template들을 소개해드린 적이 있습니다.
(Classic이 아닌 새 구글 블로거 버전에 맞춘 XML Template)
그중 Underwater Template과 Blue Wave Blogger XML Tempate이 가장 마음에 들었는데 둘의 장점이 교차되어,
두 Template을 합쳐서 새로운 XML Template을 만들어 보았습니다.
Alones 3 column XML Template의 특징은 다음과 같습니다.
- Google Blogger의 XML 버전을 위한 Template
- 3단 레이어
- 포스트 본문 가로가 고정되어 있지 않음 (브라우저 가로 길이에 따라 변함)
(소스 코드 같은 경우 포스트 본문 가로 길이가 고정되지 않는게 좋다고 생각)
- 상단에 메뉴가 있음
Underwater를 기본으로 해서 Underwater의 상단을 Blue Wave의 상단으로 교체한 정도입니다.
Google Blogger의 XML Template을 제대로 다 이해하지 않고 간단히 끼워 맞추기식으로 합친 것입니다.
Underwater Template
- 대부분의 기본적인 것은 이 Template의 설정을 따름
- 상단의 이미지가 큰 부분은 Blue Wave Blogger XML Theme로 변경
- 본문이 고정되지 않고 브라우저의 가로 길이에 따라 같이 변경되는 것 채택
Blue Wave Blogger XML Theme
- 상단의 이미지 높이와 이미지 채택
- 상단에 있는 메뉴 (희미하게 보이시죠?) 선택
Alones 3 column XML Template의 모양은 다음과 같습니다.
여기서 기본 모양을 볼 수 있고 여기서 위젯들을 좀 붙인 모양을 볼 수 있습니다.
Alones 3 column XML Template의 XML 코드는 아래 파일을 다운로드 받으시면 됩니다.
5977088511.xml
수정하셔서 좀 더 좋은 Template을 만드셨다면 트랙백이나 댓글 주시면 감사하겠습니다~
<histroy>
v0.1 (2007.09.21) – initial version
v0.2 (2007.09.22) – anniyalogam script 제거 (loading 속도가 느려서)
Older Entries Newer Entries
Crystal Clock
Flash Web Counter
![[iPhone][Tutorial #5] Http Request결과를 JSON으로 쉽게 파싱 해보기](http://alones.kr/wp-content/plugins/wordpress-popular-posts/no_thumb.jpg){kind=small}