Ana içeriğe atla

Kayıtlar

Bölüm 8: Blogger Ana Sayfa Düzenleme

Bir önceki bölümde Blogger devamını oku eklentisi adı altında sunulan eklentileri neden kullanmamalıyız ve bu eklentiler yerine ne kullanmalıyız sorusuna yanıt vermiştik. Bu bölümde ise ana sayfamıza dinamik olarak getirdiğimiz içerikleri temamıza göre şekillendireceğiz. Benim vermiş olduğum hazır temada ana sayfada bulunan içerikler için hazırlanmış belirli divler bulunuyor. Siz de tama kodlarken bu şekilde divler ile kuralları belirtirseniz hiçbir sorun yaşamazsınız. Kullanacağımız bir resim bir başlık ve bir snippet bulunuyor. Aşağıdaki resimlerden şu anki Blogger kodumuzu ve bu kodun nasıl göründüğünü görebilirsiniz. Blogger Blog Kayıtları Gatget'ı Ana Sayfa  Nasıl Düzenlenir? Şimdi de Github hesabımda paylaşmış olduğum temaya dönerek ana sayfa düzenini inceleyelim. Yukarıdaki resimlerden ilkinde gördüğünüz title etiketleri bizim için hayati öneme sahip. Bu title etiketleri ana sayfa ve içerik sayfasına ayrı ayrı başlıkları getiriyor. Teker teker <data:post.title/> etik
En son yayınlar

Bölüm 7: Blogger Blog Kayıtları Gatget’ını düzenlemek

 Bir önceki bölümde içerikleri dinamik olarak ana sayfamıza düşürmüştük. Bu bölümde ana sayfamızdaki kötü görüntüden kurtulacağız. Nasıl kurtulacağımıza geçmeden önce size neden Blogger devamını oku eklentilerinin kullanılmaması gerektiğini anlatmak istiyorum. Bu eklentilerin ne yaptığını bir inceleyelim. Blogger’da yayınların içeriğini dinamik olarak ana sayfaya ya da içerik sayfasına getiren <data:post.body/> etiketi içeriğin tamamını döndürüyor. Şu anda ana sayfamız da aşağıdaki şekilde. Yayın içeriği ana sayfamıza tamamen gelmiş durumda. İçeriklerinizin hem ana sayfanızda hem de içerik sayfanızda hem de tüm haliyle bulunması kopya içerik muamelesi görmenize neden olabilir. Neden bunu söylediğime gelecek olursak Blogger devamını oku eklentileri <data:post.body/> etiketinden gelen yazının tamamını bir fonksiyona gönderiyor. Bu fonksiyon da içeriğin ilk resmini ve baştan dilediğiniz kelimedeki kısmını geri döndürüyor. İşin sorunlu taradı tüm içerik geldikten sonra bu fonks

Bölüm 6: Blogger Blog Kayıtları Gatget’ı

Önceki bölümlerde temamızın dinamik olmayan her türlü sorununu halletmiştik. Bu bölümde en önemli gatget olan blog kayıtları gatgetını inceleyeceğiz. En son web sitesi statik olarak tamamlanmış şekildeydi. Bu bölümde main bölümünde bulunan yayınları temsil eden statik bölümü silerek yavaş yavaş dinamikleştireceğiz. Blogger kullanıcıysanız düzen kısmında blog kayıtları gatgetı ilginizi çekmiştir. Aşağıdaki başlıkla beraber bu gatgetı kullanmaya başlıyalım. Blogger Blog Kayıtları Gatget’ı Nasıl Kullanılır? Öncelikle kullanacağımız kod aşağıdaki gibidir. <b:section class='content' id='content' name='Main' showaddelement='yes'>   <b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'/> </b:section> Bu kodu kullandığınız anda main bölümüne dinamik içerik getirebilir ve içerik sayfalarında yayınlarınızı görebilirsiniz. Bu gatgetı kaldırırsanız yayın sayfalarınızda yayınlarınız dahil g

Bölüm 5: Blogger Javascript Kodları Nereye Yazılır?

 Bir önceki bölümde css kodlarının nereye yazıldığını incelemiştik. Bu bölümde javascript kodlarının nereye yazıldığını inceleyeceğiz ve artık temamızı aktarmaya başlayacağız. Blogger javascript kodları nereye yazılır? Blogger Javascript Kodları Nereye Yazılır? </body> Etiketinin hemen üzerine aşağıdaki kodu yapıştırarak Blogger'da javascript kodlarınızı çalıştırabilirsiniz. <script type="text/javascript">  //<![CDATA[  //javascript  //]]> </script> Bu kodları Blogger'ın hazır temalarını inceleyerek de bulabilirsiniz. Tabii ki css kodlarını olduğu gibi javascript kodlarını da Github ve Google Drive gibi hostlarda depolayabilirsiniz. Ancak size bir önceki bölümde de söylediğim gibi kodlarınızı Blogger tema düzenleyicisinde tutmanız site hızınızı büyük ölçüde etkileyecektir. Şimdi eğitim seti boyunca kullanacağımız temayı işlevsel hale getirmek için bir adım daha atarak javascript kodlarını ekleyelim. Bir önceki bölümden temamız en son bu şekilde

Bölüm 4: Blogger Css Kodları Nereye Yazılır?

Önceki bölümde temamızı html olarak Blogger’a aktarmıştık ancak css kodları olmadığı için şu anda site görünümü çok kötü. Ben font awesome kütüphanesini dahil etmeyip svg olarak tüm ikonları kullandım. Logomu da svg olarak kendim çizmiştim. Svg logo nasıl çizilir yazımı inceleyerek svg logo çizebilirsiniz. Avantajlarına da değinmiştim ilgili yazımda. Blogger Css Kodları Nereye Yazılır? Blogger’da css kodlarınızı çalıştırabileceğiniz birçok seçenek var ancak benim tavsiyem direk olarak Blogger tema düzenleyicisi içinde barındırmak. Başka bir sunucudan css kodlarınızı çektiğinizde sunucunun hızına göre sayfa yüklenme hızınız değişecektir. Uzatmadan css kodlarını nereye yazacağımızı inceleyelim. Css kodlarımızı <b:skin> <![CDATA[   <!--css--> ]]> </b:skin> Kodlarının arasına yazmamız gerekiyor. </head> bölümünü bulup bu bölümün hemen üzerine bu kodu yapıştırdıktan sonra içerisine css kodlarımızı eklememiz yeterli olacaktır. Örnek Tema Css Kod

Bölüm 3: HTML Temayı Blogger’a Uyarlama

Bir önceki bölümde Blogger’a bir HTML temayı aktarırken dikkat etmemiz gerekenleri incelemiştik. Bu bölümde birinci bölümdeki temayı sadece HTML olarak Blogger’a aktaracağız. Bu bölümde uyguladıklarımız önceki bölümdeki kuralların tamamen kendisidir. Her yazının altında bir önceki ve bir sonraki bölümlerin linkleri mevcuttur. Tıklayarak gidebilirsiniz. HTML Temayı Blogger’a Uyarlama Ben temayı github hesabımdan indirdim ve örnek bir blog kurdum. İndex.html dosyasını direk kopyalayarak Blogger’a aktaralım ve önceki bölümdeki kurallara uyarak temayı düzenleyelim. Yukarıda da gördüğünüz gibi <head></head> bölümünde hatalarla karşılaştık. Bu hataları çözmek için öncelikle açılmış ancak kapanmamış meta etiketlerini kapatalım. Daha sonra ise önceki bölümde de verdiğim css bölümünü head etiketinin sonuna ekleyelim. Gerekli eklemeleri yaptıktan sonra kaydetmeye çalıştığınızda yukarıdaki gibi bir hata alacaksınız. Bu hatanın sebebi dahil ettiğimiz font kütüphanesinden kaynakla

Bölüm 2: Blogger’ın Genel Kod Yapısı

 Bir önceki bölümde bu eğitim seti boyunca kullanacağımız temayı ve indirme işlemlerini incelemiştik. Bu temanın dinamik bir şekilde Blogger’da çalıştırılabilmesi için öncelikle HTML olarak temayı Blogger’a aktarmamız gerekiyor. Ben diğer web sitemde bu konu ile ilgili bir yazı yazmıştım. HTML TEMAYI BLOGGER’A AKTARMA linkine tıklayarak yazıyı inceleyebilirsiniz. Bu yazıda o yazının sadece kural bölümünü işleyeceğiz. BLOGGER TEMA NASIL KODLANIR Blogger’ın Genel Kod Yapısı - Kurallar Blogger’da tema kodlayabilmeniz için aşağıdaki kuralların hepsine dikkat etmeniz gerekiyor. 1- Açtığınız her etiketi kapatmanız gerekir. Ben aşağıda iki tür kapatma şekli verdim ikisinin de işe yaradığı yerler farklı. Örneğin bir etiketini inceleyelim. <hr> etiketini bu şekilde yazarsanız Blogger kabul etmeyecektir. Kabul edilebilmesi için <hr/> ya da <hr></hr> şeklinde bir kullanım yapmanız gerekir. Bu kural img, br, hr, meta ve video gibi tüm etiketler için geçerlidir. 2

Bölüm 1: Blogger Tema Kodlamak İçin Hazır Tema Bulma

Bir tema kodlayabilmeniz için önce işin tasarım kısmını halletmemiz gerekiyor. Ben daha önceden sade bir blog teması kodlamıştım. Bu eğitim boyunca linkini sizinle de paylaşacağım hazır bir HTML tema ile ilerleyeceğim. Tema linkine tıklayarak github hesabımdan kullanacağım HTML temayı indirip inceleyebilirsiniz. Ancak kendi temanız ile ilerlemenizi tavsiye ediyorum. İnternetten lisanslı ücretsiz bir tema da bulabilirsiniz. Google'a ücretsiz bootstrap blog temaları gibi anahtar kelimeleri yazarak kendi siteniz için tema bulabilirsiniz. Blogger Tema Kodlamak için kullanacağım HTML Temayı İndirme İlk olarak github hesabıma girip zfcakademicom-theme yazan klasöre tıklayın. Yukarıdaki fotoğrafta da göreceğiniz github hesabımda kullanabileceğiniz iki tema bulunuyor. Tamamen sade tek sayfalık örnek tema ve bu eğitimde kullanacağımız tema olarak iki seçeneğiniz var. Bu temaları kullanmak isterseniz footer linklendirmesini kaldırmamanızı rica ediyorum. zfcakademicom-theme klasörüne

Blogger Alt Alan Adı (Subdomain) Bağlama

Blogger’a alt alan adı eklemek için aşağıdaki aşamaları teker teker uygulamanız yeterli olacaktır. Bir alt alan adı eklerken uyguladığınız aşamaları normal alan adınızı eklerken de uygulamanız gerekir. Aşağıda bulunan yönlendirmeleri verilen ip adreslerine her türlü yapmak zorundasınız. Blogger alt alan adı (subdomain) bağlama nasıl bağlanır? Blogger Alt Alan Adı (Subdomain) Bağlama - Aşamalar 1- Yönlendirmek istediğiniz alt alan adının ana alan adının dns ayarlarına gidin. 2- Aşağıdaki tabloda verilen kayıtları ekleyin. Ben örneğimde blogger.zfcakademi.com alt alan adını Blogger’a nasıl eklediğimi gösterdim. Siz ekleyeceğiniz alan adına göre aşağıdaki bilgileri değiştirin. Örneğin zfcakademi.com alan adlı bir web siteniz varsa ve blog.zfcakademi.com alt alan adını Blogger’da kullanmak istiyorsanız aşağıda blogger yazdığım bölümlere yukarıdaki örnekte blog yazın. Kayıt Türü Ana Bilgisayar Yönlendirilen Yer TTL A blogger