Blogger’da Sabit Bir Ana Sayfa Yapma

Blog dediğimiz şey yayınların en yeniden en eskiye doğru sıralandığı, her sayfada belli sayıda yayının gözüktüğü ve sayfalar arasında geçiş yapılara eski yayınlara ulaşıldığı dinamik bir web sitesi türüdür.

 

Eskiden statik web sitesi oluşturmamızı sağlayan Geocities, Tripod gibi servislerin yerini günümüzde Blogger, Tumblr ve Wordpress gibi sistemler aldı. Bu ücretsiz servisler sayesinde herkesin blog oluşturması oldukça kolay ama statik bir web sitesi oluşturmak isteyenler için artık eskisi gibi ücretsiz ve kaliteli servisler yok.

 

Dünyanın en popüler blog oluşturma esrvisi olan Blogger’da klasik bir blogun yanı sıra açılış sayfası olan, statik bir web sitesi oluşturabileceğinizi biliyormuydunuz?

 

Aşağıda göstereceğim yönntemleri ve bazı temel HTML kodlarını kullanarak Blogger’ı tek bir sayfadan oluşan siteye dönüştürmeniz mümkün.

 

1. Boş Bir Sayfa Oluşturalım

 

Blogger’da boş bir sayfa oluşturmak istediğimizde en az bir adet gadget eklemek gerektiğini belirten bir uyarı gelir. Aşağıdaki kodları incelediğinizde navbar gadgetını eklediğimizi fakat CSS kodlarıyla bu gadgetı sakladığımızı görebilrsiniz.

 

İlk örneğimizde boş bir sayfa oluşturulam ve yavaş yavaş bunu dolduralım. Boş ve sabit bir sayfa oluşturmak için Blogger kumanda panelinize girdikten sonra Şablon > HTML’yi Düzenle yolunu takip edin ve buradaki tüm kodları silerek yerine aşağıdaki kodları ekleyin.

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
   <b:skin><![CDATA[
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)  margin: 0;
    padding: 0;
}

]]></b:skin>
  </head>
  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  </body>
</html>

 

2. Boş Sayfaya Bir Şeyler Yazalım

 

Sayfaya bir şeyler yazmak için klasik HTML kodlarını kullanacağız. Eğer HTML bilginiz yoksa şuradaki gibi online HTML editörlerinden birini kullanarak sayfanızı oluşturun ve HTML kodlarını alın.

online-html-editor

 

Resimde gördüğünüz gibi örnek bir sayfa oluşturdum ve bunun HTML kodlarını alarak Blogger kumanda panelinde Şablon > HTML’yi Düzenle bölümünde </body> kodunun üzerine ekledim. Burası çok önemli! Ekleyeceğiniz HTML kodları her zaman </body> kodunun üzerinde yer almalı.

Şablonu önizleme yaptığımızda online HTML editöründe oluşturduğumuz sayfasın aynısını görebiliriz.

 

Dikkat Edilecek Hususlar

 

- Blogger’da tüm HTML kodlarını ve HTML sayfalarını kullanmak ne yazık ki mümkün değildir. Bu yüzden bazı kodlarda uyarı mesajı ile karşılaşabilirsiniz. Bu hata mesajlarını Google’da arayarak çözüm bulabilirsiniz. Veya bu yazının altına yorum bırakırsanız ben yardımcı olmaya çalışırım.

 

- Hazır HTML şablnlarındaki css dosyalarının içindeki kodları Blogger’a eklemek isterseniz ]]></b:skin> kounun üzreine eklemelisiniz.

 

- Javascript veya benzeri bir harici dosya çağırmak için kullanılan kodları ise </head> kodunun üzerine eklemelisiniz.

 

Bu yazıyı konuyla ilgili çok mesaj geldiği için hazırladım. Umarım anlatabilmişimdir ve faydalı olabilmişimdir.

51 yorum:

  1. Blogger da kendim şablon oluşturayım diyenler yukarıdaki kodları kullanarak tasarıma başlayabilirler.
    Teşekkürler

    YanıtlaSil
  2. Gayet iyi ancak HTML'den daha kolay bir yöntemi hiç yok mu?

    YanıtlaSil
  3. Hocam nihayet geldiniz uzun bir süredir eksiklğini hissettik vala :) Hgniz

    YanıtlaSil
  4. Bilgi için teşekkürler ayrıca @Poyraz Şahin haklı 0'dan başlayarak tema yapacak olanlar yukarıdaki kodlar ile başlayabilir :)

    YanıtlaSil
  5. Bilgilendirici, yönlendirici, çok güzel bir yazı, ellerinize sağlık

    YanıtlaSil
  6. Sloganınıza uygun bir tema kullanın bence :) blogger kullanıcılarının büyük bir kısmı çok iyi tasarımlar kullanıyor.
    Yazılarınız sloganın hakkını veriyor olsada tasarımda büyük bir bölümü, usta bir tasarım kullanın ve sloganınızın hakkını verin, .

    YanıtlaSil
  7. Konuyla pek ilgili değil ama yardıma ihtiyacım var.
    Bloğumda Ana Sayfa, PDF'ler, Bilim Adamları diye devam eden sayfa menüsü var. Ben bunu kaldırmak istiyorum fakat kaldırınca sayfanın bloğun görüntüsü değişiyor. Gadget'ler birbirine giriyor. Kodu silerken dikkat ettim ama acaba fazladan kod mu siliyorum ondan mı oluyordur.

    http://mucosmo.blogspot.com.tr/

    YanıtlaSil
  8. Güzel bir yazı olmuş eline sağlık ama bu günlerde paylaşımlar biraz azaldı daha fazla paylaşım bekliyoruz. :)

    YanıtlaSil
  9. @Süleyman Seyidoğlu
    Yaklaşık 2.5 sene haftada 3 yazı yayınladığım için beklentinizi anlayabiliyorum ama daha önce defalarca anlatmaya çalıştım yeni bir sektörde yeni bir işe gireceğimi ve işlerimi yoluna koyana kadar bloga fazla vakit ayıramayacağımı.

    Bu yüzden artık sık sorulan soruları blogda yazı yazarak yanıtlamaya çalışıyorum. Yeni düenimi oturtana kadar bu şekilde devam edeceğim ne yazık ki.

    Umarım takibe devam edersiniz.

    YanıtlaSil
  10. Bütün kodları silersek blog içeriğimiz de silinmez mi? O kısmı anlayamadım.

    YanıtlaSil
  11. Merhabalar,
    Bunu daha önce araştırmıştım ve benzer şablonlar bulmuştum fakat nasıl kendimize göre düzenleyeceğimiz konusunda bir cevap bulamamıştım. Bilgilendirdiğiniz için çok teşekkür ederim pek çok kişinin işine yarayacaktır.

    YanıtlaSil
  12. htmlyi yazıyorum ancak blogumda görüntülemiyor bunun sebebi ne olabilir

    YanıtlaSil
  13. Yazı için teşekkürler. Güzel bi yazı olmuş. Paylaşımlarınızın devamını bekliyorum. Sitenizi takipteyim

    YanıtlaSil
  14. @kara kralice Burda verilen Html'i yazdıysanız boş bir beyaz ekran gözükür sadece. Siz html kod yazmayı biliyorsanız kendiniz düzenliyceksiniz bunu. Yani size özgü bir şablon yapmış olursunuz.

    YanıtlaSil
  15. Sadece iletisim formunu ekliyebilir miyiz, sayfa ortasında iletişim formu üste de sosyal ağladaki hesabımdan oluşan tema yapmaya çalıştım ama başaramadım, yardımcı olur musunuz.

    YanıtlaSil
  16. Çok Güzel bir paylaşım teşekkürler

    YanıtlaSil
  17. Merhaba ben blog başlığıma yani resme tıklandığında ana sayfaya gidilmesini istiyorum önceki bloğumda yapmıştım ama şimdi hatırlamıyorum. Nasıl yapabilirim?

    YanıtlaSil
  18. Yeni sabit sayfaya, gadget yardımı ile bir araç eklemek istiyorum ama bunu yapmam mümkün mü?

    YanıtlaSil
  19. ben anasayfaya giriş sayfası da eklemek istiyorum bunu yapınca bloga girmiyor yardımcı olursanız sevinirim.

    YanıtlaSil
  20. yav şimdi ben sayfa oluşturdum ama paylaşım yaparken sadewce bi kez paylaşım yapabiliyorum ben ana sayfadaki gibi bölüm bölüm olmasını istiyorum www.aksoyhlc.blogspot.com

    YanıtlaSil
  21. ben bunu ekledim ama bütün şablonum kayboldu şuan bembeyaz bi sayfa var geride alamıyorum napıcam puff :(((

    YanıtlaSil
  22. abi kolay gelsin 2 yıldır sizi takip ediyorum blogger siteme chatango'yu blogger ana sayfaya eklemek istiyorum kutu olarak değilde direk ana sayfada olmasını istiyorum yapılabilirmi saygılar.

    YanıtlaSil
  23. hocam merhaba cok onemlı bır sorum var cevaplarsan sevınırım ..../p/iletişim dıye sayfa actım blogda ama yayın yaptıgımda o gonderıyı nasıl yayınlayacagım sayfada ?

    YanıtlaSil
  24. hocam yardıma ihtiyacım var, dediklerinizi yaptım ama tüm içeriğim silindi, nasıl geri yükleyebilirim?
    kocaminmutfagi.blogspot.com.tr

    YanıtlaSil
    Yanıtlar
    1. ABİ ALLAH RIZASI İÇİN BİRŞEY YAP TAMAM BOŞ SAYFA KODUNU YAPIŞTIRDIM KAYDETTİM SONRA VERDİĞİN SİTEYE GİRDİM OLMUYOR ABİ ORDA YOK ÖYLE Bİ ANASAYFA HTML YAZMA FELAN ONLINE HTML SİTESİ ARADIM BAŞKA SİTELERDE DE ÇİZİM OLMUYOR ABİ SADECE YAZI OLUYOR Bİ SİTE ÖNER ABİ YA DA PROGRAM ,PEKİ DİYELİM Kİ YAPTIK BÖYLE HTML BULDUK ABİ KATEGORİ FELAN NASIL EKLİYCEZ ANASAYFAYA,OLMADI ANLATAMAZSAN YA DA GÖREN BİRİ VARSA İLK ANA HTML KODUNU YAZSIN Bİ YERE URL VERSİN ORDAN BAKALIM İNSANLAR YARDIM İSTİYOR SİTEM EMEKLERİM GİTTİ.

      Sil
    2. ABİ ALLAH RIZASI İÇİN BİRŞEY YAP TAMAM BOŞ SAYFA KODUNU YAPIŞTIRDIM KAYDETTİM SONRA VERDİĞİN SİTEYE GİRDİM OLMUYOR ABİ ORDA YOK ÖYLE Bİ ANASAYFA HTML YAZMA FELAN ONLINE HTML SİTESİ ARADIM BAŞKA SİTELERDE DE ÇİZİM OLMUYOR ABİ SADECE YAZI OLUYOR Bİ SİTE ÖNER ABİ YA DA PROGRAM ,PEKİ DİYELİM Kİ YAPTIK BÖYLE HTML BULDUK ABİ KATEGORİ FELAN NASIL EKLİYCEZ ANASAYFAYA,OLMADI ANLATAMAZSAN YA DA GÖREN BİRİ VARSA İLK ANA HTML KODUNU YAZSIN Bİ YERE URL VERSİN ORDAN BAKALIM İNSANLAR YARDIM İSTİYOR SİTEM EMEKLERİM GİTTİ.

      Sil
  25. hocam şimdi benim üst menüler varya işte üst menü ekliyoruz video, müzik , iletişim felan şimdi video kısmında video paylaşmak istiyorum ama yapamıyorum bi yardımcı olsanız

    YanıtlaSil
  26. merhaba benimde tüm içeriğim silindi acil cevap verirmisiniz

    YanıtlaSil
  27. Hocam lütfen söyleyin bana ben bir kod ekleyecektim şablonuma hemen HTML'yi düzenle kısmına girdim ve ctrl+f yaparak arama kısmına girdim ve body in yazılışını yazdım ama kod bulunamadı gibi gözüküyor birşey yapmam gerkiyomu

    YanıtlaSil
  28. Benim bloguma bu seyleri uygulayacak birisi war miii😢

    YanıtlaSil
  29. Bir kaç sayfa oluştu başka oluşmuyor, kaç gündür bu sayfa oluşmama hatasıyla ugraşıyorum, geri bildirim de bir işe yaramadı bu konuyla ilgili arama motorlarında da bir sonuç çıkmadı. Bu sorun ilk defa benim başıma geldi galiba, blog hocamda da bir çözüm bulamazsam kapatmak zorunda kalacagım, kapatmaya da kıyamıyorum, çünkü çok emek verdim...

    YanıtlaSil
  30. Peki google bu durumda index sikintisi yapiyor mu?

    YanıtlaSil
  31. Merhaba , Blogger de ayrı bir sayfa olarak yorum sayfası nasıl oluşturabiliriz teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Şuraya bakabilirsiniz: http://bloghocam.blogspot.com/2013/12/bloggera-forum-sayfas-ekleme.html

      Sil
  32. Serday bey, benim için sorun değil de bu işlemi yapmadan önce yedek almayı unutmayın gibi bir not düşseydiniz daha makul olurdu. Çünkü insanlar boş sayfaya balıklama atlarken, eski haline getirmek aklına gelmeyebilir.

    YanıtlaSil
    Yanıtlar
    1. Haklısınız da yıllardır hep aynı uyarıyı yaptığım için her işlemden önce tekrar hatırlatma gereği duymadım.

      Sil
  33. vedat kılıç beyin dediğini ben yaptım. Ve şu anda sitem gitti siteye girdiğimde hiç birşey gözükmüyor teşekkür ederim :(

    YanıtlaSil
  34. bütün emeğim gitti geri dönüş nasıl olucak?

    YanıtlaSil
  35. İkinci noktadaki bağlantı çalışmıyor. Bunları yerine kullanın:
    WordHTML, HTML-Cleaner, HTML-Online, htmlg.com or htmlTidy.net

    YanıtlaSil
  36. Boş bir blogumda denemeye çalıştım ama çok zor hocam. Gerçek bloguma denemeye korktum. :(
    bilgiler için teşekkürler. :))

    YanıtlaSil
  37. ...... kodu bende yok ne yapmam lazım

    YanıtlaSil
  38. Ben yayınların girilir girilmez görünmesini istemiyorum anasayfa farklı yayınların olduğu sayfanın farklı olmasını istiyorum bunu nasıl yapabilirm

    YanıtlaSil
  39. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  40. hocam kabuledilemez DATA bilmem ne diyo

    YanıtlaSil
  41. "şablnlarındaki, kounun üzreine" kelimelerini düzeltirsiniz. Kolay gelsin.

    YanıtlaSil
  42. Link ölmüş onun yerine htmledit.squarefree.com sitesini kullanabilirsiniz.

    YanıtlaSil
  43. Hocam iyi güzel de site daha index almadı rica etsem bi göz atarmısınız.
    https://thisissandtr.blogspot.com.tr/

    YanıtlaSil

Blogger tarafından desteklenmektedir.