Daha önce size bir çok kez blog ziyaretçilerinizle iletişime geçebileceğiniz uygulama ve servis tanıtmıştık fakat şuan sizinle paylaşacağımız yöntem sayesinde Google Dökümanlar da oluşturduğunuz formu ,kendi blog’unuza ekleyebilir ve tasarımını da kendinize göre özelleştirebilirsiniz.
Tasarımını kendi zevk ve beğenilerinize göre özelleştirebileceğiniz bu formda hiç bir reklam veya linkin bulunmaması da cabası.
Bizim test amaçlı oluşturduğumuz bu formu ziyaret ederseniz, Google Dökümanlarla oluşturulmuş bir form göreceksiniz , burada da bu formun modifiye edilmiş yani bizim tasarımını kendimize göre özelleştirdiğimiz ve jqueryle daha işlevsel hale getirdiğimiz son halini görebilirsiniz.
Kendi formunuzu oluşturmak içinse aşağıdaki adımları takip edebilirsiniz.
1.Adım Google Dökümanları kullanarak bir İletişim Formu oluşturun
Google hesabınız ile Google Dökümanlarda oturum açtıktan sonra solda bulunan oluştur butonuna basın açılan menüde form bağlantısına tıklayın.
Kalem ikonuna tıkladıktan sonra belirginleşen bölümde soru başlığı yazan bölümün karşısına hangi bilgiyi almak istiyorsanız onu yazıp diğer bölümleri düzenlemeye geçebilirsiniz. Burada da ayrıntılı bir görsel bulabilirsiniz.
Örnek: Ben ilk bölümde soru başlığı yazan bölüme Adınız yazıp diğer bölümü düzenlemeye geçiyorum ve Tüm bölümlerimi oluşturduktan sonra sağ üst köşede bulunan kaydet yazan butona basıyorum. Oluşturduğum formu görüntülemek için sayfanın en altında bulunan bağlantıya tıklamam yeterli.
İletişim sayfanızı oluşturduktan sonra kendi blogunuzda bir sayfa oluşturmanız gerekiyor bunun içinde sırası ile aşağıdaki adımları takip edin.
2.Adım İletişim sayfanızı oluşturun
İşleri sizn için kolaylaştırmak için formu oluşturacak kodları fazlalık kodlaradan temizledik ve sorunsuz çalışacak bir hale getirdik. aşağıda bulunan kodları kopyalayın.
Kodları kopyaladıktan sonra sırası ile Blogger’ın(Güncelleştirilmiş tasarım) , Kumanda panelinden, Sayfalar bölümüne geçerek Yeni sayfa ardından da Boş sayfaya tıklayın.
Açılan sayfada yazı editörünü HTML moduna getirdikten sonra kopyaladığınız kodları yapıştırın.
HTML Kodlarımızı ekledikten sonra bu kodlar üzerinde gerekli değişiklikleri yapmanız gerekiyor. Bunun içinde oluşturduğunuz iletişim sayfasına giderek her hangi boş bir yere tıklayarak kaynağı görüntüleyin.
Eklediğiniz kodlarda değiştirmeniz gereken bölümlerin araka planını sarıyla renklendirdik.
Bu bölümlerden ilki iletişim sayfanızın linki.
İletişim sayfanızın linkini kodlar içerisinde bulup , bloga eklediğiniz formun kodlarında bu linki değiştirin.
Sayfanızın linkini değiştirdikten sonra, zorunlu alanların kodlarını da sırası ile aşağıdaki şekilde değiştirmeniz gerekiyor.
Örnek: benim ilk bölümüme yani formu dolduracak kişinin adının yazılmasını istediğim bölüme ait kodlar şöyle.
id="entry_0">
Bu kodlarda sarıyla renkelendirdiiğim kodlarla iletişim formunda bu bölüme ait olan kodların aynı olması gerekiyor.
iletişim sayfasının kaynağına baktığımda sarıyla renklendirdiğim bölümün sıralaması ve kodları aynı olduğu için değiştirmiyorum.
Konuyu biraz açacak olursam benim iletişim formunda ad yazılmasını istediğim bölümün id’si ile blog’uma eklediğim iletişim formunun sıralaması ve kodlarının aynı olması gerekiyor bunun içinde iletişim sayfasının kodları içerisinde ad yazılmasını istediğim bölümün kodları içerisinde id buluyorum id="entry_0" iletişim sayfasındaki id ile bloga eklediğim id aynı olduğu için değiştirme gereği duymuyorum Google dökümanlarda oluşturduğum iletişim sayfasındaki id eğer id="entry_1" olsaydı bloga eklediğim formdaki kodlarda id değiştirip id="entry_1" yapmam gerekirdi.
Bu şekilde sarıyla renklendirdiğim diğer bölümleri de bulup sırayla değiştirmeniz gerekiyor.
HTML kodları üzerinde tüm değişiklikleri yaptıktan sonra artık sıra iletişim formumuzun tasarımını özelleştirebileceğimiz CSS kodlarını ve zorunlu alanların doldurulmasını sağlayacak Javascript kodlarını eklemeye geliyor.
3.Adım CSS Kodlarını blog’unuza ekleyin
Sırası ile Blogger kumanda paneli —> Tasarım - -> HTML’yi düzenle yolunu takip edin ve klavyenizdeki "Ctrl ve F" tuşlarına aynı anda basın , açılan arama formunda ]]> ifadesini aratıp bulduktan sonra, aşağıdaki CSS kodlarını hemen üzerine gelecek şekilde ekleyin.
#ss-form input,#ss-form textarea {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQtvU_2hSobN2SR5YduSvZEwYJ-3tsvNy84dObUwYfqUnk_CxOQT7a-ceqTrLQWPmzaMuhDkgBLKlT-HETg_ywjuhn7eUAAZFjC3yJQUTBjpdoCK-gyK4IF8UYCH380vls0-YFMH7SRY/s1600/2011-12-26_132758.png) repeat-x;
font-size:12px;
line-height:18px;
font-family: 'Gloria Hallelujah', cursive;
border:1px solid #c7c9cd; padding:3px;
outline: none;
margin: 2px 0 8px;
text-shadow: 0px 0px 1px #aaa;
}
#ss-form input {
width:200px;
height:20px;
}
#ss-form input.submit {
height:30px;
width:100px;
font-size:18px;
font-weight:400;
}
.ss-q-title{
font-family: 'Gloria Hallelujah', cursive;
font-size:18px;
font-weight:400;
}
#error {
color:red;
font-size:14px;
display:none;
}
.needsfilled {
color:#000;
}
4.Adım Javascript kodlarını ekleyin
CSS kodlarını şablonunuza ekledikten sonra ifadesini bulup hemen üzerine gelecek şekilde aşağıda bulunan Javscript kodlarını ekleyin
Tüm işlemleri doğru yaptıysanız artık sizin de sorunsuz çalışan bir iletişim formunuz var demektir, son olarak yapmanız gereken işlemse Google Dökümanlara geri dönerek ,size mesaj gönderildiğinde bunun e-posta adresinize bir mail olarak haber verilmesi için gerekli ayarları yapmak bunun içinde sırası ile aşağıdaki adımları uygulayın.
Araçalara tıkladıktan sonra açılan menüde Bildirim kuralları yazan bağlantıya tıklayın.
Açılan pencerede Herhangi bir değişiklik yapıldığında ve E-posta – hemen yazan seçenekleri işaretlemeniz yeterli.
0 yorum:
Yorum Gönder