Blogger Sayfa İçi Navigasyon Eklentisi(Navbar)

Arkadaşlar Merhaba; Blogger sayfa içi navigasyon eklentisi ( navbar ) ' sini sizin için anlattım.

Bu Eklentinin Amacı Nedir ?

Kısaca anlatacak olursak; Bloğumuzu gezen ziyaretçilerin, blog içinde hangi kategoride, hangi yazıda olduğunu kolayca görebilmelerini sağlayan basit bir eklenti.
Özellikle fazla kategoriye ve alt menüye sahip bloglarda oldukça faydalı.

Nasıl Kurabilirim ?

• Blogger kontrol paneline giriş yapıyoruz.
• Sol tarafta bulunan Şablon sekmesine tıklıyoruz ve açılan sayfadaki " Html Düzenle " butonuna tıklıyoruz.
• Açılan kod penceresinin boş bir kısmına tıklıyoruz ve " ctrl+f " yardımıyla aşağıdaki kodu buluyoruz.

<b:includable id='main' var='top'>

Hemen üstüne aşağıdaki kodu ekliyoruz.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'><data:blog.title/></a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187; <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Kategorisiz
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; <data:blog.pageName/> Arşivi
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; Tüm Yazılar
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Daha sonra tekrar aşağıdaki kodu (ctrl+f) kombinasyonuyla buluyoruz. 

<div class='blog-posts hfeed'>

Ve hemen altına aşağıdaki kodu ekliyoruz.

<b:include data='posts' name='breadcrumb'/>

Son olarak tekrar aşağıdaki kodu buluyoruz.

]]></b:skin>

Ve hemen üstüne aşağıdaki kodu ekliyoruz.

.breadcrumbs{background-color:#fff; 
border-radius:5px;  
-webkit-border-radius:5px;  
-moz-border-radius:5px;  
border:1px solid #ddd; margin-top:5px; padding:10px; border-bottom:2px solid #ddd;
text-align:left;
font-size:11px}

Bütün işlem bu kadar. Hayırlı Olsun .)

Çalışmaması durumunda ; Yukarıda anlattığım bütün adımları eksiksiz bir biçimde yaptığınızda eklentide sorun oluyorsa; " <div class='blog-posts hfeed'> " kodunun bloğunuzda birden fazla olmasından dolayı. 
Çözümü : " <div class='blog-posts hfeed'> " kodunu html düzenle bölümünden aratın ve yerine " <b:include data='posts' name='breadcrumb'/> " kodunu ekleyin.Sorun çözülecektir.

Devamı >

Blogger iletişim formu oluşturmak ( Jotform )

Merhaba ;

Birçok blogger arkadaşımız iletişim formuyla ilgili sıkıntı yaşamakta.
Bu sıkıntıların başında ise blogger'in kendi formu olan "iletişim formu" adında basit bir form mevcut ancak sıkıntılı olan tarafı kendine ait bir sayfası olmaması.
Yani sadece ana sayfada görünmesi ve yerleşim olmadan farklı sayfaya eklenememesi.
Bu soruna çözüm olarak farklı kodlar çıkarıldı , bu kodlar sayesinde iletişim formu farklı sayfalara aktarıldı ancak bu kodlarla oluşturulan formlarda basit ve tasarım açısından bloğa katkı sağlamayan formlar oldu.
Ancak birçok zahmetle ve incelikle tasarımlarını özelleştiren blogger'lar için bu durum biraz üzücü.
Bu soruna kökten çözüm getiren ve önceki bloğumdada sık sık bahsettiğim ücretsiz bir servis olan Jotform adlı servisi sizlere tanıtmak istiyorum.
Jotform , ücretsiz bir şekilde profesyonel olarak form oluşturmamıza yardımcı olan bir servis.
Bu servisi kullanarak basit bir şekilde , profesyonel olarak form oluşturmamız mümkün.
İsterseniz kendi zevkinize göre arka planını , renklerini vs. ayarlayabilirsiniz , isterseniz de hazır şablonlar üzerinde zevkinize göre düzenleme yapabilirsiniz.

Fazla uzatmadan bu servisin kullanımını anlatayım.

• Öncelikle bu adresi ziyaret ediyoruz ve sağ üst tarafta bulunan " üye ol " butonuna tıklıyarak 1dk içinde üyeliğimizi tamamlıyoruz ve girişimizi yapıyoruz.
• Daha sonra sol üst tarafta bulunan "form oluştur" butonuna tıklıyoruz ve karşımıza gelen seçeneklerden , kendimiz sıfırdan tasarlayacaksak baştaki , hazır bir form kullanacaksak sonrakini seçiyoruz ardından formumuzu oluşturmaya başlıyoruz.

Ben hazır bir şablon kullanarak kendi zevkime göre düzenlemeye karar verdim.

Bundan sonrası sizin hayal gücünüze ve zevklerinize bağlı bir durum , dediğim gibi isteyen kendi sıfırdan yapsın , isteyen hazır şablonları kendi zevkine göre düzenlesin.
Zaten kullanımı oldukça basit ve türkçe.
Tasarımı bittikten sonraki aşamaya geçiyorum.

Yukarıda bulunan butonlardan "teşekkür ederiz" butonuna tıklıyoruz ve formu gönderdikten sonra görüntülenecek yazıyı belirliyoruz.

Daha sonra yine yukarıda bulunan butonlardan "e-postalar"a tıklıyoruz ve "yeni e-posta"  butonuna tıklıyoruz ve formumuz doldurulduğunda hangi hangi mail adresine haber gelmesini istiyorsak yazıyoruz ve kaydedip çıkıyoruz.
Formumuz artık hazır.
Sıra geldi bloğumuza veya websitemize nasıl ekleyeceğimize.
Üstte bulunan butonlardan "formu ekle" butonuna tıklıyoruz ve aşağıdaki seçeneklerden " iframe " seçiyoruz.
Daha sonra bize verilen kodu kopyalıyoruz ve oluşturduğumuz iletişim sayfasının html bölümüne yapıştırıyoruz ardından kaydedip çıkıyoruz.
Form doldurulduğu anda teşekkür sayfası görünecektir ve detayları belirlediğimiz mail adresine yollanacaktır.
Bütün işlem bu kadar.Hayırlı olsun :)

Jotform kullanarak hazırladığım ve kendi bloğumda kullandığım iletişim formu ;

" Anahtar Kelimeler : blogger iletişim formu, blogger iletişim formu oluşturmak, jotform, jotform nedir, blogger özel iletişim formu oluşturmak, blogger iletişim formu oluşturma kodu, blogger iletişim formu eklentisi, blogger form oluşturmak, blogger iletişim formunu düzenlemek "

Devamı >