Blogger’a İletişim Formu (Bize Ulaşın Sayfası) Nasıl Eklenir?

Yayınlanan: 2020-11-10

Blogger'da bize ulaşın formu eklemek, WordPress gibi eklentileri desteklemediği için sıkıcı bir iştir.

Blogspot blog yazarlarının çoğunun yaptığı şey, üçüncü taraf sitelerin (foxyform, jotform, 123contactform, vb.) Yardımını aramaktır.

Blogger İletişim Formu Sayfası Ancak bugün, Blogger’a nasıl resmi bize ulaşın sayfasını ekleyeceğinizi öğreneceksiniz.

Daha önce de söylediğim gibi, parkta bir yürüyüş gibi yeni sayfalara üçüncü taraf kodların eklenmesi mümkün. Yine de resmi iletişim formu onlardan çok daha iyi.


Resmi Blogger Formunun Yararları

  1. Mesajı gönderir göndermez alacaksınız. Ve teslim edilebilirlik de% 100'dür.
  2. Basit arayüz, ziyaretçilerin sizinle iletişim kurmasını kolaylaştırır.
  3. Cascade Style Sheet (CSS) dilini biliyorsanız, formu beğeninize göre özelleştirmeniz kolay olacaktır.
  4. Mesajın gönderilmesi için sayfanın tamamı yeniden yüklenmeyecektir.

Bu öğreticiyi üç bölüme ayırdım, iletişim gadget'ını ekledim, gizledim ve resmi kodu yeni bir sayfada uyguladım.

1. Bölüm: İletişim Gadget'ını Ekleme

Blogunuza bir bize ulaşın gadget'ı eklemek için aşağıda verilen adımları izleyin.

Adım 1 : blogger.com'u ziyaret edin ve hesabınıza giriş yapın. Birden fazla blog çalıştırıyorsanız, listeden istediğiniz blogu seçmeniz gerekir.

Adım 2 : Gadget ekleme seçeneği elde etmek için sol kenar çubuğundan Düzen'e tıklayın.

blogger-layout-seçeneği
  • Kayıt etmek

Adım 3 : Sağ taraftaki ana panelde bir Gadget Ekle bağlantısı görebilirsiniz. Üzerine tıklamak sizi bir gadget listesine götürecektir.

blogger gadget ekle
  • Kayıt etmek

4. Adım : Ardından, sol taraftan Daha fazla gadget'ı seçin. Şimdi İletişim Formu'nu göreceksiniz. Sadece aynısını ekleyin.

Contact-Form-Gadget-Blogger
  • Kayıt etmek

Bölüm 2: Gadget'ı Gizleme

Şimdi, iletişim gadget'ını nasıl gizleyeceğinizi öğreneceksiniz.

Adım 1 : Buradaki şablon bölümü ile oynamamız gerekiyor. Bu nedenle, sol menüden Şablonlar'a tıklayın.

Blogger Şablon Ayarları
  • Kayıt etmek

Adım 2 : Ardından, HTML'yi Düzenle'ye tıklayın ve blogunuzun kodunun tamamı geniş bir alanda size sağlanacaktır.

Blogger-Şablon-Düzenleme-HTML
  • Kayıt etmek

Adım 3 : ]]> </ b: skin> araması yapın ve aşağıdaki kodu hemen önüne yerleştirin.

div # ContactForm1 {
ekran: yok! önemli;
}

Contact-Form-Code-Blogger
  • Kayıt etmek

Ardından, değişiklikleri korumak için Kaydet'i tıklayın.

Üçüncü adımdan sonra, blogunuzda Kişi pencere öğesini görmeyeceksiniz.

Bölüm - 3: Bir Sayfaya İletişim Formu Ekleme

Ayrı bir sayfada gösterilmek üzere eklenecek özelleştirilmiş resmi blogger iletişim formu kodunu burada alacaksınız.

Adım 1 : Sayfalar'a gidin ve Yeni sayfaya tıklayın.

Blogger’da Yeni Sayfa
  • Kayıt etmek

Adım 2 : Aşağıdaki kodu, içindeki her şeyi kaldırdıktan sonra HTML yayın düzenleyicisine yapıştırın.

Blogger-Bize Ulaşın-Sayfa-Kodu
  • Kayıt etmek

<div id = ”custom_ContactForm1 ″ class =” widget ContactForm ”>
<div class = ”contact-form-widget”>
<p> Aşağıdaki formu doldurarak bizimle iletişime geçin. </p>
<div class = ”form”>
<form name = ”iletişim formu”>
<p> </p>
İsim
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </p>
E-posta adresi
<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>
İleti
<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 = ”Gönder” id = ”ContactForm1_contact-form-submit” class = ”contact-form-button contact-form-button-submit”>
<p> </p>
<div style = ”text-align: center; maksimum genişlik: 222px; genişlik:% 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 = ”Düzenle” 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>

Adım 3: Bir başlık ekleyin (Bize Ulaşın gibi) ve ardından aşağıda verilen ayarları değiştirin.

Bize Ulaşın-Sayfa-Blogger
  • Kayıt etmek

4. Adım: Son olarak, Yayınla düğmesini tıklayın. Bu kadar.

Bu iletişim formundan gönderilen mesajlar yönetici e-postasına teslim edilecektir. Blogun birden fazla yöneticisi varsa, hepsi onu alır.


➜ Diğer Yararlı Blogspot Öğreticileri:

  • Blogger’a Özel Robots.txt Dosyası Nasıl Eklenir?
  • Blogger Site Haritası Google Arama Konsoluna Nasıl Gönderilir?

Sarma

Umarım artık blogger'da bize ulaşın sayfasını nasıl ekleyeceğinizi biliyorsunuzdur. Başarı mesajından sonra bile sıfır teslim edilebilirlik gibi herhangi bir zorluk bulursanız, İletişim widget'ını yeniden yüklemenizi öneririz.

Ve evet, CSS ve javascript parçacıklarıyla başa çıkma konusunda yeterli bilginiz varsa, daha iyi bir görsel çekicilik için sayfayı özelleştirmeye devam edebilirsiniz.

Bu yazıyı blogger arkadaşlarınızla paylaşmayı unutmayın.