Blogger Arama Kutusu Çalışmıyorsa Çözüm Burada

Blogger arama kutusu ile sitenizdeki içerikleri arayabilirsiniz ancak Blogger, arama kutusunu kaliteli bir arama için tasarlamamış. İstediğiniz sonucu bulabilmek için arama yaptığınız kelimelerin yazı içerisinde birebir aynısının olması gerekiyor büyük küçük harf fark etmez ancak diğer her şey çok önemlidir. Aradığınızın tam olarak ne olduğunu bilmezseniz (Nasıl yazıldığını) muhtemelen istediğinizi kolayca bulamayacaksınız. Örneklerle açıklayalım:

Elimizde başlığı "Alinin Günlüğü" içeriği ise "Ali sabah kalktı kahvaltı yaptı ve okula gitti dersler bitince oyun oynamadan eve geldi." olsun.

Örnek 1

Alinin, alinin, Alinin Günlüğü, alinin günlüğü, okula, dersler, oyun, eve, geldi gibi aramalar yaparsanız sitenizdeki yazıyı bulabileceksiniz çünkü aradığınız kelimelerin başlıkta veya yazı içerisinde birebir aynısı bulunmakta büyük küçük harf önemli değil.

Alinin Günlüğü

Ali sabah kalktı kahvaltı yaptı ve okula gitti dersler bitince oyun oynamadan eve geldi.

Örnek 2

Ancak yapacağınız aramalar Günlük, Gunlugu, okul, ders, ev gibi kelimeler olursa başlık yada yazı içerisinde birebir aynısı olmadığı için arama sonuçlarında çıkmayacaktır.

Şunu söyleyebilirsiniz harf farklılıkları olduğunda çıkmamasını anladık günlük kelimesinde yumuşama olunca k harfi değişerek günlüğü oluyor farklı bir kelime gibi oluyor ancak okul kelimesi okula kelimesinin içinde var bulması gerekmez mi? okul ≠ okula olduğu için çıkmasını istediğiniz yazı sonuçlarda maalesef yine görünmeyecektir.

Alinin Günlüğü

Ali sabah kalktı kahvaltı yaptı ve okula gitti dersler bitince oyun oynamadan eve geldi.

Önemli Not: Blogger ile oluşturduğunuz bir bloğunuz var ve yukarıda anlatılanlara göre aradığınız başlıkta veya içerikte olmasına rağmen her seferinde bulamıyorsanız o zaman arama formundaki kodlamalarda bir hata olduğu anlamına gelir yapılan başlıca hatalar formdaki action değerine tanımlanan değerin hatalı olmasıdır.

action="/search" yazılması gereken yere action="search" yazdığınızda bile aramalarınız sonuçsuz kalacaktır sebebi ise ana sayfada bulunmadığınız zaman / işareti olmadığı için aksiyon alınan url adresi bulunduğunuz sayfanın sonuna eklenen search kelimesi ile yapılmaya çalışılacak ancak aramanın yapılabilmesi için "https://vericanavari.blogspot.com/search?q=Aranan" da olduğu gibi kök dizine gelmelidir. "https://vericanavari.blogspot.com/2019/04/internet-download-manager-v632-build-11.html/search?q=Aranan" şeklinde olursa sonuç alamazsınız.

Ancak ana sayfada olduğunuzda "/search?q=Aranan" sitenin kök dizinine geldiğinden çalışacaktır sizde kodunuzun çalıştığını düşünerek bu hatayı belkide fark etmeyeceksiniz. Ancak sitenize gelen ziyaretçilerin genelde yan sayfalara geldiği düşünülürse sitenizde arayacakları hiçbir şeyi bulamayacakları anlamına gelir buda sitenizin hemen terk edilmesi hitinizin düşmesi demektir.

Aşağıda çalışan örnek bir arama kutusu kodu bulunmaktadır ihtiyacınız varsa kopyalayabilirsiniz.

<form action="/search">
<input aria-label="Search" name="q" placeholder="Aranacak kelime" type="text">
<button type="submit">Ara</button>
</form>

Blogger'a Yazar Eklemek Nasıl Yapılır?

Blogger kullanarak hazırladığınız bloğunuzda başkalarını yazar olarak yetkilendirebilirsiniz böylece yazar olarak görevlendirilmiş kişiler bloğunuzda yazı paylaşabilirler.

Blogger'da Yazarların Ne Kadar Yetkisi Olur?

Yazar olarak görevlendirdiğiniz kişilere Yazar ve Yönetici olmak üzere iki tip yetki verebilirsiniz. Yazar yetkisi verilen kişi bloğunuzda yazı yazabilir ve sadece kendi yazdığı yazıları düzenleyebilir. Başkasına ait yorum veya yazı denetleyemez, bloğunuzun tasarımını ve ayarlarını değiştiremez. Ancak eklediğiniz yazarı Yönetici olarak yetkilendirirseniz bloğun sahibi gibi tüm yetkileri açılır yazıları ve yorumları denetleyebilir istediği yazıyı silip düzenleyebilir bloğunuzun ayarlarını ve tasarımını değiştirebilir. Hatta diğer kullanıcıların yetkilerini değiştirebileceği için site sahibinin yetkisini değiştirerek sitenin yeni sahibi olabilir bu nedenle gerçekten site sahibi olmayan kişiler Yönetici yetkisi ile görevlendirilmemelidir.

Blogger bloğunuza yazar eklemek için Ayarlar > Temel adımlarını takip ederek İzinler bölümündeki Blog Yazarları kısmında bulunan + Yazar ekle linki ile yeni yazar ekleyebilirsiniz. Eklediğiniz yazar varsayılan olarak sadece yazar yetkisine sahiptir daha sonra yetki türünü yönetici olarak değiştirebilirsiniz yetki türünü hiç değiştirmezseniz yazar yetkisine sahip olarak kalır ve sadece kendi yazılarında değişiklik yapabilir kullanıcı paneli aşağıdaki gibi olur.

Blogger'a Son Konular Gadget'i Ekleme Nasıl Yapılır?

Bloggerin Gadget'leri arasında son konular gadget'i bulunmamaktadır ancak blogunuzda yayınlanan son konuların listelendiği bir Gadget'e ihtiyacınız varsa bunu yapmanın kolay bir yolu var.

Blogger > Yerleşim adımlarını takip ederek bloğunuza Gadgetlerin eklendiği sayfayı açın son konuların olmasını istediğiniz alandaki Gadget Ekle butonuna basarak İçerik Takibi Getget'ini ekleyeceğiz.

İçerik Takibi URL’si olarak blogger konularının RSS olarak iznebildiği adres olan https://site_adresi.blogspot.com/feeds/posts/default u ekliyoruz ve Devam butonuna basarak oluşturmak üzere olduğumuz Gadget'e bir başlık, Gadget'te gösterilecek konu sayısı, öğe tarihleri, öğe yazarı ve bağlantının aynı sayfada yada yeni bir sayfada açılması gibi özellikleri seçerek kaydet butonuna basarak ekliyoruz.

Sonuç olarak yayınlanan konular RSS ile takip edilecek ve her yeni konu yayınlandığında bu listede yerini alacak. Benzer şekilde Son Yorumlar Gadget'ini hazırladığımız makaleyi de inceleyebilirsiniz.

Blogger'a Son Yorumlar Gadget'i Ekleme Nasıl Yapılır?

Bloggerin Gadget'leri arasında son yorumlar Gadget'i bulunmamaktadır ancak blogunuzda yapılan son yorumların listelendiği bir Gadget'e ihtiyacınız varsa bunu yapmanın kolay bir yolu var.

Blogger > Yerleşim adımlarını takip ederek bloğunuza Gadgetlerin eklendiği sayfayı açın son yorumların olmasını istediğiniz alana Gadget Ekle butonuna basarak İçerik Takibi Getget'ini ekleyeceğiz.

İçerik Takibi URL’si olarak bloggerin yorumlarının RSS olarak iznebildiği adres olan https://site_adresi.blogspot.com/feeds/comments/default u ekliyoruz ve Devam butonuna basarak oluşturmak üzere olduğumuz Gadget'e bir başlık, Gadget'te gösterilecek yorum sayısı, öğe tarihleri, öğe yazarı ve bağlantının aynı sayfada yada yeni bir sayfada açılması gibi özellikleri seçerek kaydet butonuna basarak ekliyoruz.

Sonuç olarak yapılan yorumlar RSS ile takip edilecek ve her yeni yorum yapıldığında bu listede yerini alacak. Benzer şekilde Son Konular Gadget'ini hazırladığımız makaleyi de inceleyebilirsiniz.

Geliştirici araçlarını kullanarak CSS Tasarımı Yapmak

Resimde gördüğünüz sayfada düm düz tasarım yapılmıştır CSS kullanarak herhangi bir süsleme yapılmamıştır şuan çok kötü görünüyor ancak yapacağımız basit dokunuşlar ile göze hoş gelecek şekle dönüşecek.

Bu anlatımda kullanacağım tarayıcı Google Chrome olacak tasarım yapacağımız internet sayfasını açalım ve F12 butonuna basarak geliştirici araçlarını açalım.

Değiştirmek istediğimiz alanı seçelim yada tam üzerine sağ tıklayarak incele seçeneğini seçelim resimde gösterdiğim alanda seçili alanın kodları görüntülenecek. Görüntülenen kodlara baktığımızda Başlığa şekil verebilmek için önceden atanmış class sınıfını görüyorsunuz <h1 class="title"> olarak yazılmış Css ile buraya emir verebilmek için h1.title {  } kodunu kullanacağız.

Tam buraya önemli bir not açalım HTML etiketleri örnekteki gibi direk yazılır h1, h2, div gibi class ifadelerinin başına ise . yazılır .title, .header gibi yukarıdaki örnekte yok ancak id="ornek" gibi bir ifadeye sahip olsaydı id deki ornek değerinden de tasarım yapabilirdik bunun kullanılışı ise #ornek olacaktı.

Ben başlığa bir renk vereceğim sevdiğim bir renk olan #00ACED kodunu kullanacağım bunun için ilgili alana emir veren kodun içine color: #00ACED; ekliyorum her emirden sonra ; kullanmayı unutmayın yoksa kodunuz hata verir. h1.title { color: #00ACED; }

Hemen altındaki Blog Tanımı ifadesinin rengini değiştirmek istiyorum yine aynı şekilde sağ tık incele seçeneğini seçerek kodları inceliyorum bu sefer ilgili bölüme bir class eklenmediğini görüyorum <span>Blog Tanımı</span> burayı iki şekilde değiştirebiliriz. Birincisi <span class="Btanim">Blog Tanımı</span> şeklinde bir class atayabiliriz yada hiçbir atama yapmadan div.descriptionwrapper p.description span { } şeklinde hiyerarşik olarak en dıştan içe doğru etiketleri belirterek değişiklik yapılacak yeri belirttik ve rengininde #7FFFD4 olmasını istiyorum div.descriptionwrapper p.description span { color: #7FFFD4; }

Hemen alttaki tarih kısmı çok büyük onun küçülmesini istiyorum kodları incelediğimde yine class atanmadığını görüyorum ancak class içermeyen yerlere nasıl emir vereceğimizi az önce öğrendik aynı şekilde yapacağım div.date-outer h2.date-header span { font-size: 15px } kodu ile istediğim şekle dönüşmesini sağlıyorum.

Konu başlığının yazı büyüklüğü iyi rengini de değiştirmiyorum şimdi yazı alanının olduğu yeri belirginleştirmek için çerçeve içine alıp köşeleri yuvarlayıp arka plan rengi atayacağım. İnceleme işlemi yaparak hangi kodlarla ilgili bölgeye hitap edeceğimizi bulalım. Fareyi sayfa kodları üzerinde gezdirdiğinizde sayfadaki yeri solda site üzerinde canlı olarak görünüyor istediğim yeri böylece bulmuş oldum ayrıca bulduğum yerin CSS ile nasıl ifade edildiğide sol tarafta yazıyor div.col-md-8 bu alana div.col-md-8 { border: 1px solid #000000; border-radius: 10px; background-color: #dedede; } kodları ile istediğim değişiklik emrini gönderebiliyorum.

Şimdi hazırladığımız tüm css kodlarının kalıcı olabilmesi için #### Css kodları buraya yazılacak #### diye belittiğimiz alana yazılacak

h1.title { color: #00ACED; }
div.descriptionwrapper p.description span { color: #7FFFD4; }
div.date-outer h2.date-header span { font-size: 15px }
div.col-md-8 bu alana div.col-md-8 { border: 1px solid #000000; border-radius: 10px; background-color: #dedede; }

Yaptığımız değişiklikleri kaydedince sayfa aşağıdaki gibi görünecek siz her yaptığınız adımı kaydederek denersiniz anlatım kopukluğu olmasın diye ben hepsini tek seferde kaydettim.

Sayfa tasarımı bu şekilde adım adım ilerliyor bu işte uzmanlaştıkça pratikleşeceksiniz daha hızlı temalar oluşturabileceksiniz bu olayı öğrendiğinizi düşünerek anlatımı burada bırakıyorum size kolay gelsin.

Sıfırdan Blogger Teması Nasıl Yapılır?

İlk söylemek istediğim sıfırdan blogger teması yapmanın çok zor olmadığıdır. Bu durum kişiden kişiye değişebilir çünkü bilinmesi gereken diller vardır bunlar: HTML, CSS belki birazda JavaScript'tir bu dilleri de A dan Z ye on numara bilmeniz gerekmez yapmak istediklerinizi google da arayarak anlık olarak öğrenip çoğu yerde uygulayabilirsiniz.

Sıfırdan Blogger Teması yaparken işimizi biraz daha kolaylaştırmak için Bootstrap kütüphanesini kullanacağız Bootstrap kütüphanesi daha hızlı ve kolay sayfa tasarlamamızı sağlayacak. CSS kodlamaları Bootstrap kütüphanesinde önceden hazırlanmıştır ihtiyacımız olan küçük dokunuşlar yaparak bizim istediğimiz şekle çevirmek olacak. Ayrıca Bootstrap kullanarak yaptığımız blogger temaları responsive olacağı için aynı zamanda mobil uyumlu tema hazırlamış bir taşla iki kuş vurmuş olacağız.

Kullanacağımız diğer bir kütüphane de Font Awesome olacak içerisinde bulunan ikonlar sayesinde ihtiyacınız olan her ikon neredeyse elinizin altında neredeyse diyorum çünkü arada sırada ihtiyacınızın tam karşılığını bulamayabilirsiniz ancak %95 ini bulacaksınız.

Yapacağımız tema için işlem adımlarını atlamadan takip ederseniz SEO ayarları da doğru yapılmış olacak ve Google sitenizi doğru indexleyecek Google Seach Console'dan baktığınızda içeriğinizin yönlendirmeli sayfa gibi çeşitli hatalar nedeniyle dizine eklenmeme sorunlarını yaşamayacaksınız.

Yapılacak işlem adımları şu şekilde olacak:

1- Temayı kafanızda canlandırın renklerin şuan bir önemi yok her şey siyah beyaz olsun karar vermeniz gereken neyin nerede olacağı. Başlık, Navbar, widgetler, yazı alanı vs. hangilerini kullanacağınıza ve bunları nereye koyacağınıza karar verin.

2- Elinize bir kağıt kalem alın ve aklınızdaki şekli dikdörtgenler kullanarak yukarıdan aşağıya doğru örnekteki gibi çizin.

3- Şimdi bu şekli bootstrap kullanarak iki dakikada hazırlayacağız detaylı bilgi için google'da "bootstrap grid" olarak arama yapabilir detaylı bilgi sahibi olabilirsiniz bootstrap kullanmayı bilmiyorsanız öncesinde biraz pratik yapmanız işinizi çok kolaylaştırır. Tasarıma başlamadan önce aşağıdaki şablon kodumuzu kopyalayın ve index.html adında bir sayfa hazırlayıp içine yapıştırın. Bu haliyle Blogger editörüne yapıştırırsanız içerisinde <b:section id='SectionId'/> içermediği için hata verecektir. Tasarımı kontrol etmek için index.html i tarayıcınızda açabilirsiniz.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='tr-TR'>
  <head>
    <!-- Required meta tags -->
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'/>
    <!-- Bootstrap CSS -->
    <link crossorigin='anonymous' href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' rel='stylesheet'/>
    <!-- FontAwesome CSS -->
 <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' rel='stylesheet'/>
 <!-- Title alani -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <title><data:blog.pageTitle/></title>
  <b:else/>
  <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
   <title><data:blog.pageName/> - <data:blog.title/></title>
  </b:if>
 </b:if>
 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <title>Sayfa bulunamadı! - <data:blog.title/></title>
 </b:if>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='Sadece, anasayfada, gösterilecek, olan, Anahtar, kelimeleri, buraya, yazın, arama açıklamaları, otomatik, oluşturulacak' name='keywords'/>
  <meta expr:content='data:blog.metaDescription' name='description'/>
 <b:else/>
  <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
  <meta expr:content='data:blog.metaDescription' name='description'/>
 </b:if>

 <!-- Tema sitilleri -->
 <b:skin>


         #### Css kodları buraya yazılacak ####


 </b:skin>
  </head>
  <body>


  
  #### Kağıda yaptığınız çizimi bu alanda bootstrap grid ile hazırlayacağız. ####
  
  
  
      <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script crossorigin='anonymous' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' src='https://code.jquery.com/jquery-3.3.1.slim.min.js'/>
    <script crossorigin='anonymous' integrity='sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js'/>
    <script crossorigin='anonymous' integrity='sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k' src='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js'/>
  </body>
</html>

Benim çizimime göre bootstrap grid kullanarak hazırladığım kodlar şu şekilde aşağıdaki kodları <body> etiketinden sonrasına ekliyoruz.

 <div class="container">
  <div class="row">
   <div class="col-md-12">Navbar</div>
  </div>
  <div class="row">
   <div class="col-md-8">
    <div>Yazı Alanı</div>
    <div>Yorum Alanı</div>
   </div>
   <div class="col-md-4">Yan Widget</div>
  </div>
  <div class="row">
   <div class="col-md-6">Alt Widget1</div>
   <div class="col-md-6">Alt Widget2</div>
  </div>
 </div>

4- Şimdi sıra içine widgetleri ekleyeceğimiz bölgeleri (<b:section id='SectionId'/>) belirlemeye geldi bölgeleri belirledikten sonra widgetleri otomatik olarak ekleyeceğiz sadece yazı alanını elle ekleyeceğiz çünkü widget olarak listelenmiyor böylesi sizin için daha kolay olacak. Benim tasarımıma göre Navbar için 1 section, yan widgetler için 1 section, tabanda iki alan var buralar için 2 section gerekecek toplamda 4 section alanı oluşturacağım tabi birde Main dediğimiz yazı alanı oluşturulacak.

Main Alanı için Kullanacağımız Kodumuz:

<b:section class='content' id='content' name='Main' showaddelement='yes'>
 <b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'/>
</b:section>

Diğer Widget Alanları için Kullanacağımız Kodumuz:

<b:section id='BolgeAdi' class='BolgeAdi' maxwidgets="1" showaddelement="yes"></b:section>

Maxwidgets: Eklenebilecek maksimum widget sayısı anlamına gelir ihtiyacınıza göre değiştirin.

Showaddelement: Kolay widget ekleyebilmek için ekle butonunu aktif ve pasif yapar yes eklemeye izin vermeyi no engellemeyi sağlar.

benim ihtiyacıma göre oluşturduğum kod şu şekilde:

 <div class="container">
  <div class="row">
   <div class="col-md-12"><b:section id='Navbar' class='Navbar' maxwidgets="1" showaddelement="yes"></b:section></div>
  </div>
  <div class="row">
   <div class="col-md-8">
    <b:section class='content' id='content' name='Main' showaddelement='yes'>
     <b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'/>
    </b:section>
   </div>
   <div class="col-md-4"><b:section id='YanWidget' class='YanWidget' maxwidgets="10" showaddelement="yes"></b:section></div>
  </div>
  <div class="row">
   <div class="col-md-6"><b:section id='AltWidget1' class='AltWidget1' maxwidgets="5" showaddelement="yes"></b:section></div>
   <div class="col-md-6"><b:section id='AltWidget2' class='AltWidget2' maxwidgets="5" showaddelement="yes"></b:section></div>
  </div>
 </div>

5- Bu adımı da tamamladıktan sonra Blogger Anasayfadan Yerleşim sekmesine geçin ve ihtiyacınız olan widgetleri istediğiniz bölgeye ekleyin. Burada ufak bir uyarıda bulunacağım tasarımda bootstrap kütüphanesi kullandığımız için tüm bölgeler alt alta görünüyor bunun sebebi CSS dosyalarının bu sayfada çekilmemesidir endişe edecek bir şey yok.

6- Son olarak CSS ile tasarımımızı göze hoş gelecek şekle dönüştüreceğiz burası en zevkli kısımdır her şey yerli yerine oturmuş durumdadır. Tasarım işlemini yaparken Bootstrap hazır css kodlarını kullanabilirsiniz buradaki linke tıklayın ve soldaki menüden sitenizde kullanabileceğiniz örnekleri inceleyin beğendiğiniz örneğin class sınıflarını kopyalayıp bloğunuzdaki ilgili class'a ekleyin hepsi bu kadar CSS hakkında hiç bilginiz yoksa biraz zorlanabilirsiniz öncesinde biraz CSS çalışmanız faydalı olacaktır.
Bu adımın nasıl yapıldığını anlatım akışını bozmamak için yeni bir konu olarak hazırladık Geliştirici araçlarını kullanarak CSS Tasarımı Yapmak başlıklı makalemizi okuyabilirsiniz.

7- Şimdi sayfanıza resim ve ikonlar ekleyerek biraz daha göze hitap edecek şekle çevirebilirsiniz yazımızın başında bahsettiğimiz Font Awesome kullanımı için diğer yazımızı inceleyebilirsiniz. Şuan sayfanızda hiçbir efekt bulunmamaktadır kısacası sayfanız dümdüz bir sayfa oldu biraz jan jan hareket istiyorsanız JavaScript ile hareketli şeyler yapabilirsiniz jqery komutlarını incelemenizi tavsiye ederim.

8- Blogger yönetim panelindeki yan menüden Tema sekmesine gelin ve Mobil Temayı devre dışı bırakın temamızı bootstrap ile hazırladığımız için temanızın mobil görünümü bulunmaktadır.

9- Blogger yönetim panelindeki yan menüden Ayarlar > Temel adımlarını takip ederek Başlık, Açıklama ve gizlilik ayarlarını düzenleyin bu ayar sitenizin Google arama sonuçlarında görünmenize ve yükselmenize yardımcı olacaktır.

10- Blogger yönetim panelindeki yan menüden Ayarlar > Arama Tercihleri > Meta Etiketler > Açıklama kısmını aktif ederek anasayfa için oluşturacağınız açıklamayı bu alana yazın.

Uyarı: Temanız hata verdiğinde yada tüm tasarım işlemi bittikten sonra aşağıdaki kodları aratıp bulun ve silin Blogger bu kodları otomatik olarak oluşturuyor ve sayfanın hata vermesine neden oluyor. Bu kodları silmezseniz siteniz kod standartlarına uymaz Validator test araçlarında sorgulama yaptığınızda hatalar görünecektir ancak bu sitenizin sorunsuz çalışmayacağı anlamına gelmez. Tabi Blogger kendini günceller bu hataları kendisi düzeltirse bizde mutlu oluruz orası ayrı mesele.

 xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'

<![CDATA[

]]>

Örnek Çalışma Şablonu Benzer şablon oluşturacaklar için widget ekleme alanları oluşturulmuş ancak widgetler eklenmemiştir widget ekleme aşamasından sonraki adımları aynen uygulamanız gerekmektedir.

İndir (1.46KB)

Robots.txt Nasıl Oluşturulur?

Öncelikle yeni bir metin belgesi oluşturun ve adını robots.txt olarak değiştirin şimdi içine yazacağımız komutları açıklayacağız.

Önemli Not: 

• Büyük küçük harf bile etkilidir elle yazıyorsanız dikkatli olun komutları hatalı yazmanız daha sonradan düzeltilebilir ancak hatalı indexlenmiş sayfalar çok geç düzelmektedir.
• robots.txt dosyası sitenin kök dizininde olmalıdır "http://siteadresi.com/robots.txt"
• * işareti joker karakterdir değişkenleri belirtmek için kullanılır. Pek çok yerde kullanacaksınız.

User-agent izin verilecek yada engellenecek botların isminin belirtileceği yerdir.

Şimdi örneklendirme yapalım.

User-agent: Googlebot ifadesiyle Google botlarını etkileyecek komutlar verileceği anlatılıyor.

User-agent: DeepCrawl ifadesiyle DeepCrawl botlarını etkileyecek komutlar verileceği anlatılıyor.

User-agent: Googlebot

User-agent: DeepCrawl ifadesiyle hem Googlebot hemde DeepCrawl botları için komutlar verileceği anlatılıyor birden fazla bot eklemek istiyorsanız alt alta eklemeniz gerekiyor virgülle falan ayırmayın.

User-agent: * ifadesiyle tüm botları etkileyecek komutlar verileceği anlatılıyor. * bir değişkendir ve yerine her şey gelebilir.

Allow izin verilecek dizinleri yada sayfaları belirtmek için kullanılır.

Şimdi örneklendirme yapalım.

Allow: / ifadesiyle sitenizin kök dizinine izin vermiş oluyorsunuz botlar tüm siteyi dolaşabilir.

Allow: /dizin1/ ifadesiyle dizin1 klasörü ve sonrasındaki alt klasörlere izin vermiş oluyorsunuz.

Allow: /dizin1/ornek.html ifadesiyle sadece ornek.html sayfasına izin vermiş oluyorsunuz dizin1 deki diğer dosyalara izin verilmez.

Disallow taramaya izin verilmeyen dizinleri veya sayfaları belirtmek için kullanılır bu komutun olduğu dizinler taranmamalıdır ancak hiç taranmayacağı anlamına gelmez google aramalarında gözükmemesi için noindex etiketi kullanmalısınız.

Şimdi örneklendirme yapalım.

Disallow: /dizin1/ ifadesiyle dizin1 ve sonrasındaki alt klasörlerin tamamı yasaklanmış olur

Disallow: /ornek.html ifadesi ile sadece ornek.html sayfası yasaklanmış olur.

Simdi yasaklanmış bir dizininde sadece bir sayfaya nasıl izin verileceğine bakalım

Disallow: /dizin1/ ifadesiyle dizin1 i yasakladik hemen ardından

Allow: /dizin1/ornek.html ifadesi ile dizin1 içindeki ornek.html sayfasına izin vermiş olduk.

Şimdi de Blogger için bir engelleme örneği yapalım. Blogger da mobil kullanım engellense bile mobil kullanıldığı zaman her sayfanın sonuna ?m=1 eklenmektedir. Botlarda bu sayfaları url adresi değiştiği için aynı içeriğe sahip kopya sayfa olarak gösterecektir kısacası birebir aynı içeriğe sahip sayfalar varsa bunlar engellenmelidir ufak tefek farklar varsa engellenmeyebilir. Sonunda m=1 olan tüm sayfaları Disallow: /*m=1 ifadesi ile engelleyebiliriz / ve m=1 ifadesi arasındaki * sitenin kök dizini ile her sayfanın sonuna eklenen m=1 arasında kalan bölümü gösterir * karakterini bu örnekteki gibi kullanarak her ihtiyaca göre robots.txt oluşturabilirsiniz.

Unutmadan robots.txt in en sonuna varsa site haritası eklemenizde fayda var böylece sitenize gelen tüm botlara ziyaret etmesi gereken konu başlıklarını da göstermiş olursunuz.

Sitemap: https://siteadresi.com/sitemap.xml

Son olarak bloğumda kullandığım robots.txt örneğini paylaşmak istiyorum.

User-agent: Mediapartners-Google

User-agent: *

Allow: /

Disallow: /*m=1

Sitemap: https://vericanavari.blogspot.com/sitemap.xml

Bundan sonrası artık biraz düşünerek gerçekleşecek önce ihtiyacınızı belirleyeceksiniz daha sonra robotların erişmesi ve erişmemesi gereken yerleri belirleyip işe girişeceksiniz. Etkili bir robots.txt oluşturmak için mutlaka Google Search Console kullanmalısınız eğer sitenizde dizine eklenme ile ilgili bir sıkıntı yaşarsanız kapsam sorunları içerisinde uyarı görürsünüz hatanın ne olduğunu bildikten sonra çözmek basittir. Örneğin Blogger in orjinal robots.txt dosyasında etiketler engelli gelmektedir ancak sayfa içi linklemelerden dolayı etiketlerin ana sayfaları diğer yazılardan daha değerli görünmekte ve google aramalarda daha üst sıralarda çıkmaktadır ancak Blogger etiketleri engellediği için etiketler aramalarda açıklamasız olarak görünmektedir. Eğer aramalarda yasaklamamıza rağmen görünüyorsa düzgün görünmesi ziyaretçilerin ilgisini çekmek için daha iyidir bu nedenle etiketlerdeki engellemeyi robots.txt imden kaldırdım.
Yine Google Search Colsole'de "Kullanıcı tarafından seçilen standart sayfa olmadan kopya" başlığının altında hepsinin sonu ?m=1 ile biten mevcut sayfalarımın Blogger tarafından Mobil görünüm için otomatik oluşturulan farklı linkler olduğunu gördüm botlar farklı bir sayfaymış gibi aynı içeriği tekrar kontrol ediyor boş yere siteyi ikinci defa dolaşmış oluyor ve sonucunda bu hatayı tespit edebiliyor bu nedenle hanemize eksi puan verip vermediğini anlayamadım bunun için uzun denemeler yapmak gerekiyor ancak bunun tespiti için uğraşan biri değerlendirmesini de yapar diye düşünüyorum bu nedenle sadece adresin değiştiği içeriğin aynı kaldığı sayfaları engellemeniz faydanıza olacaktır.

Adresin değiştiği sitenin aynı kaldığı linklere bir örnek daha buldum: Yorum Linkleri mevcut sayfanızın sonuna eklenen birkaç fazlalık ile yoruma odaklanan link oluşturulmuş ancak içerisinde # kullanmadıkları için botlar bunu sayfa içinde ilgili bölüme gitme linki yerine yeni bir link olarak düşünüyor. Search Console'da yönlendirmeli sayfa uyarısı ile hariç bırakılıyor bu sayfa hariç bırakıldığı için düzenleme yapmasanız da olur ancak her şey doğru olsun botlar yok yere yorulmasın diyorsanız "https://vericanavari.blogspot.com/2019/03/idm-is-corrupt-hatas-nedir-nasl-cozulur.html?showComment=1553216093684" tarzındaki linkleri engellemek için Disallow: /*showComment* komut satırını robots.txt içinde kullanabilirsiniz.

Dropbox Direk Link Üretici

Dropbox Direk link üretici Dropbox linklerini yönlendirme olmadan içeriğe ulaşabileceğiniz şekle çevirir. Kalıcı olarak Dropbox'taki dosyalarınıza doğrudan bağlantı oluşturun böylece onları kolayca paylaşabilir, forumlarda veya web sitelerinde içerik olarak kullanabilirsiniz. Dilerseniz Dropbox'u Blogger/Blogspot daki bloğunuz için host olarak kullanın ***.js ve ***.css gibi dosyalarınızı yükleyin seçim size kalmış.

Yapmanız gereken aşağıdaki forma Dropbox'ta bulunan dosyanızın paylaşım linkini yapıştırmak ve Direk Link Oluştur butonuna basmak daha sonra çevrilen linki alıp dilediğiniz gibi kullanabilirsiniz. Birden fazla link çevirmeyi destekler ancak eklediğiniz link kadar direk link oluştur butonuna tıklayınız.

Blogger'da CSS ile Resimleri Yeniden Boyutlandırma

Blogger'da makale yazarken kullandığınız resimlerin genişlik ve yükseklik değerleri sabit olduğunda yaptığımız tasarımlar günümüzde kullanılan tüm cihazlarda istediğimiz gibi görünmez. Mobil cihazların yaygınlaşması ile birlikte hem masaüstü hemde mobil cihazlarda düzgün görüntülenebilen responsive tasarımlar yaygınlaştı. Hazırladığımız CSS kodu ile blogunuzun yazı alanı içindeki resimleri otomatik olarak yeniden boyutlanabilir duruma getireceksiniz.

Kullandığımız kodun açıklaması şöyle: genişlik ve yükseklik otomatik, yani orijinal resmin boyutlarını kullan anlamına geliyor ancak kullandığımız max-height ve max-width değerleri ile maximum genişlik ve yükseklik değerlerini sınırlandırıyoruz. Genişlik yazı alanını aşamayacak yükseklik ise 300px'i aşamayacak. Kodları ihtiyacınıza göre değiştirebilirsiniz.

.post-body img {
 height:auto;
 max-height:300px;
 width: auto;
 max-width:100%;
 clear: both;
}

Mobil Tarayıcı Rengini Değiştirme Yöntemi

Mobil tasarımlar günümüzde site tasarımı yaparken ihmal edilmeyen bir özellik olarak karşımıza çıkıyor bu kadar önemli hale gelmesinin tek nedeni herkesin elinde bir akıllı telefon bulunması ve kullanım oranının çok yüksek olmasıdır. Bu durum o kadar ciddi bir hal aldı ki akıllı telefonlar yüzünden bilgisayar kullanımı önemli oranda azaldı. Biz site tasarımı yapan kişiler olarak sitelerimizin kullanıcıları etkilemesi için mobil tasarımlar ile ilgili olabildiğince iyi iş çıkartmak zorundayız. Bu makalemizde Mobil tarayıcı rengi değiştirmeyi gösteriyoruz.

Yapmamız gereken birkaç meta tagını <head></head> etiketleri arasına yazmak. Örnek kodlarda ki renkleri değiştirerek sitenize ekleyebilirsiniz.

<!-- Chrome, Firefox OS ve Opera -->
<meta content='#2E3D44' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#2E3D44' name='msapplication-navbutton-color'/>
<!-- iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='Black' name='apple-mobile-web-app-status-bar-style'/>

İOS (Iphone) telefonlar için renk ismi kullanmak zorundayız aşağıda bazı renkler ve isimleri verilmiştir.

Renk İsmi	HEX Kodu	Rengi
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
LightSlateGray	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuse	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370DB
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru	#CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
PaleVioletRed	#DB7093
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
DarkOrange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

Harici CSS ve JS dosyalarını Blogger'a Eklemek

Blogger ya da Blogspot kullanıcılarının sorunlarından biri harici CSS ve JS dosyaları kullanamamaktır aslında kullanmaya Blogger tarafından izin verilir ancak yönlendirme olmadan bu dosyalara ulaşabileceğimiz ücretsiz hizmetler neredeyse bulunmamaktadır. Neyseki Google Drive'ın Direct Link Creator eklentisiyle birlikte harici CSS ve JS dosyalarımızı Blogger'a ekleyebilirsiniz. CSS ve JS dosyaları değişken dosyalar olmadığı için internet tarayıcıları tarafından indirilir ve tekrar tekrar kullanılır yani her yeni sayfa için tekrar tekrar indirilmez buda sitemizin kullanım hızını arttırır sitenizin daha hızlı yüklenmesini istiyorsanız bu tarz sitil ve komut dosyalarını harici olarak çağırmak faydalı olacaktır. İşlem adımları şu şekilde:

1. Harici çekmek istediğiniz dosyayı Google Drive'a yükleyin ve ardından yüklediğiniz dosyaya sağ tıklayarak "Birlikte Aç>Direct Link Creator" adımlarını takip edin.
   
2. Yönlendirildiğiniz sayfada dosyanıza Direct Link oluşturacaksınız.
   
3. Oluşturduğunuz linki kopyalayın ve " & " işaretini " &amp; " ile değiştirin. Kod aşağıdaki gibi olacak.

Kopyaladığımız:

https://docs.google.com/uc?export=download&id=1HF3g5CeFjwo9asHrUxjPEFoiogSUGy4V

Değiştirdiğimiz:

https://docs.google.com/uc?export=download&amp;id=1HF3g5CeFjwo9asHrUxjPEFoiogSUGy4V

yaptığımız değişiklikten sonra bu linki direk olarak çağırabiliriz bloğumda kullandığım örnek kod aşağıdadır.

<script src='https://docs.google.com/uc?export=download&amp;id=1HF3g5CeFjwo9asHrUxjPEFoiogSUGy4V'/>