블로그 글 찾아보기를 편리하게! 월풍서가(月風書架)

블로그를 시작한 지 꽤 오랜 시간이 흘렀습니다.
가끔 예전에 쓴 글을 보고 싶은데, 글 제목이 생각 안 날 때가 있더라고요.
그래서 페이지를 하나 만들었습니다.
월풍서가(月風書架)
분류별로 글을 정리해 월풍도원 블로그 글을 찾아보기 쉽게 하기 위함입니다.
우선 책 감상평만 정리하였지만,
나머지 부분도 체계적으로 정리해 나갈 생각입니다.

오래전 글을 다시 읽는 재미가 쏠쏠합니다.
‘그 땐 저런 생각을 하고 살았구나.’
‘저건 불과 반 년 전인데도 낯설구나.’
이렇게 저를 돌아보며 블로그를 계속 써온 것에 뿌듯함을 느꼈어요.
월풍서가(月風書架)'
저에겐 지난날을 곱씹는 반추의 공간으로,
블로그를 찾으시는 분들께는 편리한 정보 검색 공간이 되게 하겠습니다.

저의 블로그를 찾아주셔서 고맙습니다.



by


Tags : , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

구글 블로거와 궁합이 맞는 광고. 구글 애드센스.


2011년 말에 제 블로그에서 광고를 지웠었어요.
블로그를 찾아주시는 분들의 가독성을 해치고 싶지 않았기 때문입니다.
대신 기부코너를 만들었었죠.
이번에 다시 광고를 단 건, 요즘 생활이 어려워서입니다.^^;
비록 구글 애드센스 수익이 얼마 되진 않지만, 한 달에 밥 한 끼도 아쉬운 요즘이라 그렇습니다.

구글 애드센스와 블로거의 만남-'시리아 팔미라'

구글 블로거에 애드센스 다는 방법

구글 블로거는 애드센스와 연동이 잘되어 있습니다.

  1. 구글 블로거 내 블로그 메뉴로 갑니다.
  2. 수익 > 내 블로그에 광고 보이기 체크박스에 '예'라고 선택만 하면 광고가 바로 나옵니다.
  3. 물론 애드센스 계정은 가지고 있어야 합니다.
  4. 광고 스타일은 레이아웃에서 변경합니다.

블로그 광고 수익이 아쉽지 않을 정도의 형편이 되면,
구글 애드센스 광고를 내리도록 하겠습니다.:D

꾸준히 월풍도원을 찾아주셔서 고맙습니다.
행복하세요!



by


Tags : , , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

월풍도원이 새로워졌습니다.



레이아웃 및 색상 변경

예전 스킨-'새로워진 월풍 도원'
아마 블로그에 자주 들어오시던 분은 달라진 걸 한눈에 느끼실 겁니다.
푸른색 계통의 색상을 사용했었는데,
이번에 새 단장을 하며 주황색 계통의 색상으로 색상을 바꾸었습니다.
상단 여백도 줄였습니다.
상단 메뉴와 글꼬리에 사용한 아이콘은 Deviant art에서 활동하는 arrioch씨가 제작한 아이콘입니다.
 


광고 없는 블로그

한동안 블로그에 게시한 광고로 약간의 수입을 얻었어요.
그렇지만 광고는 저의 이념에 반대되는 요소기에 모두 지웠습니다.
강압적인 것에 심한 거부감을 느끼는 제가,
블로그에 광고를 단다는 것은 어색한 일이죠.
광고를 달면, 블로그에 오는 사람은 누구나 광고를 봐야 합니다.
꼭 필요한 정보가 광고란에 가끔 나타나기도 하지만,
대부분은 그저 가독성을 해치는 방해물일 따름입니다.
이 블로그에 들르시는 분들께 어떤 강요도 하고 싶지 않아요.
저는 자유로운 세상을 꿈꾸니까요.
 


성능 개선 / 버그 수정

즐겨찾기 버튼이 제대로 동작하지 않던 걸 수정 했습니다.
몇몇 HTML5 기술과 스키마를 적용했습니다.
메뉴 아이콘에 CSS Sprite를 적용했습니다.
관련글 보여주기 코드를 개선했습니다.
성능을 저하시키는 부분을 개선해서, 속도가 빨라졌습니다.
예전 스킨-'새로워진 월풍 도원'
위쪽이 수정 전이고, 아래가 성능 개선 후 입니다. 꽤 빨라졌죠?
 


코드 블럭 스타일 적용

코드를 올리는 경우는 많지 않지만,
가끔 코드를 올릴때 마다 보기가 안 좋았습니다.
코드 하이라이트까지 적용하면 더 보기 좋겠지만,
속도 저하를 가져오기에 코드 블럭에 간단한 스타일만 적용했습니다.


<html>
코드는 이런식으로 표현됩니다.

 


웹폰트 적용

웹폰트로 변경된 글꼴도 눈에 띄는 부분중에 하나죠?
한글에는 혜움담죽 글꼴을 적용했고,
코드 블럭에는 inconsolata 글꼴을 적용했습니다.


상단 메뉴 바 변경

예전 스킨-'새로워진 월풍 도원'
저의 창작 활동을 소개하는 월풍공방(月風工房) 메뉴가 새로이 생겼습니다.
RSS구독과 이메일 구독, 그리고 즐겨찾기 추가 메뉴에서 글씨를 삭제하고, 버튼만 달았습니다.
메뉴바 오른쪽의 검색 바에서 월풍도원의 글을 검색 할 수 있습니다.
새 창에선 글 제목을 검색하고,원래 창은 태그를 검색하여 글을 보여줍니다.


글 꼬리 변경

예전 스킨-'새로워진 월풍 도원'
예전 스킨-'새로워진 월풍 도원'
구글 버즈에 공유하기를 삭제했습니다.
본문만 깔끔하게 출력 해주는, 출력 버튼이 새롭게 생겼습니다.
출력해서 사용하고픈 글을 마음껏 출력해서 사용하세요.
무료 PDF변환기인 Bullzip PDF Printer를 이용하시면 글을 간편하게 PDF로 저장 가능합니다.:D
기부하기 버튼이 생겼습니다.
월풍도원에 기부하고픈 마음이 샘솟는다면, 혼쾌히 기부 해 주세요.
블로그 운영에 큰 도움이 됩니다.


2011년 한 해가 저물어 갑니다.
감기 조심하시고,
즐거운 연말 보내세요!



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

지난달 구글 애드센스 광고 수익과 앞으로의 블로그 광고 정책에 대하여 말씀드립니다.

저의 블로그에 한동안 구글 애드센스를 달아 사용했습니다.
따로 맞춤 광고 설정을 하지 않아,
글과 관계가 없는 광고가 뿌려지기에 클릭 빈도가 높지 않아요.
CPC(Cost per Click) 방식으로 수익이 지급되기 때문에 수입 또한 미비합니다.
아마 맞춤 타겟 설정을 한다면 클릭 빈도가 더 높아지겠죠.

보고서-'블로그 구글 애드센스 광고 수익'

보고서를 보면 하루에 천이백 분가량의 방문자께서 광고를 보셨고,
대략 네 분이 광고를 클릭하셨습니다.
나머지 천백구십여섯 분의 방문객께는,
광고가 전혀 달갑지 않다는 말일 겁니다.
네 번의 클릭 중 실수로 누른 예도 있을 거에요.
저의 블로그에 방문하시는 분이 늘어날 수록,
광고 때문에 더 많은 분이 불편함을 감수하셔야겠죠?
독자를 불편하게 하는 블로그는 제가 지향하는 방향이 아닙니다.
광고 수익은 점진적으로 늘어나는 중이지만,
이번에 준비 중인 블로그 개편에서 광고를 삭제하기로 했습니다.
그동안 광고를 클릭해 주신 방문객 여러분, 고맙습니다.
월풍도원에서 애드센스 광고가 곧 사라질 것입니다.



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

구글과 모빌리스에서 제공하는 웹 폰트 적용으로 블로그의 개성을 표현하세요.

블로그에서 가장 눈에 띄는 건 무얼까요?
네. 글씨입니다.
내용을 보려고 들어오니, 글씨가 가장 먼저 눈에 들어오죠.
가장 중요한 부분임에도, 개성을 표현하기가 쉽지 않습니다.
한글의 경우 굴림, 돋움, 궁서, 바탕에 맑음 고딕까지 다섯 가지 폰트가 기본으로 쓰여요.
단지 한글을 보여주는 목적에는 충분하지만, 뭔가 약간 아쉽습니다.
블로그에 변화를 주고 싶으신가요?
웹폰트를 이용해서 블로그의 개성을 표현해 보세요.

 

구글 웹 폰트

구글에서는 무려 342종의 다양한 폰트를 웹폰트로 제공합니다.

아쉽게도 아직 한글 글꼴은 제공하지 않네요.


구글 웹폰트 사용법

<head>
<link href='http://fonts.googleapis.com/css?family=웹폰트_이름' rel='stylesheet' type='text/css'>
</head>

모빌리스 웹폰트

모빌리스에서는 나눔글꼴, 혜움글꼴, 은글꼴, 백묵글꼴, 렉시글꼴, 은진글꼴을 웹폰트로 제공합니다.


모빌리스 웹폰트 사용법

<head>
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=웹폰트_이름' rel='stylesheet' type='text/css' />
</head>

스타일 시트에 웹폰트 적용 하기 (body태그에 적용하는 예제입니다.)

웹폰트 이름 뒤에는 웹 폰트를 찾지 못할 경우 사용할 폰트 이름을 넣어주세요.

예제에선 selif를 넣었습니다.

<style type="text/css">
body { font-family: '웹폰트_이름',selif; }
</style>



by


Tags : , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

구글 블로거에 관련 글 보여주기를 추가하는 방법입니다.

블로그 새단장을 준비하며, 예전에 짜 두었던 관련 글 보여주기 소스를 좀 개선했습니다.
내 블로그에서 같은 태그가 달린 글을 검색해서 관련 글로 보여줘요.
관련글 보여주기를 달기 위해선 템플릿(스킨)을 수정해야 합니다.
구글 블로거에 관련 글 보여주기를 달고 싶은 분은, 마음껏 가져다 쓰세요.:D

Head 태그 안에 다음 코드를 추가 해 줍니다.(구글 API키 필요)

<script src='http://www.google.com/jsapi?key=MYAPIKEY' type='text/javascript'/>

스타일 시트에 다음 코드를 추가 해 줍니다.

#related-side{display:none;visibility:hidden;} #related-posts{padding:15px;}

구글 블로거 템플릿에서 <data:post.body/>를 검색해서, <data:post.body/> 아래에 다음 코드를 추가해 줍니다.

<aside id="related-side">
<br/>
<h4><data:post.title/> 관련 글</h4>
<div id='related-posts'/>
</aside>
<script type='text/javascript'>
// 구글 블로거용 관련글 검색 모듈 by 月風(http://dorajistyle.pe.kr)
google.load(&quot;gdata&quot;, &quot;1.x&quot;, { packages : [&quot;blogger&quot;] });
    function getRelated() {
    function eliminateDuplicates(arr) {var i,j=0,len=arr.length,out="",obj={};for (i=0;i&lt;len;i++) {obj[arr[i]]=0;}for (i in obj) {if(j>=9)break; out+=i;j++;}return out;}   
    var relPostArray = new Array();
    var funcvar1=0;    var bloggerService = new google.gdata.blogger.BloggerService(&#39;dorajistylerelatedposts&#39;);
    var handleQueryResults = function(resultsFeedRoot) {   
    var blogFeed = resultsFeedRoot.feed;var html,postTitle,entryUri;var postEntries = blogFeed.getEntries();for (var i = 0; postEntry = postEntries[i]; i++) {var postTitle=postEntry.getTitle().getText(),entryUri=postEntry.getHtmlLink().getHref();if(title==postTitle) continue;var html= &#39;&lt;li&gt;&lt;a rel=\&#39;bookmark\&#39; title=\&#39;&#39;+ postTitle + &#39;\&#39; href=\&#39;&#39;+entryUri+&#39;\&#39;&gt;&#39;+ postTitle + &#39;&lt;/a&gt;&lt;/li&gt;&#39;;
    relPostArray.push(html);}   
    funcvar1++;    if (funcvar1 == filtArray.length) {var urlfinal=eliminateDuplicates(relPostArray);if(urlfinal.length>0){var aside=document.getElementById(&quot;related-side&quot;);aside.style.display=&#39;block&#39;;aside.style.visibility=&#39;visible&#39;;var elem=document.getElementById(&quot;related-posts&quot;);var content=&#39;&lt;ul&gt;&#39;;content+=urlfinal;content+=&#39;&lt;/ul&gt;&#39;;
    elem.innerHtml=&#39;&lt;ul&gt;&#39;;elem.innerHTML=urlfinal;elem.innerHtml+=&#39;&lt;/ul&gt;&#39;;elem.innerHtml+=content;}}
    };       
    var handleError = function(error) {};
    var tagString=&#39;&#39;;
    var labelArray = new Array();<b:loop values='data:post.labels' var='label'>
    tagString+=&quot;<data:label.name/>&quot;;
    tagString+=&#39;,&#39;
    </b:loop>       
    tagString=tagString.substring(0,tagString.length-1);
    var filtArray = tagString.split(&#39;,&#39;);var title =&#39;<data:post.title/>&#39;;
    var feedUri,query;    for (var i = 0; i &lt; filtArray.length; i++){feedUri = &#39;/feeds/posts/default/-/&#39; + filtArray[i]; query = new google.gdata.blogger.BlogPostQuery(feedUri);    bloggerService.getBlogPostFeed(query, handleQueryResults, handleError);}
    }   
    google.setOnLoadCallback(getRelated);
</script>

구글 블로거용 관련글 보여주기 모듈로, 블로그 방문자들에게 편의를 제공하세요.:D



by


Tags : , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

Click Here to read English Article


트랙백 보내기, 딜리셔스, 텀블러,관련글 검색,다음 뷰 보내기의 도구를 제공하는 구글 블로거용 그리즈몽키 스크립트 입니다.

트랙백 보내기를 지원하는 구글 블로거 도구 그리즈몽키 스크립트

구글 블로거의 새로운 인터페이스를 사용하기로 결정했습니다.
새 인터페이스가 깔끔하긴 한데, 제가 자주 쓰는 기능은 들어 있지 않군요.
부족한 기능은 만들어 써야지 별 수 있나요.
Jquery와 그리즈몽키 스크립트를 이용해서 블로거용 도구를 만들었습니다.
게시물 목록에서 발행된 글 편집을 누르면 오른쪽 글 설정창에 도구가 나타납니다.
구글 블로거를 쓰신다면, 구글 블로거 도구로 더욱 편리하게 블로깅을 즐기세요!

구글 블로거 그리즈몽키 스크립트

이 스크립트는 단순하지만 강력한 기능을 제공하는 구글 블로거용 그리즈몽키 스크립트입니다. 트랙백 보내기, 딜리셔스 링크, 텀블러 링크, 다음뷰 전송, 관련글 검색 기능을 제공합니다.

구글 블로거용 도구를 소개합니다.
Jquery와 gresemonkey스크립트를 이용해 개발했습니다.
단순하지만 기능이 강력해요.
트랙백 보내기, 딜리셔스 링크, 텀블러 링크, 관련글 검색, 다음뷰로 보내기 기능을 제공합니다.

#트랙백 보내기
- 트랙백 보내기 기능입니다.
한 줄에 하나씩 트랙백 주소를 넣어주세요.
보낸 트랙백에 대한 자세한 정보는,
Error Console(CTRL+SHIFT+J)의 Message에서 확인 가능합니다.

#딜리셔스 링크, 텀블러 링크
- 한번의 클릭으로 딜리셔스와 텀블러에 해당 글을 쓰는 기능을 제공합니다.

#구글 관련글 검색
- 글 제목으로 구글에서 관련 글을 검색합니다.

#다음 뷰로 보내기
- 다음 뷰로 해당 글을 보냅니다.(다음뷰에서 블로그 연동을 해 두셔야 해요.)
'다음뷰자동전송'을 선택하면 태그에서 분류를 선택하여, 자동으로 전송합니다.

* 블로거의 새로운 디자인에서만 작동해요.(구 인터페이스에서는 사용 불가능 합니다.)

사용법:

  • - 이 스크립트를 설치하세요.
  • - 게시물 목록으로 갑니다.
  • - 게시된 글의 '편집'을 누르세요.(임시 저장글에선 작동하지 않습니다.)
  • - 자유롭게 이용하세요.:D

구글 블로거 도구 그리즈몽키 스크립트 내려받기

Google Blogger Article Tools  Gresemonkey Script

It's a fancy tools for google blogger.
The code using jquery and greasemonkey script.
It offers simple but powerful functions to google blogger user.
Send Trackbacks, Delicious Link, Tumblr Link and Related Articles Search from Google.

#Send Trackbacks
- You can send trackbacks to trackback links.
Trackback addresses should be separated by newline.(Enter key)
You can see the information of trackbacks at Message Console(CTRL+SHIFT+J).

#Delicious Link , Tumblr
- You can save your article to delicious,tumblr easily.

#Related Articles Search from Google
Related Articles Search query is the title of article.

* This script works on new blogger interface only.

How to use:

  • - Install this script.
  • - Go to article list.
  • - Click 'edit' on a published article. (It's not works on a draft one.)
  • - Use this tool freely.

 

Google Blogger Article Tools - Gresemonkey Script Download

by 月風



by


Tags : , , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

구글 문서도구를 이용해, 블로그에 이메일 전송 폼을 다는 방법입니다.

블로그 이메일 전송 폼 달기

그동안 Kontactr 이메일 폼을 사용했습니다.
얼마 전에 블로그 이메일 폼이 제대로 동작하지 않는다고,방문자 한 분께서 제보를 하셨어요.(고맙습니다.)
확인해보니 스팸 방지용 보안 문자가 나타나지 않는군요.
이메일 폼을 제공하는 Kontactr를 방문하니,
업데이트가 되면서 이전의 코드를 사용할 수 없게 되었습니다.
그래서 이번 기회에 간편한 구글 폼으로 블로그에 이메일 폼을 바꾸었어요.

구글 문서도구를 이용해 블로그 이메일 폼 달기

  • 구글 문서도구로 갑니다.
  • 폼 만들기-'블로그 이메일 폼 달기'
    새로 만들기(Create) -> 폼(Form)을 선택해 이메일 폼을 만듭니다.
    (저는 보내는 분 성함, 이메일 주소, 내용만 넣어서 간단한 폼을 만들었어요.)
  • 생성된 폼(Form)을 클릭합니다.
  • 스프레드시트가 뜨면 폼(Form) 메뉴를 선택하여 Live Form을 선택합니다.
  • 소스 복사-'블로그 이메일 폼 달기'
    소스보기를 눌러서 Form태그 부분을 복사합니다.
  • 원하는 블로그 페이지에 블로그 이메일 폼 코드를 붙여 넣습니다.

 

완성된 폼-'블로그 이메일 폼 달기'

간단한 블로그용 이메일 폼이 완성 되었어요!
이메일이 전송되면, 스프레드시트에 자동으로 저장됩니다.
이메일을 받을 때 마다 알림을 받고 싶다면,
Tools -> Notification rules에서 설정하세요.
아직 블로그에 이메일 폼이 없으신가요?
구글 폼을 이용해서 간단히 달아 보세요.:D
by 月風



by


Tags : , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

댓글을 달 수 있는데, 굳이 이메일 서식이 필요할까요? 제가 생각하는 이메일 연락 서식의 장점을 소개합니다.

특정 글에 대해 이야기 할 땐 댓글이 편합니다.
하지만 좀 더 포괄적인 이야기나, 다른 주제의 이야기를 나누기엔 부적합해요.
"이 글과 상관이 없는 이야기지만..."
이라고 양해를 구하고 글을 쓰기도 합니다.
그보다는 이메일 연락 서식을 통해 연락하면 더욱 간단하겠죠?
by 月風


블로그에 이메일 연락 서식 달기

Kontactr -'블로그에 이메일 연락 서식 달기'
 

제가 이용하는 이메일 연락 서식은 kontactr입니다.
얼마 전에  블로거 팁 닷컴의  블로그에 이메일 연락폼을 달아보자, Kontactr 게시물을 통해 알았어요.

소개 페이지-'블로그에 이메일 연락 서식 달기'

'언제 한번 써볼까?'
생각만 하다가,
이번에 월풍도원 소개 페이지에 이메일 연락 서식을 달아 보았습니다.

네이트 메일-'블로그에 이메일 연락 서식 달기'

그런데 네이트 메일 주소로 보내 보니, 이메일이 외계어로 오는 거에요.
'쀍땗쨟뀾쌺'
이런 알 수 없는 메시지가 오더군요.
'인간들아, 끊임없는 자연파괴는 결국 너희 마저 파괴할 것이다.'
이런 메시지일까요?
분명히 제가 보낸 테스트 이메일인데,
저조차도 글씨를 알아볼 수 없네요.
서식에서 인코딩 처리를 해주고 별방법을 다 써봐도,
여전히 한글이 깨진 이메일만 보일 뿐입니다.

Gmail-'블로그에 이메일 연락 서식 달기'

그래서 Gmail로 수신 주소를 바꾸었습니다.
한글이 아주 잘 보이는군요.:D
네이트 이메일로 보내면 한글이 깨지니, kontactr쓰시는 분들은 참조하세요.

추신
찾아보니 이메일 연락 서식을 제공하는 다른 서비스도 있어서 링크 걸어요.
How to Add Email Forms to Blogger
아직 사용해 보진 않았습니다.^^;



by


Tags : , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

모든 블로그에선 각각의 글 쓰기 에디터를 제공합니다. 하지만 블로그 글 쓰기 도구를 이용하면 항상 익숙한 환경에서 보다 편리한 포스팅을 할 수 있습니다.

몇 년 전에 ScribeFire를 쓰다가 무거워서 사용을 멈췄던 적이 있습니다.
그런데 이번에 깔아보니 많이 가벼워졌더라고요.
세가지 블로그 글쓰기 도구를 모두 사용 해 보고 결국 다시 ScribeFire로 돌아왔습니다.
ScribeFire로 돌아올 수 밖에 없던 이유가 뭘까요?
블로그 글쓰기 도구 3종을 비교에서 이야기 해 보겠습니다.
by 月風


블로그 글쓰기 도구 3종 비교

Qumana

-'블로그 글쓰기 도구 3종 비교'


-'블로그 글쓰기 도구 3종 비교'

글쓰기의 기본적인 기능은 모두 갖추고 있습니다.

Qumana의 장점
  • 브라우져에 종속적이지 않다.


Qumana의 단점
  • 한글 지원이 제대로 안된다. 
  • 포스트에 자동으로 프로그램 홍보 문구를 넣는다.

Deepest Sender
-'블로그 글쓰기 도구 3종 비교'
-'블로그 글쓰기 도구 3종 비교'

가볍기로는 최고에요.

Deepest Sender의 장점
  • 가볍다.
  • 만약 Firefox용 맞춤법 검사 애드온을 설치했다면, Deepest Sender에서 이용 가능하다.
  • Preview를 제공한다.

Deepest Sender의 단점

  • Firefox, SeaMonkey, XULRunner 에서만 사용 할 수 있다.
  • 지양해야 하는 태그를 사용한다. (예 <FONT> 태그.)


Scribefire
-'블로그 글쓰기 도구 3종 비교'
-'블로그 글쓰기 도구 3종 비교'

이번에 비교한 블로그 글쓰기 도구 중에서 가장 마음에 드는 도구입니다.

ScribeFire 의 장점
이미지를 넣으면 자동으로 크기를 계산해 준다.
Mozilla Firefox, Google Chrome, Opera, Apple Safari등 다양한 Web browser에서 쓸 수 있다.


ScribeFire 의 단점
약간 무겁다.(Deepest Sender를 사용해 본 후라..)



블로그 글쓰기 도구 홈페이지 링크
Qumana
Deepest Sender
Scribefire



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

블로그에 글을 쓸 때 가장 우선은 무엇 일까요? 방문객의 눈길을 끄는 제목을 선정하는 것 일까요? 아니면 must have item에 대한 리뷰나 혹은 한참 뜨는 이슈에 대한 글을 주제로 선정 하는 것 일까요?


저는 블로그를 시작한 지 꽤 오래 되었습니다.
2006년도에 시작했으니 벌써 5년이 되었죠.
그저 일기처럼 가끔 글을 쓰다 보니,
저와 가까운 지인들 말고는 아무도 찾지 않는 블로그가 되었습니다.
'아. 내 블로그도 많은 사람들이 찾았으면 좋겠는데..'
그래서 그동안 글을 쓰며 여러 실험을 거쳐 보았고,
저에게 맞는 블로그에 글쓰기 우선 순위를 찾아서 이렇게 포스팅 합니다.
by 月風

블로그 글쓰기의 우선순위


글쓰기-'블로그 글쓰기의 우선순위'


방문자를 늘리는 블로그 글쓰기 노하우

  • 한참 뜨는 이슈를 찾아서 그에 대한 글을 쓴다.
  • 잇 아이템(It Item)에 대한 상세 리뷰를 쓴다.
  • 사람들이 꾸준히 검색하는 키워드에 대한 글을 쓴다.
  • 자신의 아이덴티티를 만들어 가며 전문 분야의 글을 쓴다.
  • 꾸준하게 포스팅을 한다.
  • 깔끔하고 읽기 좋은 구조로 글을 쓴다.
  • 어쨌든 독자의 입장에서 읽고 싶은 글을 쓴다.

이것이 보통 알려진 블로그 글쓰기의 노하우 입니다.

저도 그동안 잘 알려진 노하우 몇 가지를 응용하여 글을 써 왔어요.

어느날은 미리 써 놨던 포스트에 사람들이 많이 검색하는 키워드가 들어가 있어서,

만 명이 넘는 방문자가 들어왔던 적도 있었죠.

파워 블로거들의 블로그엔 하루에 보통 3~4만명은 우습게 들른다고 하지만,

저에게 그건 특별한 경험이었죠.

보통 하루 이 천 명 정도의 방문자가 찾는 마이너 블로그였어요.

그나마 텍스트큐브 닷컴에서 블로거로 옮기고 나서는,


방문자 수가 천 명 대로 뚝 떨어졌습니다.

분명 콘텐츠의 양은 늘었는데 이상한 일이에요.

여담은 그만하고, 


위의 글쓰기 노하우를 사용해서 글을 쓰면 확실히 방문자 수가 늘어나는 효과를 보긴 합니다.

하지만 저 '노하우' 들은 글쓰기를 너무 기술적인 측면에서 바라보고 있어요.

그리고 저는 기술적인 측면에 얽매여서 글을 쓰려면, 머리가 아픕니다.

생각할게 너무 많으니까요.

그래서 제게 맞는 글 쓰기의 우선순위가 무얼까 생각 해 봤습니다.

글을 쓸 때 '기술'이 아닌 '감성'을 우선 순위에 놓고 싶어요.

물론 둘 다 갖춘 능력자라면 더 좋겠지만,

저는 두마리 토끼를 잡으려다 풀 뜯어먹게 생겼기에 우선은 하나라도 잡아보려 합니다.:D

저의 서투른 글쓰기 '기술' 때문에, '감성'을 제대로 전달 할 수 있을진 모르겠습니다.

전단지에 대문짝 만한 광고를 해야 겨우 장사가 되는 음식점이 아닌,

마니아들의 입소문 듣고 찾아가는 맛집과 같은 블로그를 지향합니다.

'광고'해서 대량으로 팔리는 글 보다는,

한 명이라도 진심으로 '감동' 할 수 있는  글을 쓰고 싶습니다!



by


Tags : , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

가벼운 번역 위젯(Lightweight translation Widget) 을 만들었습니다. 블로그는 물론, 웹사이트라면 어느 곳에나 달 수 있습니다.


Do you want to see a International version? Click here.

검색엔진을 통해 필요한 것을 찾다 보면,
반드시 자국어로 된 사이트만 찾아 주는 것이 아닙니다.
글로벌 시대의 인터넷엔 국경이 없기 때문이죠.
전혀 알 수 없는 언어로 쓰여진 사이트에 들어갔을 때,
번역을 지원한다면, 좀 더 머물게 됩니다.
필요한 자료를 찾아 들어온 방문자 이니까요.
완벽한 번역이 아니라도, 몇몇 키워드 만으로도 충분히 원하는 내용을 얻어 나갈 수 있습니다.
가벼운 번역 위젯으로 전세계의 방문자들과 소통하세요!
by 月風

가벼운 번역 위젯 (Lightweight translation widget)


한국어 블로그, 웹사이트용  번역 위젯

한국어 블로그,웹사이트용 가벼운 번역 위젯(Lightweight translation widget) 에선 8개 언어로 번역을 지원합니다.
우선 국제 연합(UN)의 여섯 개 언어 번역을 지원합니다.
그리고 형제의 나라 터키어로 번역을 지원하고,
마지막으로 이웃 나라 일본어 번역을 지원합니다.

가벼운 번역 위젯 사용법

  1. 원하는 배경색과 모양을 선택합니다.
  2. 코드를 복사하여 위젯 페이지나, 웹페이지의 원하는 부분에 붙여넣습니다.
  3. 잘 사용합니다.

가벼운 번역 위젯의 특징

  • 단순합니다.
  • 직관적인 유저 인터페이스를 제공합니다.
  • 가볍습니다. (HTTP 요청을 줄여주는CSS Sprite를 사용 했습니다.)

한 줄 모양의 번역 위젯

'가벼운 번역 위젯 (Lightweight translation widget)'
웹사이트의 상단이나 하단 메뉴, 툴바에 붙이기 좋습니다.
혹은 글의 상단,하단에 붙이기 좋은 모양의 번역 위젯 입니다.

흰색 배경 사용자를 위한 구글 번역 위젯
(Single line style google translate widget for korean with white background)
<style>
#google_translate_bar a{background-image:url('https://lh3.googleusercontent.com/-3eOD4R0Ac4Q/TjASyQQ9-wI/AAAAAAAAHhg/FhyPp2UGTak/flagskr32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


검정색 배경 사용자를 위한 구글 번역 위젯
(Single line style google translate widget for korean with black background)

<style>
#google_translate_bar a{background-image:url('https://lh3.googleusercontent.com/-f08EVJ6n4WM/TjASzBuC7_I/AAAAAAAAHho/YTXFZ3630y0/flagskr32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


흰색 배경 사용자를 위한 마이크로 소프트 번역기 위젯
(Oneline style microsoft translator widget for korean with white background)

<style>
#microsoft_translator_bar a{background-image:url('https://lh3.googleusercontent.com/-3eOD4R0Ac4Q/TjASyQQ9-wI/AAAAAAAAHhg/FhyPp2UGTak/flagskr32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


검은색 배경 사용자를 위한 마이크로 소프트 번역기 위젯
(Single line style microsoft translator widget for korean with black background)
<style>
#microsoft_translator_bar a{background-image:url('https://lh3.googleusercontent.com/-f08EVJ6n4WM/TjASzBuC7_I/AAAAAAAAHho/YTXFZ3630y0/flagskr32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">번역(Translate to) </span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>



사이드바 모양의 번역 위젯

블로그의 사이드바에 적합한 모양의 위젯입니다.

'가벼운 번역 위젯 (Lightweight translation widget)'

흰색 배경 사용자를 위한 구글 번역 위젯
(Sidebar style google translate widget for korean with white background)
<style>
#google_translate_bar a{background-image:url('https://lh3.googleusercontent.com/-3eOD4R0Ac4Q/TjASyQQ9-wI/AAAAAAAAHhg/FhyPp2UGTak/flagskr32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


검은색 배경 사용자를 위한 구글 번역 위젯
(Sidebar style google translate widget for korean with black background)
<style>
#google_translate_bar a{background-image:url('https://lh3.googleusercontent.com/-f08EVJ6n4WM/TjASzBuC7_I/AAAAAAAAHho/YTXFZ3630y0/flagskr32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.french_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -160px;}
#google_translate_bar a.arabic_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -224px;}
#google_translate_bar a.russian_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -288px;}
#google_translate_bar a.turkish_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.turkish_tr {background-position: 0 -352px;}
#google_translate_bar a.chinese_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -416px;}
#google_translate_bar a.japanese_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='google_translate_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="google_translate('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="google_translate('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="google_translate('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="google_translate('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="google_translate('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="google_translate('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


흰색 배경 사용자를 위한 마이크로소프트 번역기 위젯
(Sidebar style microsoft translator widget for korean with white background)
<style>
#microsoft_translator_bar a{background-image:url('https://lh3.googleusercontent.com/-3eOD4R0Ac4Q/TjASyQQ9-wI/AAAAAAAAHhg/FhyPp2UGTak/flagskr32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


검정색 배경 사용자를 위한 마이크로소프트 번역기 위젯
(Sidebar style microsoft translator widget for korean with black background)
<style>
#microsoft_translator_bar a{background-image:url('https://lh3.googleusercontent.com/-f08EVJ6n4WM/TjASzBuC7_I/AAAAAAAAHho/YTXFZ3630y0/flagskr32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.turkish_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.turkish_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -448px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -480px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">번역(Translate to) </span><br/><br/>
<div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="영어(English)" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="스페인어(Español)" onclick="microsoft_translator('es')"></a>
<a class="french_tr" href="#" title="불어(français)" onclick="microsoft_translator('fr')"></a>
<a class="arabic_tr" href="#" title="아랍어(العربية)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="russian_tr" href="#" title="러시아어(русский язык)" onclick="microsoft_translator('ru')"></a>
<a class="turkish_tr" href="#" title="터키어(Türkçe)" onclick="microsoft_translator('tr')"></a>
<a class="chinese_tr" href="#" title="중국어(中文)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="일본어(日本語)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Lightweight Translation Widget International Version

Lightweight translation widget support 12 languages.
Six Official languages of the United Nations.
And four languages based on Global Internet usage language.
Also two languages based on population of native speakers.

How to use

  1. Choose a widget style.
  2. Copy and Paste one of the code into your website or blog widget page.
  3. Finish

Features

  • Simple
  • Intuitive UI
  • Lightweight (using CSS Sprite)

Single line style translation widget


'가벼운 번역 위젯 (Lightweight translation widget)'


Single line style google translate widget with white background
<style>
#google_translate_bar a{background-image:url('https://lh6.googleusercontent.com/-plClk3ZZtwk/TjASzjeryzI/AAAAAAAAHhs/VASner8jF1Q/flags32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>



Single line style google translate widget with black background
<style>
#google_translate_bar a{background-image:url('https://lh3.googleusercontent.com/-ddsgc5bOKO8/TjAS0jdE3yI/AAAAAAAAHh0/HcwmLBqlB1I/flags32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Microsoft translator not supported Hindi and Bengali.

'가벼운 번역 위젯 (Lightweight translation widget)'

Single line style microsoft translator widget with white background
<style>
#microsoft_translator_bar a{background-image:url('https://lh6.googleusercontent.com/-plClk3ZZtwk/TjASzjeryzI/AAAAAAAAHhs/VASner8jF1Q/flags32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}

</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


Single line style microsoft translator widget with black background
<style>
#microsoft_translator_bar a{background-image:url('https://lh3.googleusercontent.com/-ddsgc5bOKO8/TjAS0jdE3yI/AAAAAAAAHh0/HcwmLBqlB1I/flags32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}

</style>
<span style="font-size:14px;font-weight:bold;float:left;display:block;padding-top:4px;padding-right:12px;">Translate to</span><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><span style="font-size:12x;float:left;display:block;padding-top:5px;padding-left:12px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>



Sidebar style translation widget


'가벼운 번역 위젯 (Lightweight translation widget)'


Sidebar style google translate widget with white background <style>
#google_translate_bar a{background-image:url('https://lh6.googleusercontent.com/-plClk3ZZtwk/TjASzjeryzI/AAAAAAAAHhs/VASner8jF1Q/flags32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Sidebar style google translate widget with black background
<style>
#google_translate_bar a{background-image:url('https://lh3.googleusercontent.com/-ddsgc5bOKO8/TjAS0jdE3yI/AAAAAAAAHh0/HcwmLBqlB1I/flags32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#google_translate_bar a.english_tr { background-position: 0 0;}
#google_translate_bar a:hover.english_tr {background-position: 0 -32px;}
#google_translate_bar a.spanish_tr { background-position: 0 -64px;}
#google_translate_bar a:hover.spanish_tr {background-position: 0 -96px;}
#google_translate_bar a.portuguese_tr { background-position: 0 -128px;}
#google_translate_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#google_translate_bar a.french_tr { background-position: 0 -192px;}
#google_translate_bar a:hover.french_tr {background-position: 0 -224px;}
#google_translate_bar a.german_tr { background-position: 0 -256px;}
#google_translate_bar a:hover.german_tr {background-position: 0 -288px;}
#google_translate_bar a.russian_tr { background-position: 0 -320px;}
#google_translate_bar a:hover.russian_tr {background-position: 0 -352px;}
#google_translate_bar a.arabic_tr { background-position: 0 -384px;}
#google_translate_bar a:hover.arabic_tr {background-position: 0 -416px;}
#google_translate_bar a.hindi_tr { background-position: 0 -448px;}
#google_translate_bar a:hover.hindi_tr {background-position: 0 -480px;}
#google_translate_bar a.korean_tr { background-position: 0 -512px;}
#google_translate_bar a:hover.korean_tr {background-position: 0 -544px;}
#google_translate_bar a.chinese_tr { background-position: 0 -576px;}
#google_translate_bar a:hover.chinese_tr {background-position: 0 -608px;}
#google_translate_bar a.japanese_tr { background-position: 0 -640px;}
#google_translate_bar a:hover.japanese_tr {background-position: 0 -672px;}
#google_translate_bar a.bengali_tr { background-position: 0 -704px;}
#google_translate_bar a:hover.bengali_tr {background-position: 0 -736px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='google_translate_bar'>
<a class="english_tr" href="#" title="English" onclick="google_translate('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="google_translate('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="google_translate('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="google_translate('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="google_translate('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="google_translate('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="google_translate('ar')"></a>
<a class="hindi_tr" href="#" title="हिन्दुस्तानी(Hindi)" onclick="google_translate('hi')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="google_translate('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="google_translate('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="google_translate('ja')"></a>
<a class="bengali_tr" href="#" title="বাংলা(Bengali)" onclick="google_translate('bn')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function google_translate(language){
window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl='+language+'&ie=UTF8&tbb=1&langpair=auto%7C'+language);
return false;
}
//]]>
</script>


Microsoft translator not supported Hindi and Bengali.

'가벼운 번역 위젯 (Lightweight translation widget)'

Sidebar style microsoft translator widget with white background
<style>
#microsoft_translator_bar a{background-image:url('https://lh6.googleusercontent.com/-plClk3ZZtwk/TjASzjeryzI/AAAAAAAAHhs/VASner8jF1Q/flags32w.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>


Sidebar style microsoft translator widget with black background
<style>
#microsoft_translator_bar a{background-image:url('https://lh3.googleusercontent.com/-ddsgc5bOKO8/TjAS0jdE3yI/AAAAAAAAHh0/HcwmLBqlB1I/flags32b.jpg');background-repeat: no-repeat; height: 32px;width:32px;display:block;float:left;}
#microsoft_translator_bar a.english_tr { background-position: 0 0;}
#microsoft_translator_bar a:hover.english_tr {background-position: 0 -32px;}
#microsoft_translator_bar a.spanish_tr { background-position: 0 -64px;}
#microsoft_translator_bar a:hover.spanish_tr {background-position: 0 -96px;}
#microsoft_translator_bar a.portuguese_tr { background-position: 0 -128px;}
#microsoft_translator_bar a:hover.portuguese_tr {background-position: 0 -160px;}
#microsoft_translator_bar a.french_tr { background-position: 0 -192px;}
#microsoft_translator_bar a:hover.french_tr {background-position: 0 -224px;}
#microsoft_translator_bar a.german_tr { background-position: 0 -256px;}
#microsoft_translator_bar a:hover.german_tr {background-position: 0 -288px;}
#microsoft_translator_bar a.russian_tr { background-position: 0 -320px;}
#microsoft_translator_bar a:hover.russian_tr {background-position: 0 -352px;}
#microsoft_translator_bar a.arabic_tr { background-position: 0 -384px;}
#microsoft_translator_bar a:hover.arabic_tr {background-position: 0 -416px;}
#microsoft_translator_bar a.korean_tr { background-position: 0 -512px;}
#microsoft_translator_bar a:hover.korean_tr {background-position: 0 -544px;}
#microsoft_translator_bar a.chinese_tr { background-position: 0 -576px;}
#microsoft_translator_bar a:hover.chinese_tr {background-position: 0 -608px;}
#microsoft_translator_bar a.japanese_tr { background-position: 0 -640px;}
#microsoft_translator_bar a:hover.japanese_tr {background-position: 0 -672px;}
</style>
<span style="font-size:14px;font-weight:bold;padding-bottom:8px;padding-left:6px;">Translate to </span><br/><br/><div id='microsoft_translator_bar'>
<a class="english_tr" href="#" title="English" onclick="microsoft_translator('en')"></a>
<a class="spanish_tr" href="#" title="Español(Spanish)" onclick="microsoft_translator('es')"></a>
<a class="portuguese_tr" href="#" title="Português(Portuguese)" onclick="microsoft_translator('pt')"></a>
<a class="french_tr" href="#" title="français(French)" onclick="microsoft_translator('fr')"></a>
<br/><br/>
<a class="german_tr" href="#" title="Deutsch(German)" onclick="microsoft_translator('de')"></a>
<a class="russian_tr" href="#" title="русский язык(Russian)" onclick="microsoft_translator('ru')"></a>
<a class="arabic_tr" href="#" title="العربية(Arabic)" onclick="microsoft_translator('ar')"></a>
<br/><br/>
<a class="korean_tr" href="#" title="한국어(Korean)" onclick="microsoft_translator('ko')"></a>
<a class="chinese_tr" href="#" title="中文(Chinese)" onclick="microsoft_translator('zh-CN')"></a>
<a class="japanese_tr" href="#" title="日本語(Japanese)" onclick="microsoft_translator('ja')"></a>
</div><br/><br/>
<span style="font-size:12x;padding-top:-2px;padding-left:32px;">Created by<a rel="license" href="http://www.dorajistyle.pe.kr/2011/08/lightweight-translation-widget.html" target="_blank" title="">月風</a></span>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function microsoft_translator(language){
window.open('http://www.microsofttranslator.com/bv.aspx?ref=Internal&a='+encodeURIComponent(location.href)+'&from=&to='+language);
return false;
}
//]]>
</script>




언어 참고 자료 (References)
Official languages of the United Nations
Global Internet usage
List of languages by number of native speakers


크리에이티브 커먼즈 라이선스
月風에 의해 창작된 Lightweight Translation Widget 은(는) 크리에이티브 커먼즈 저작자표시(Attribution) 3.0 Unported 라이선스에 따라 이용할 수 있습니다.

Lightweight Translation Widget by 月風 is licensed under a Creative Commons Attribution 3.0 Unported License.

Lightweight Translation Widget by 月風 is licensed under a Creative Commons Reconocimiento 3.0 Unported License.

Lightweight Translation Widget de 月風 est mis à disposition selon les termes de la licence Creative Commons Paternité 3.0 non transcrit.

Lightweight Translation Widget by 月風 هو المرخص لها بموجب المشاع الإبداعي نسب المصنف 3.0 الاصلية الترخيص .

Произведение «Lightweight Translation Widget» созданное автором по имени 月風, публикуется на условиях лицензии Creative Commons Attribution (Атрибуция) 3.0 Непортированная.

Lightweight Translation Widget由月風製作,以創用CC 姓名標示 3.0 Unported 授權條款釋出。

Lightweight Translation Widget by 月風 is licensed under a Creative Commons 表示 3.0 非移植 License.



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

블로그 템플릿을 오랜만에 수정했습니다. 가장 중요한 것은 내용이지만, 표지가 눈길을 끌어야 책을 집어 들게 되니, 겉모습도 비중이 꽤 크다고 봐요.

작년 말. 정들었던 텍스트큐브닷컴의 서비스가 종료되면서, 제 블로그는 난민이 되었습니다. 그때 어쩔수 없이 난민이 되신 텍스트큐브 닷컴의 블로거 분들은 환경이 비슷했던 티스토리로 많이 이주하셨고,
전자신문의 토트 서비스로 이주를 하거나, 혹은 설치형 텍스트큐브로 갈아 타는 분들도 계셨었죠.
하지만 블로거 닷컴으로 이주 하신 분은 그리 많지 않으셨어요.
아무래도 낯 설은 인터페이스가 주된 원인인 것 같아요.
저 또한 이곳 저곳을 둘러 보았지만, 그냥 구글의 블로거에 정착을 했습니다.
그 땐 여행 중이라 급작스레 블로거로 이전을 하면서 스킨을 제대로 손 보지 못했어요.
이제서야 조금 손을 보게 되었습니다.

내공이 깊은 작가의 책은, 양장본이라서 손이 간 다던가, 책을 볼 때 편리하게 책갈피가 포함되어 있어서 사람들이 찾는 것이 아닙니다.
영혼을 어루어 만져 주는 문장력 덕분이죠. 하지만 누가 봐도 고개를 끄덕일 정도의 글을 쓰는 작가는 많지 않아요.
그렇게 감동적인 문장력을 구사하는 작가들 역시 처음엔, 감정을 전달 하는 것이 서툴러서 몇몇 독자만이 그 감동을 느낄 수 있었을 겁니다.
그것이 점점 다듬어져서 그런 내공이 쌓인 것이겠죠.
하지만 그런 작가의 책이 아니라면,
보통은 작가의 이름 보다는 끌리는 표지를 보고 책을 집어 든다고 생각합니다.
표지가 이쁘고, 펼쳐보니 내용도 나름 괜찮은 듯 하면 더 읽고 싶은 생각이 생기는 것이죠.
이번 블로그 템플릿 수정은 그런 표지를 만들기 위해서 였습니다.

by 月風

블로그 템플릿 수정

의도하지 않은 화면-'블로그 템플릿 수정'

템플릿을 수정 하다 보면,
이렇게 의도하지 않게 화면이 깨져 버리는 일도 자주 일어납니다.
그래서 템플릿 수정용 블로그를 하나 더 만들어서,
어느정도 안정화가 되면 월풍도원에 적용했어요.

메뉴-'블로그 템플릿 수정'
우선 가장 먼저 눈에 띄는 변화는 블로그 위쪽에 메뉴를 만든 것입니다.
'블로그에 대한 소개' 페이지와,
'RSS 구독 하기',
'이메일로 구독하기',
'즐겨 찾기에 추가하기' 메뉴가 있죠.
제 블로그의 글이 마음에 드신다면, 이 메뉴로 더욱 편리하게 이용하세요.^^



번역기-'블로그 템플릿 수정'
사막에 잔디 나듯 찾아오는 외국인 손님들을 위한 메뉴입니다.
외국인 손님들은 보통 검색을 통해 원하는 내용을 찾아 들어오셨을 텐데,
한국어를 보는 순간 왠지 속았다는 생각이 들 수 있으니까요.
번역기가 외국인 손님과 제 블로그 글을 이어주는 다리 역할을 해 주길 바랍니다.


블로그 글 하단-'블로그 템플릿 수정'
그리고 마지막으로 블로그 글의 하단 부분을 바꾸었습니다.
블로그를 너무 느리게 만드는 믹시 위젯은 과감히 지워버렸고,
몇 가지 메뉴를 추가했어요.
구글의 '+1'버튼으로 글을 쉽게 추천 하실 수 있습니다.
페이스북의 '좋아요' 버튼으로 간단하게 글에 호감을 표시 할 수 있어요.
트위터의 '트윗' 버튼으로 글을 한번에 트위터로 보낼 수 있습니다.
구글의 '버즈' 버튼으로 글을 버즈에서 쉽게 공유할 수 있어요.
페이스북의 '공유' 버튼으로 글을 페이스북 친구들과 함께 나눌 수 있습니다.
그리고 '즐겨찾기' 버튼은 글을 나중에 다시 참고하고 싶을 때 유용하죠.
이메일로 글을 보낼 수도 있습니다!

앞으로 내용을 알차게 채워가는 월풍도원을 만들어 가겠습니다. 
모두 행복 하세요!!!



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

블로그 성능을 최적화 하여 로딩 속도를 빠르게 하는 것이 중요한 이유는, 길고 긴 로딩 시간을 기다려주는 방문자는 없기 때문입니다.

저 역시도 그래요. 어떤 사이트에 들어갔는데, 사이트가 로딩을 하는 건지, 컴퓨터가 다운이 된 건지 한참 동안 반응이 없다면, 그 웹사이트나 블로그 창을 닫아 버립니다. 요즘 들어 제 블로그에 들어왔을 때 창을 자꾸 닫아 버리고 싶더군요. 저야 제 블로그니까 좀 느려도, 최적화가 안되어 있어도 참고 쓸 수 있지만, 다른 사람들이 방문했다면, 느려서 속이 터질 것이란 생각이 들었어요. 어떻게 하면 블로그를 최적화해서 속도를 빠르게 만들 수 있을까요? 몇 가지 방법을 알아보도록 하겠습니다.

by 月風

블로그 속도 최적화

최적화 이전-'블로그 속도 최적화'
최적화를 하기 전 블로그의 속도

구글 웹마스터 도구에서 블로그 성능 측정을 해보니,
전세계의 웹사이트들 중에 무려 83%가 제 블로그보다 빠르군요.
그렇다면 제 블로그에 방문하는 분들은 한번 와보고는 다시 찾지 않게 될 확률이 높습니다.
평소에 즐겨 찾는 다른 사이트 보다 '느려 터진' 블로그로 인식이 될 테니까요.
그럼 단계별로 블로그 성능을 최적화해서 속도를 올려보겠습니다.


메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정

메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 기본적인 최적화 후의 속도 측정

포스트(위젯이 많음) 기본적인 최적화 후의 속도 측정-'블로그 속도 최적화'
포스트(위젯이 많음) 기본적인 최적화 후의 속도 측정

-'블로그 속도 최적화'
포스트(위젯이 많음) 기본적인 최적화 후의 속도 측정

기본적인 속도 최적화를 하는 방법은 간단합니다.
CSS는 위에 위치하게, Javascript는 아래에 위치하도록 합니다.
script tag 의 defer속성과 async속성을 잘 이용하면 큰 효과를 볼 수 있어요.
CSS와 Javascript는 압축하여 사용 합니다. (css compressor, javascript compressor와 같은 도구가 있습니다.)
이미지 용량을 줄입니다. (Smushit, RIOT과 같은 도구가 있습니다.)
img 태그를 사용할 땐 width와 height를 이용하여 이미지 크기를 지정 합니다.
이것으로 약간의 속도 개선이 이루어졌지만, 체감상으로는 큰 차이를 못느꼈어요.
그래서 블로그 성능 저하의 가장 큰 원인인 위젯을 정리했습니다.


메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정

메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
메인화면(위젯이 적음) 위젯 최적화 후의 속도 측정

포스트(위젯이 많음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
포스트(위젯이 많음) 위젯 최적화 후의 속도 측정
포스트(위젯이 많음) 위젯 최적화 후의 속도 측정-'블로그 속도 최적화'
포스트(위젯이 많음) 위젯 최적화 후의 속도 측정

우선 블로그 성능 저하에 아주 크게 영향을 끼친 mixsh버튼을 제거했어요.
하지만 여전히 facebook과 Disqus라는 무거운 위젯이 남아 있군요.
위젯을 몽땅 지워버리자니 허전하고, 

그렇다고 이대로 사용하자니 블로그가 느려서 속터집니다.
어떻게 해야 위젯의 속도를 빠르게 할 수 있을까요?
How To Speed Up Your Website Page Load Performance By Delaying The Load Of JavaScript And Widgets - Part 2에서 그 방법을 아주 잘 설명해 두었습니다.

javascript의 async속성과 defer속성을 잘 활용해서 위젯 속도를 최적화 하는 방법이에요.
위젯 최적화 전과 비교해보니 확실히 속도가 빨라졌죠?^^
블로그의 느린 속도에 속이 터졌던 분들에게, 이 글이 도움이 되었으면 좋겠네요.

아래의 유용한 웹 페이지 성능 분석 도구를 이용하면, 블로그 성능을 분석 할 수 있어요.


Webpagetest

Page Speed

YSlow




by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.