월풍도원 블로그의 컨텐츠를 정리한 dorajistyle.net

블로그에 글을 하나둘씩 적다 보니 제법 쌓여서 1,000개가 넘었다.
구글 블로그는 글을 쓰고 올리기는 좋지만 썼던 글을 찾아보기는 영 불편하다.
RSS를 동적으로 받아와서 분류해 보았지만, 동적으로 받아 오니 글 개수가 늘어날수록 성능이 떨어진다.
그래서 작년 가을에 static블로그를 하나 만들어야겠다고 마음을 먹고 가볍게 시작했다.
Jekyll, Octopress, Pelican, Middleman, Metalsmith등 다양한 Static site generate를 사용해 봤지만 아쉬움이 남았는데,
다양한 플러그인을 제공하는 Docpad를 알게 되어 이를 가지고 static 사이트 제작을 시작하였다.
며칠이면 뚝딱 만들 줄 알았는데 이게 1년 넘게 걸리는 대장정이 될 줄은 몰랐다.
Pure로 테마와 레이아웃을 간단하게 제작하고, 본격적으로 글을 옮기는 시도에 들어가면서 시간이 오래 걸렸다.
제일 큰 문제는 파일 개수가 너무 많으면 docpad에서 제대로 처리를 못 하는 것이었다.
generate를 한 번 실행하면 한 시간이고 두 시간이고 혼자서 자원을 잡아먹으며 시간을 보내고는,
‘오류가 발생한 것 같은데요?’
라는 메시지를 딸랑 던져줄 때 허무함이란 이루 말할 수 없었다.
버그를 한둘씩 잡다 보니 사계절이 지났다.
‘static 블로그는 무슨 static블로그냐. 집어 치우자.’
라는 생각과
‘그래도 지금까지 들인 공이 있는데 끝을 보자.’
생각이 교차하길 여러 번.
올해를 넘기지 않고 blogger-docpad를 완성했다.
이제 이 도구를 어디 노는 서버에 넣어 두고 cron을 돌려 두면, 구글 블로거에 글을 쓸 때마다 자동으로 static 블로그에 업데이트되는 거다.
글을 올리면 수작업으로 한 땀 한 땀 업데이트하는 재미도 있겠지만,
기계가 해도 되는 일을 수작업하는 건 무척 귀찮은 일이다.

꼭 하지 않아도 될 일을 하면서 사는 건 슬픈 일이다.
사람은 좀 더 게으르고 즐겁게 살 권리가 있다.

dorajistyle.net



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!

구글 블로거에서 블로그 글 목차 보여주기.

블로그를 시작한 지 어느덧 팔 년.
그동안 1,000개가 넘는 글을 썼습니다.
글이 많아지니 전에 썼던 글을 찾을 때, 한참 헤매는 경우가 많아요.
그래서 얼마 전 월풍서가라는 메뉴를 만들었습니다.
블로그에 썼던 글을 좀 편하게 찾아보려는 의도에서였지요.
레이블(태그)별로 RSS를 받아와서 자동으로 목차를 만들어 주면 좋겠다고 생각했는데,
구글 블로거엔 레이블 간 계층을 지원하지 않아 제가 원하는 목차를 만들기 어려울 듯 했습니다.
그래서 수동으로 정리를 시작했어요.
읽었던 책에 대한 글을 한참을 걸려 정리하고 나니, 다른 글을 정리할 엄두가 나지 않았습니다.
글을 새로 쓸 때마다 목차를 갱신해야 한다는 점도 큰 부담이었어요.
거의 반년 동안 목차 페이지를 반쪽짜리로 남겨두었더니 자꾸만 눈에 밟힙니다.
좀 제대로 된 목차를 만들어 보고 싶었어요.

그러던 중 아주 좋은 정보를 얻었습니다.

http://www.dorajistyle.pe.kr/feeds/posts/summary/-/A/B/C
식으로 피드를 받아오면 A,B,C 레이블을 모두 포함한 포스트 정보를 얻을 수 있다는 것이죠.
이거다 싶어서 코드를 짜다 보니 한가지 문제가 있습니다.
너무 많은 요청(Request)를 보내야 하는 것인데요.
결국 1차 레이블만 요청해서 받아온 결과를 클라이언트 단에서 처리해주는 방식으로 코드를 작성했습니다.
페이지를 읽는데 시간이 조금 걸리긴 하지만, 이정도면 만족스럽습니다.

월풍서가(月風書架)


목차를 만들며 레이블 정리를 새로 했습니다.
그러다 보니 예전 글을 좀 읽게 되었는데요.
정말 유치한 글도 보이고, 지금 봐도 마음에 드는 글도 있습니다.
나중엔 마음에 드는 글 목록도 만들어서 월풍서가에 넣고 싶어요.
이번에 글을 정리하다가 알게 된 한가지 사실에 충격을 받았습니다.
제가 미국의 문화식민이었다는 건데요.
블로그에 쓴 영화 감상평을 보면 미국 영화가 대다수더라고요.
한국을 포함한 다른 나라 영화를 모두 합쳐야 미국 영화를 본 수에 겨우 미칩니다.
저도 모르는 사이에 미국 문화에 크게 노출되어있던 거죠.
물론 앞으로도 미국 영화를 볼 때가 많겠지만,
미국 영화라는 것을 의식하고 보고,
다른 나라 영화도 두루 보아야겠습니다.

혹시 구글 블로거에 목차 페이지를 만들고 싶으신 분을 위해 코드를 공유합니다.
필요하신 분은 가져다 쓰세요.

구글 블로거에 목차 페이지를 생성해 주는 스크립트



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!

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

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

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

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



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 : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!

가벼운 번역 위젯(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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12vmtNK0PBSz9UZX1tXkHFtsgIle6W3GPI9YYBq1zwJsOZ2SdtmTPBrTW6vHVcyvymV3Qi-zvOpbmW79TLWAvD7EjGVUZRBaEEcuk6Fu2u2JGLMsojLVCggQfxg9D-I7GjDs6/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXrBcGKozcUEAEVuCvvjh6mQUjQui5kfF5nksRnp9rBiiaMpBF5Xl_7gGvdDeaYRuyZ5SOpApaJ6uEn0LZgKfZ6drqjAEXpn5e7cueqvoiDxiXnoaF6aRaa_mCmxRgG7gxBmL/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56-dicAlqqfDSiJl7VG-Fxcg2uu-CTMvqy49aiyqNDtU-jsOQ695y6dwJBLUQQR4JF_mcaL6H9md7gdX-817O1eUVzbP9GL3dbPoJEFn1D5InMLaafmG4WeYfJ87lxkMNbZWD/');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 : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!

트랙백을 지원하지 않는 구글 블로거에서도, 그리즈 몽키 스크립트를 이용하여 트랙백을 보낼 수 있는 방법이 있습니다.

구글 블로거의 백링크는 물론 멋진 기능이지만,
한국의 블로거들과 교류하기엔 트랙백이 편리합니다.
대부분의 대한민국 블로그 서비스에서 트랙백을 지원하고 있으니까요.
우선 DISQUS를 이용하면 트랙백을 받는 것이 가능합니다.
하지만 연관이 있는 다른 게시물에 트랙백을 보낼 수는 없죠.
그래서 방법을 찾다가, 아주 간단한 방법을 발견 했어요.
바로 그리즈 몽키 스크립트를 이용하는 방법입니다.
by 月風

구글 블로거에서 트랙백을 보내자

그리즈몽키 스크립트를 이용한 트랙백 보내기에 대해선
GreaseMonkey & Firefox – How To Send a Trackback With Blogger (Part 2)에서 잘 설명하고 있어요.
트랙백기능과 더불어 del.icio.us에 북마크를 쉽게 추가 할 수도 있는 멋진 스크립트죠.

Blogger del.icio.us publishing and post categorizing helper (with trackback) for the new Blogger
구글 블로거용 그리즈몽키 트랙백 스크립트

기존 에디터-'구글 블로거에서 트랙백을 보내자'
기존 에디터를 
글쓰기 에디터로 사용한다면, 잘 작동합니다.

업데이트된 에디터-'구글 블로거에서 트랙백을 보내자'
하지만 안타깝게도 업데이트된 에디터를 사용하면 작동을 하지 않는군요.

그래서 스크립트를 업데이트된 에디터에서 사용 가능하도록 수정 했습니다.

Blogger del.icio.us publishing and post categorizing helper (with trackback) for the new Blogger with New Post Editor 
구글 블로거용 그리즈몽키 트랙백 스크립트

위 스크립트를 이용하시면 구글 블로거의 업데이트된 에디터에서도 트랙백을 보낼 수 있어요.

이젠 그리즈몽키 스크립트로  구글 블로거에서도 트랙백을 편리하게 보내세요.:D



by


Tags : , , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!