Blogger에서 연락처 양식 (연락처 페이지)을 추가하는 방법은 무엇입니까?

게시 됨: 2020-11-10

Blogger에 문의 양식을 추가하는 것은 WordPress와 같은 플러그인을 지원하지 않으므로 지루한 작업입니다.

Blogspot 블로거의 대부분은 타사 사이트 (foxyform, jotform, 123contactform 등)의 도움을 구하는 것입니다.

Blogger 문의 양식 페이지 그러나 오늘은 Blogger에 공식 문의 페이지를 추가하는 방법을 배우게됩니다.

앞서 말했듯이 공원 산책과 같은 새 페이지에 타사 코드를 삽입 할 수 있습니다. 그러나 공식 문의 양식은 그보다 훨씬 낫습니다.


공식 Blogger 양식의 이점

  1. 메시지를 보내는 즉시 받게됩니다. 또한 전달 가능성도 100 %입니다.
  2. 간단한 인터페이스를 통해 방문자가 쉽게 연락 할 수 있습니다.
  3. Cascade Style Sheet (CSS) 언어를 알고 있다면 원하는대로 양식을 쉽게 사용자 지정할 수 있습니다.
  4. 메시지를 보내기 위해 전체 페이지가 다시로드되지 않습니다.

이 튜토리얼을 연락처 가젯을 추가하고 숨기고 새 페이지에 공식 코드를 구현하는 세 섹션으로 나눴습니다.

1 부 : 연락처 가젯 추가

블로그에 연락처 가젯을 추가하려면 아래 단계를 따르세요.

1 단계 : blogger.com을 방문하여 계정에 로그인합니다. 여러 블로그를 운영하는 경우 목록에서 원하는 블로그를 선택해야합니다.

2 단계 : 왼쪽 사이드 바에서 레이아웃을 클릭하면 가젯 추가 옵션이 표시됩니다.

블로거 레이아웃 옵션
  • 저장

3 단계 : 오른쪽의 기본 패널에 가젯 추가 링크가 표시됩니다. 그것을 클릭하면 가젯 목록으로 이동합니다.

블로거 가젯 추가
  • 저장

4 단계 : 그런 다음 왼쪽에서 추가 가젯 을 선택합니다. 이제 Contact Form 이 표시됩니다. 그냥 추가하십시오.

Contact-Form-Gadget-Blogger
  • 저장

2 부 : 가젯 숨기기

이제 연락처 가젯을 숨기는 방법을 배웁니다.

1 단계 : 여기서 템플릿 섹션을 가지고 놀아야합니다. 따라서 왼쪽 메뉴에서 템플릿을 클릭하십시오.

Blogger- 템플릿 설정
  • 저장

2 단계 : 그런 다음 HTML 편집을 클릭하면 넓은 필드에 블로그의 전체 코드가 제공됩니다.

Blogger- 템플릿-편집 -HTML
  • 저장

3 단계 : ]]> </ b : skin>을 검색 하고 바로 앞에 다음 코드를 배치합니다.

div # ContactForm1 {
디스플레이 : 없음! 중요한;
}

문의 양식 코드 블로거
  • 저장

그런 다음 저장을 클릭하여 변경 사항을 유지합니다.

세 번째 단계 후에는 블로그에 연락처 위젯이 표시되지 않습니다.

파트 – 3 : 페이지에 연락처 양식 추가

여기에 맞춤형 공식 블로거 연락처 양식 코드가 추가되어 별도의 페이지에 표시됩니다.

1 단계 : 페이지로 이동하여 새 페이지를 클릭합니다.

New-Page-in-Blogger
  • 저장

2 단계 : HTML 게시물 편집기에서 모든 항목을 제거한 후 다음 코드를 붙여 넣습니다.

Blogger-Contact-Us-Page-Code
  • 저장

<div id =”custom_ContactForm1 ″ class =”widget ContactForm”>
<div class =”contact-form-widget”>
<p> 아래 양식을 작성하여 Google에 문의하세요. </ p>
<div class =”form”>
<양식 이름 =”연락처 양식”>
<p> </ p>
이름
<br>
<입력 유형 =”텍스트”값 =””크기 =”30 ″ 이름 =”이름”id =”ContactForm1_contact-form-name”class =”contact-form-name”>
<p> </ p>
이메일
<span style =”font-weight : bolder;”> * </ span>
<br>
<input type =”text”value =””size =”30 ″ name =”email”id =”ContactForm1_contact-form-email”class =”contact-form-email”>
<p> </ p>
메시지
<span style =”font-weight : bolder;”> * </ span>
<br>
<textarea rows =”5 ″ name =”email-message”id =”ContactForm1_contact-form-email-message”cols =”25 ″ class =”contact-form-email-message”> </ textarea>
<p> </ p>
<input type =”button”value =”Send”id =”ContactForm1_contact-form-submit”class =”contact-form-button contact-form-button-submit”>
<p> </ p>
<div style =”text-align : center; 최대 너비 : 222px; 너비 : 100 %”>
<p id =”ContactForm1_contact-form-error-message”class =”contact-form-error-message”> </ p>
<p id =”ContactForm1_contact-form-success-message”class =”contact-form-success-message”> </ p>
</ div>
</ form>
</ div>
</ div>
<div class =”clear”> </ div>
<span class =”widget-item-control”>
<span class =”item-control blog-admin”>
<a title =”Edit”target =”configContactForm1 ″ onclick =”return _WidgetManager._PopupConfig (document.getElementById (“ContactForm1 ″));” href =”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =”quickedit”>
<img width =”18 ″ height =”18 ″ src =”// img1.blogblog.com/img/icon18_wrench_allbkg.png”alt =””>
</a>
</ span>
</ span>
<div class =”clear”> </ div>
</ div>

3 단계 : 제목 (예 : Contact Us)을 추가 한 다음 아래와 같이 주어진 설정을 변경합니다.

Contact-Us-Page-Blogger
  • 저장

4 단계 : 마지막으로 게시 버튼을 클릭합니다. 그게 다야.

이 문의 양식에서 보낸 메시지는 관리자 이메일로 전달됩니다. 블로그에 두 명 이상의 관리자가있는 경우 모든 관리자가 가져옵니다.


➜ 기타 유용한 Blogspot 자습서 :

  • Blogger에서 사용자 지정 Robots.txt 파일을 추가하는 방법은 무엇입니까?
  • Blogger Sitemap을 Google Search Console에 제출하는 방법?

마무리

이제 블로거에 연락처 페이지를 추가하는 방법을 알고 계시기를 바랍니다. 성공 메시지 이후에도 배송 성 제로화 등의 어려움이있는 경우 연락처 위젯 재설치를 권장합니다.

예, CSS 및 자바 스크립트 스 니펫을 다루는 데 충분한 지식이 있다면 더 나은 시각적 매력을 위해 페이지를 맞춤 설정할 수 있습니다.

이 게시물을 블로거 친구들과 공유하는 것을 잊지 마십시오.