블로그에 이메일 버튼 달기

이메일을 다는 방법은 여러가지가 있는걸로 알고 있습니다. 웹서비스를 이용해서 구독버튼을 블로그에 달기도 합니다.
그중에 피드버너를 이용해서 블로그에 구독버튼을 달기도 합니다.
피드버너를 이용하는 방법은 별군님이 잘 설명해주셨으니 참고하시기 바랍니다.
별군님의 피드버너 이메일 이용하기

또한 이메일을 간단하게 이미지로 만들어 주기도 합니다. 검색만 하면 다 나오는 정보인데 링크하나 올립니다.워낙 유명한 곳이니까요.

이메일 이미지로 만들기 링크1 링크2

블로그에 이메일 이미지 달기

제가 소개하는것은 다른것을 이용하지 않고 자바스크립트로 컴에 설치한 아웃룩을 이용하는겁니다. 제 블로그에 보시면 RSS 옆에 우체통 이미지가 하나 있습니다. 클릭해보세요.
우선 이미지로 하는것을 예로 들겠습니다.
그럼 이미지가 필요하겠죠?. 위의 링크에서 하나 만들던가 아님 제가 사용하고 잇는것을 하나 올리겠습니다.



위의 그림을 다운로드하고 이름을 letter.jpg 했다고 가정합니다.
스킨편집에서 이미지를 업로드 합니다.
그런다음 아래의 코드를 원하는 곳에 삽입하세요.


<!-- 메일보내기 양식 -->
<div class="e_mail">
    <script type="text/javascript">
        /*<![CDATA[*/
        /***********************************************
        * Encrypt Email script- Please keep notice intact
        * Tool URL: http://www.dynamicdrive.com/emailriddler/
        * **********************************************/
        <!-- Encrypted version of: hjm2358 [at] *****.*** //-->

        var emailriddlerarray=[104,106,109,50,51,53,56,64,112,97,114,97,110,46,99,111,109]
        var encryptedemail_id53='' //variable to contain encrypted email 
        for (var i=0; i<emailriddlerarray.length; i++)
         encryptedemail_id53+=String.fromCharCode(emailriddlerarray[i])
        document.write('<a href="mailto:'+encryptedemail_id53+'"><img src="./images/letter.jpg" alt="메일보내기" />e-mail</a>')
        /*]]>*/
    </script>
</div>
<!--//메일보내기 양식-->

삽입후 좀더 세세하게 조정을 하려면 css 로 조정을 하면 됩니다. 넣는 위치마다 다르기 때문에 딱이 뭐라 말할수는 없지만 저는아래처럼 했습니다.
왼쪽에 검색창이나 RSS 버튼등이 있기 때문에 float:left 를 사용했구요. 이미지의 크기와 너비를 지정해주었습니다.


.e_mail{
	display:inline; 
	width:64px; 
	height:64px; 
	margin:0; 
	float:left;
}

css서식은 대략 보시면 알겁니다.
이 이메일버튼의 장점은 가입이나 기타 다른 모션이 필요없다는 것입니다. 클릭하면 바로 이메일을 보낼수 있다는 것이죠.
다른것은 가입하고, 아니면 다른 모션을 취해야 합니다. 즉 한번, 두번 이상의 클릭이나, 텍스트 입력이 있어야 하는데 이것은 그것이 필요없다는것이 장점이라고 할 수 있습니다.
이 방식만 알면 다른 방식도 할수 있습니다.
위의 html 코드에서 보시면 대략 아시겠지만 이코드의 출처는 여기입니다.

Email Riddler 이용하기

여기를 클릭하시면 아래와 같은 화면이 나오고 3가지 형태로 이용할수 있으니 이용하시면 됩니다.
단 자바스크립트 코드의 내용을 지우시고 사용하면 안된다고 하네요. 설명은 대략 그림을 참고하세요.



참고


개    개