Blog’uğunuza bir iletişim kutusu ekleyin

Tasarım işlemlerimiz, kullanılabilirliği açısından menülerimiz,arama formumuz  ve blog’uğumuza biraz hareket katmak için bir slayt ilave ettik.

Şimdide daha önce bir çok kez blog ziyaretçilerinizin size ulaşabilmeleri için tanıttığımız  iletişim formlarından birisini test blog’uğumuza ekliyoruz.       
Tabi bir farkla bu uygulamalardan birinin kodlarını aldıktan sonra blog tasarımıza uygun hale getirdiğimiz hareketli açılıp kapanan bir kutu eşliğinde.


Uygulamamızı test edebilmeniz için daha önce oluşturduğumuz test blog’uğumuza ekledik buradan test blog’uğumuzu ziyaret ederek nasıl çalıştığına bakabilirsiniz.

Uygulamayı kendi blog’uğunuza entegre etmek içinse aşağıdaki adımları takip edebilirsiniz.

1.Adım
Uygulamamız bir iletişim formu şeklinde açılacağı için daha önce tanıttığımız her hangi bir online kaynaktan oluşturduğunuz iletişim formunu kullanabilirsiniz. Biz iletişim formumuzu Email Me’de oluşturduğumuz için bu formu kullanmayı düşünüyorum daha önce bu işlemleri anlattığım için de buradan iletişim formunuzu oluşturmak hakkında gerekli bilgileri alabilirsiniz.

İletişim formunuzu oluşturduğunuzu var sayarak gerekli adımlara devam ediyorum.

2.Adım

İletişim formunu oluşturduktan sonra embedet yazan kodu kopyalayarak aşağıda bulunan kodlarda gelmesi gerekn yere yapıştırıyorum kodlar çerisinde diğer bir değişikliği de iletişim formumuzun hemen üzerinde bulunan Twitter butonunda yapmanız gerekiyor kodlarda kırmızı ile renklendirdiğim kullanıcı adı yazan bölüme de Twitter kullanıcı adınızı yazarak tüm kodları kopyalayın.



 3.Adım

Kodu kopyaladıktan sonra sırası ile  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyoruz.
 
Yapacağımız işlemlere başlamadan önce Tam şablon yükle yazan bağlantıyı kullanarak Blog şablonunuzu yedeklemenizde fayda var. Daha sonra yapacağınız her hangi bir hata sonrası şablonunuzu geri yükleyerek yapmış olduğunuz tüm değişiklikleri geri alabilirsiniz. Ayrıca tüm kodların görünebilmesi için  Widget şablonlarını genişlet yazan kutucuğu işaretli olmasına dikkat edin.

Aşağıdaki kodu bulun.

<div id='content-wrapper'>

[ Klavyedeki Ctrl +F tuşuna aynı anda basarak açılan arama formunda Kodu aratarak daha hızlı bir şekilde bulabilirsiniz ]

<div id='content-wrapper'> ifadesini bulduktan sonra hemen altına gelecek şekilde
2. adımda kopyaladığınız kodu yapıştırın .

4.Adım
İletişim formunuzun HTML ve Javasript kolarını blog’uğumuzun kaynak kodlarına ekledikten sonra sıram iletişim formumuzu şekillendirecek CSS kodlarına geliyor.
Bunun içinde klavyemin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan formda ]]></b:skin>  ifadesini aratıyorum. ]]></b:skin>ifadesini bulduktan sonra hemen üstüne gelecek şekilde aşağıdaki CSS kodlarını ekliyorum.

CSS Kodu


Css kodlarını ekledikten sonra kaydedip yaptığım değişikliklere bakıyorum.
Paylaş !

6 yorum:

  1. Bunun devamı yok mu Tayfun? Nasıl yapacağız?

    YanıtlaSil
  2. Çok yakında geliyor... tüm yazıları düzenlerken bu yazıyıda düzenliyeceğim.

    YanıtlaSil
  3. sabırla bekliyorum lütfen acele et.

    YanıtlaSil
  4. Sabrınız için Teşekkürler arkadaşlar yazının ve uygulamanın son hali yukarıda anlayamadığınız her hangi bir konuda soru sorabilirsiniz.

    YanıtlaSil
  5. bişey sorcan kardeş şu interaktif bloga girdim ve güzel kardeş hani o en üsteki blog yazını nasıl düzenledin bana anlatırmısın teşekküğrler

    YanıtlaSil
  6. @admin görseli soruyorsan onu pohotoshop la düzenledim ,düzenlediğim görseli blog başlığı olarak kullanmak için nasıl blog'a yüklediğimi soruyorsan ona da buradan bakabilirsin.

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz