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.
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.
Blogger da kendim şablon oluşturayım diyenler yukarıdaki kodları kullanarak tasarıma başlayabilirler.
YanıtlaSilTeşekkürler
Gayet iyi ancak HTML'den daha kolay bir yöntemi hiç yok mu?
YanıtlaSilTeşekkürer
YanıtlaSilHocam nihayet geldiniz uzun bir süredir eksiklğini hissettik vala :) Hgniz
YanıtlaSilBilgi için teşekkürler ayrıca @Poyraz Şahin haklı 0'dan başlayarak tema yapacak olanlar yukarıdaki kodlar ile başlayabilir :)
YanıtlaSilBilgilendirici, yönlendirici, çok güzel bir yazı, ellerinize sağlık
YanıtlaSilSloganı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.
YanıtlaSilYazı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, .
Konuyla pek ilgili değil ama yardıma ihtiyacım var.
YanıtlaSilBloğ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/
primci
SilGüzel bir yazı olmuş eline sağlık ama bu günlerde paylaşımlar biraz azaldı daha fazla paylaşım bekliyoruz. :)
YanıtlaSil@Süleyman Seyidoğlu
YanıtlaSilYaklaşı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.
Bütün kodları silersek blog içeriğimiz de silinmez mi? O kısmı anlayamadım.
YanıtlaSilMerhabalar,
YanıtlaSilBunu 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.
htmlyi yazıyorum ancak blogumda görüntülemiyor bunun sebebi ne olabilir
YanıtlaSilYazı için teşekkürler. Güzel bi yazı olmuş. Paylaşımlarınızın devamını bekliyorum. Sitenizi takipteyim
YanıtlaSil@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ıtlaSilTeşekkürler
YanıtlaSilSadece 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Çok Güzel bir paylaşım teşekkürler
YanıtlaSilMerhaba 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ıtlaSilfaydalı oldu teşekkürler
YanıtlaSilYeni sabit sayfaya, gadget yardımı ile bir araç eklemek istiyorum ama bunu yapmam mümkün mü?
YanıtlaSilben anasayfaya giriş sayfası da eklemek istiyorum bunu yapınca bloga girmiyor yardımcı olursanız sevinirim.
YanıtlaSilyav ş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ıtlaSilben bunu ekledim ama bütün şablonum kayboldu şuan bembeyaz bi sayfa var geride alamıyorum napıcam puff :(((
YanıtlaSilabi 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ıtlaSilhocam 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ıtlaSilhocam yardıma ihtiyacım var, dediklerinizi yaptım ama tüm içeriğim silindi, nasıl geri yükleyebilirim?
YanıtlaSilkocaminmutfagi.blogspot.com.tr
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İ.
SilABİ 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İ.
Silhocam ş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ıtlaSilmerhaba benimde tüm içeriğim silindi acil cevap verirmisiniz
YanıtlaSilHocam 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ıtlaSilBenim bloguma bu seyleri uygulayacak birisi war miii😢
YanıtlaSilBir 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ıtlaSilPeki google bu durumda index sikintisi yapiyor mu?
YanıtlaSilMerhaba , Blogger de ayrı bir sayfa olarak yorum sayfası nasıl oluşturabiliriz teşekkürler.
YanıtlaSilŞuraya bakabilirsiniz: http://bloghocam.blogspot.com/2013/12/bloggera-forum-sayfas-ekleme.html
SilSerday 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ıtlaSilHaklı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.
Silvedat 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ıtlaSilbütün emeğim gitti geri dönüş nasıl olucak?
YanıtlaSilİkinci noktadaki bağlantı çalışmıyor. Bunları yerine kullanın:
YanıtlaSilWordHTML, HTML-Cleaner, HTML-Online, htmlg.com or htmlTidy.net
Boş bir blogumda denemeye çalıştım ama çok zor hocam. Gerçek bloguma denemeye korktum. :(
YanıtlaSilbilgiler için teşekkürler. :))
...... kodu bende yok ne yapmam lazım
YanıtlaSilBen 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ıtlaSilBu yorum yazar tarafından silindi.
YanıtlaSilhocam kabuledilemez DATA bilmem ne diyo
YanıtlaSil"şablnlarındaki, kounun üzreine" kelimelerini düzeltirsiniz. Kolay gelsin.
YanıtlaSilLink ölmüş onun yerine htmledit.squarefree.com sitesini kullanabilirsiniz.
YanıtlaSilHocam iyi güzel de site daha index almadı rica etsem bi göz atarmısınız.
YanıtlaSilhttps://thisissandtr.blogspot.com.tr/