텀블러 사용법: 블로그 글을 이메일로 친구에게 보내기 버튼 -피드버너 피드플레어 Email This 설정과 활용
블로그 방문자가 좋은 글을 친구에게 이메일로 보내 줄 수 있는 버튼이 있다면 편리할 것이다. 텀블러는 이런 기능을 자체적으로 제공하고 있지만, 계정에 로그인해야 쓸 수 있으니, 텀블러 계정이 없는 방문자는 사용할 수가 없다. 피드버너를 이용하면 이 기능을 어디든 달 수 있다.
아래의 그림은 텀블러 블로그에 글을 이메일로 보내기 버튼을 단 모습이다.
[Email This]버튼을 누르면 아래 두 번째 그림과 같이 보고 있는 글을 친구에게 이메일로 보낼 수 있는 창이 열린다.
방문자는 받을 사람의 이메일을 입력하여 보내면, 글의 제목등이 이메일로 보내진다.
아래에서는 피드버너 설정과 코드를 받는 방법, 그리고 텀블러에 붙이는 방법을 설명한다.
1. 텀블러 블로그에 Email This]버튼을 단 모습과 이메일로 보내기 창 모습
[그림: 텀블러 블로그에 Email This 버튼을 단 모습]
![텀블러 블로그에 [Email This]버튼을 단 모습](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNk4lPVplESf6eUf1jayEHDBfVqi63QSTLlmy2Ym9k-rN7mLQ4V9K8qN-DWbAace68WyJys_3A6ypIXa3yj67bAdxRvGlMgI_DcLYhx6iKneGDKoT6tPKswOcHZc2eFl5WOt-WYRbHdVE/s1600/FeedBurner-FeedFlare-Email-This-button-on-Tumblr1.png "텀블러 블로그에 [Email This]버튼을 단 모습")
[그림: Email This 버튼을 눌렀을 때, 글을 이메일로 보내는 창의 모습]
2.피드버너 설정 및 코드 받기
1. Email This 기능 활성화
아래의 첫번째 그림에서와 같이,
==> 피드버너 대시보드 > 블로그 선택 > 최적화(Optimize) > 피드플레어(FeedFlare)로 간다
==> 열린 창의 오른쪽 위에 있는 "Email This"의 체크박스 가운데 오른쪽 체크박스에 체크를 하고, 창 맨 아래에 있는 저장(Save)를 누른다.
2.코드받기
==> 창의 맨 아래(Save버튼 바로 위)에 아래 그림에서 주황색으로 표시한 것과 같이 코드를 받는 란(On Site)이 있다.
==> 드롭다운 버튼을 눌러서 박스가 열리면, 맨 아래에 있는 기타(Others)를 선택한다.
==> 그러면, 아래의 두 번째 그림과 같은 코드받기 창이 뜬다.
[그림: 피드버너 Email This 활성화 및 코드창 열기]
[그림 2: 코드창]
==> 아래 그림과 같은 코드창이 열리면
==> 스크롤 바를 당겨서 그림에서 주황색으로 표시한 것과 같은 "Generic" 코드를 복사한다.
3.코드 설명
1.기본 코드 모양
복사한 코드는 아래와 같은 모습이다. 빨강색 부분은 자신의 피드버너 계정 이름이고, 연두색으로 표시된 "POST-URL-HERE" 부분을 텀블러 블로그의 글 고정주소(PermaLinkURL) 코드로 바꾸면 된다.
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=POST-URL-HERE" type="text/javascript"></script>
2. 글 고유주소코드(PermaLinkURL) 변경
텀블러 블로그의 글 고정주소를 불러오는 코드는 {Permalink}이다. 그런데, 이 코드를 넣으면, 블로그 글 주소에 글자를 넣었을 때는 [Email This]버튼이 블로그에 나타나지 않는다. {Permalink}코드 대신에 아래와 같이 블로그 주소와 글고유번호 코드를 같이 넣으면 잘 작동한다.
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=http://sarangchaetalk.tumblr.com/post/{PostID}" type="text/javascript" target="blank"></script>
위의 코드에서 블로그 이름부분을 자신의 블로그 이름으로 바꾼다.
예) http://sarangchaetalk.tumblr.com/post/{PostID}
그러면 완성된 코드는 아래와 같다.
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=http://자신의 텀블러계정이름.tumblr.com/post/{PostID}" type="text/javascript" target="blank"></script>
3. 꾸미기
위의 코드를 그냥 넣으면 단순히 'Email This'라는 글자만 표시된다.
꾸미는 방법은 여러가지가 있겠지만, 여기서는 아주 단순한 방법을 설명한다.
<div style="height:20px; width:70px; border:1px solid #e1e1e1; background-color:#FBBD18; padding-left:2px;">
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=http://sarangchaetalk.tumblr.com/post/{PostID}" type="text/javascript" target="blank"></script>
</div>
위의 코드에서 가운데 있는 검정색 부분은 기본코드이고, 빨강색 부분은 모양을 내기 위해 추가한 <div>태그이다. 이를 설명하면 다음과 같다. 이를 참고하여 자신의 블로그에 잘 어울리도록 크기와 색상을 조절하면 된다.
height: 20px <== 테두리 높이
width: 70px <== 테두리 너비
border: 1px solid #e1e1e1 <== 테두리 선굵기는 1px, 선종류는 직선, 선색상은 #e1e1e1
background-color: #FBBD18 <== 바탕색
padding-left: 2px <== 테두리의 왼쪽끝과 글자 사이의 간격
아래 그림은 꾸미기 전과 꾸민 후의 모습이다.
4. 텀블러 블로그에 코드 넣기
위를 참고하여 코드를 만들었으면, 아래 그림에서 보는 것과 같이 HTML편집창을 열고 원하는 위치에 코드를 넣고 저장을 하면 된다.
[그림: 텀블러 블로그 HTML 편집창 열기]
텀블러 HTML창을 여는 경로는 아래 글을 참조하면 된다.
텀블러 블로그 이름(타이틀), 설명(Description) 바꾸기와 테마수정창 여는 경로 3가지
>> 피드버너 사용법 글 목록
도움이 되었기를 바랍니다.
아래의 그림은 텀블러 블로그에 글을 이메일로 보내기 버튼을 단 모습이다.
[Email This]버튼을 누르면 아래 두 번째 그림과 같이 보고 있는 글을 친구에게 이메일로 보낼 수 있는 창이 열린다.
방문자는 받을 사람의 이메일을 입력하여 보내면, 글의 제목등이 이메일로 보내진다.
아래에서는 피드버너 설정과 코드를 받는 방법, 그리고 텀블러에 붙이는 방법을 설명한다.
1. 텀블러 블로그에 Email This]버튼을 단 모습과 이메일로 보내기 창 모습
[그림: 텀블러 블로그에 Email This 버튼을 단 모습]
[그림: Email This 버튼을 눌렀을 때, 글을 이메일로 보내는 창의 모습]
2.피드버너 설정 및 코드 받기
1. Email This 기능 활성화
아래의 첫번째 그림에서와 같이,
==> 피드버너 대시보드 > 블로그 선택 > 최적화(Optimize) > 피드플레어(FeedFlare)로 간다
==> 열린 창의 오른쪽 위에 있는 "Email This"의 체크박스 가운데 오른쪽 체크박스에 체크를 하고, 창 맨 아래에 있는 저장(Save)를 누른다.
2.코드받기
==> 창의 맨 아래(Save버튼 바로 위)에 아래 그림에서 주황색으로 표시한 것과 같이 코드를 받는 란(On Site)이 있다.
==> 드롭다운 버튼을 눌러서 박스가 열리면, 맨 아래에 있는 기타(Others)를 선택한다.
==> 그러면, 아래의 두 번째 그림과 같은 코드받기 창이 뜬다.
[그림: 피드버너 Email This 활성화 및 코드창 열기]
[그림 2: 코드창]
==> 아래 그림과 같은 코드창이 열리면
==> 스크롤 바를 당겨서 그림에서 주황색으로 표시한 것과 같은 "Generic" 코드를 복사한다.
3.코드 설명
1.기본 코드 모양
복사한 코드는 아래와 같은 모습이다. 빨강색 부분은 자신의 피드버너 계정 이름이고, 연두색으로 표시된 "POST-URL-HERE" 부분을 텀블러 블로그의 글 고정주소(PermaLinkURL) 코드로 바꾸면 된다.
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=POST-URL-HERE" type="text/javascript"></script>
2. 글 고유주소코드(PermaLinkURL) 변경
텀블러 블로그의 글 고정주소를 불러오는 코드는 {Permalink}이다. 그런데, 이 코드를 넣으면, 블로그 글 주소에 글자를 넣었을 때는 [Email This]버튼이 블로그에 나타나지 않는다. {Permalink}코드 대신에 아래와 같이 블로그 주소와 글고유번호 코드를 같이 넣으면 잘 작동한다.
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=http://sarangchaetalk.tumblr.com/post/{PostID}" type="text/javascript" target="blank"></script>
위의 코드에서 블로그 이름부분을 자신의 블로그 이름으로 바꾼다.
예) http://sarangchaetalk.tumblr.com/post/{PostID}
그러면 완성된 코드는 아래와 같다.
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=http://자신의 텀블러계정이름.tumblr.com/post/{PostID}" type="text/javascript" target="blank"></script>
3. 꾸미기
위의 코드를 그냥 넣으면 단순히 'Email This'라는 글자만 표시된다.
꾸미는 방법은 여러가지가 있겠지만, 여기서는 아주 단순한 방법을 설명한다.
<div style="height:20px; width:70px; border:1px solid #e1e1e1; background-color:#FBBD18; padding-left:2px;">
<script src="http://feeds.feedburner.com/~s/Sarangchaetalk?i=http://sarangchaetalk.tumblr.com/post/{PostID}" type="text/javascript" target="blank"></script>
</div>
위의 코드에서 가운데 있는 검정색 부분은 기본코드이고, 빨강색 부분은 모양을 내기 위해 추가한 <div>태그이다. 이를 설명하면 다음과 같다. 이를 참고하여 자신의 블로그에 잘 어울리도록 크기와 색상을 조절하면 된다.
height: 20px <== 테두리 높이
width: 70px <== 테두리 너비
border: 1px solid #e1e1e1 <== 테두리 선굵기는 1px, 선종류는 직선, 선색상은 #e1e1e1
background-color: #FBBD18 <== 바탕색
padding-left: 2px <== 테두리의 왼쪽끝과 글자 사이의 간격
아래 그림은 꾸미기 전과 꾸민 후의 모습이다.
4. 텀블러 블로그에 코드 넣기
위를 참고하여 코드를 만들었으면, 아래 그림에서 보는 것과 같이 HTML편집창을 열고 원하는 위치에 코드를 넣고 저장을 하면 된다.
[그림: 텀블러 블로그 HTML 편집창 열기]
텀블러 블로그 이름(타이틀), 설명(Description) 바꾸기와 테마수정창 여는 경로 3가지
>> 피드버너 사용법 글 목록
도움이 되었기를 바랍니다.