Web Günlüğü

19.01.2019

Blogger thumbnail öne çıkan resim alanı nasıl oluşturulur

Blogger'da WordPress'de olduğu gibi öne çıkarılmış resim/görsel özelliği bulunmakta fakat blogger'da kullanım tarzı biraz farklı. Yazının devamında paylaşmış olduğum ilk kod parçacığı sayesinde yazının herhangi bir bölümüne, özellikle yazı-başlık üstüne eklenerek kullanılabilir.

09.12.2018

Google Analytics ile sahte trafik kaynakları nasıl engellenir

Bu yazıda bahsettiğim Toolator sitesi kapandığından dolayı yazıyı 9 Aralık 2018 tarihinde güncelledim. Yeni yöntem ile Google Analytics ile sahte trafik kaynaklarının nasıl engellenebileceğinden bahsettim.

9 Aralık 2018 Güncelleme : Google Analytics ile sahte trafik kaynakları nasıl engellenir

Toolator sitesi kapandıktan sonra benzer direkt olarak IP'lerin engellendiği ücretsiz bir servis araştırsam da bulamadım. Alternatif olarak Google Analytics ile bu spam trafik kaynakları engellenebiliyor. Fakat bu yöntem sadece spam trafiklerin Google Analytics verilerine işlenmemesine yarıyor. Yani trafikler gelmeye devam ediyor fakat Analytics verilerinde bu kaynaklar gözükmüyor.

1 - İlk adımda sahte trafik gönderen site kaynaklarını resimde görüldüğü gibi Google Analytics › Edinme › Tüm Trafik › Kaynak/Aracı sayfasından tespit ediyoruz.


2 - Daha sonra Yönetici › Görünüm sekmesi › Filtreler sayfasına giriş yapıyoruz.




3 - Filtre Ekle butonuna tıklayarak engellemek istediğimiz site adresini alttaki ikinci resimde görüldüğü gibi engelliyoruz.





Aşağıdaki yöntem artık kullanılamadığından yazı pasife alınmıştır.

09.12.2018

Blogger'da belirli bir etikete ait son yazılar nasıl gösterilir

Blogger'da son yazılar ister belirli bir etikete göre istenirse tüm etiketler dahilinde lislenebiliyor. Resimsiz ve detaysız, sadece yazı başlıkları ile listelemenin iki yöntemi bulunmakta. Bunlardan birincisi İçerik Takibi Gadget'i(bileşen) ile bir diğeri ise javascript kodları ile. Kişisel seçime bağlı olarak iki yöntemden herhangi biri kullanılabilir.

Bileşen olarak eklemenin avantajı, hem daha hızlı hem de temadaki kod fazlalığının önüne geçilmesi. Bileşen ile eklemenin dezavantajları ise istenilen herhangi bir yerde kullanılamıyor olması(aslında kullanılabilir fakat css ile özelleştirme yapılması gerekiyor) ve listelenecek yazı sayısının 5 adetle sınır olması. Kod ile hem istenilen yerde hem de istenilen sayıda yazı listelenebiliyor. Seçim size ait.

1.Yöntem (Gadget ile)
Blogger Yerleşim sayfasından Gadget ekleme yöntemiyle ilgili gadget yani İçerik takibi seçilerek blog adresi ve hangi etikete ait son yazılar listelenecekse o etiket eklenmelidir. Örnek : http://www.zaferzent.com/feeds/posts/default/-/Blogger





2.Yöntem (HTML/JavaScript kodları ile)
Yine Yerleşim sayfasından Gadget ekleme yöntemi ile bu defa HTML/JavaScript gadget'ı seçilerek aşağıdaki kodlar eklenmelidir. Öncesinde aşağıdaki kodlar </head> kodu öncesine eklenmelidir.

<script>
var homePage = "blog adresi", 
numPosts = gösterilecek yazı adedi;
function recentPosts(a) {
if (document.getElementById("recent-posts")) {
var e = a.feed.entry,
title, link, content = "",
ct = document.getElementById("recent-posts");
for (var i = 0; i < numPosts; i++) {
for (var j = 0; j < numPosts; j++) {
if (e[i].link[j].rel == "alternate") {
link = e[i].link[j].href;
break
}
}
var title = e[i].title.$t;
content += '<li class="recent-posts"><a href="' + link + '" title="' + title + '" target="_blank" rel="nofollow">' + title + '</a></li>'
}
ct.innerHTML = content
}
}
var rcp = document.createElement('script');
rcp.src = homePage + '/feeds/posts/default/-/etiket adı?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=recentPosts';
document.getElementsByTagName('head')[0].appendChild(rcp);
</script>

Not : Kodlarda belirlenen turuncu renkteki kısımlar isteğe göre değiştirilebilir, eğer istenirse etiket kısmı tamamen kaldırılıp tüm etiketelere ait son yazılar da listelenebilir.

2 - Son yazılar nerede gösterilmek - listelenmek isteniyorsa oraya da aşağıdaki kod eklenmelidir.

<ul id="recent-posts"></ul>

18.11.2018

Blogger yerleşim alanı nasıl düzenlenir, renklendirilir

Son zamanlarda Blogger'da yer alan bileşenlerin eklendiği Yerleşim alanı neden bozuluyor, CSS ile nasıl düzenlenir veya renklendirilir gibi sorular geliyor.

Blogger Paneli > Yerleşim alanı gerek şablonlardan, gerek kullanılan kodlardan dolayı bozulma meydana gelebiliyor. Bu bozulmayı düzenlemek veya Yerleşim alanına daha farklı görünüm kazandırmak için aşağıdaki kodlar kullanılabilir. Kodlar <head>...</head> arasına eklenmelidir.

<b:template-skin><![CDATA[
body#layout{width:900px; background:transparent; border:none}
body#layout #header{float:left; width:99%; background:#5A7EA2}
body#layout #content{float:left; width:58%; background:#7EC1EC}
body#layout #sidebar{float:left; width:40%; background:gray}
body#layout #footer{float:left; width:99%; background:orange}
body#layout .add_widget{background:#fff; border:none}
body#layout div.section{border:none}
body#layout .editlink{background: #bbb;color: #fff !important;padding: 3px;cursor:pointer;}
]]></b:template-skin>

Uyarı : Eğer kodlar tam olarak sonuç vermiyorsa, css kodlarında yer alan body#layout dan sonra gelen id seçicileri (#header, #content, #sidebar gibi) kullanınan temaya göre değişkenlik gösterebilir.
Bu id ler şablon kodlarında yer alan, alttaki kodda görüleceği gibi section idlerini belirtmektedir.

Örneğin
<b:section id='sidebar'>

ID seçicisini tespit etmenin diğer bir kolay yolu ise Yerleşim alanında herhangi bir alan üzerinde sağ tık yapıp Öğeyi İncele veya Öğeyi Denetle yapılarak görülebilir.

03.09.2018

Blogger için github nasıl web hosting olarak kullanılır

Google Drive'ın hosting özelliğinin sona erdirilmesinden sonra css ve js dosyalarını depolamak biz blogger kullanıcıları için eziyet haline geldi. Son çare olarak şablon kodları içerisinde tema veya eklenti kodlarını kullansakta kodlar çok uzamaya ve karmaşıklığa yol açıyordu.

Farklı alternatifler arayışına düşmüşken kısa bir süre önce iSmooth Blog adresinde github'un blogger için web hosting olarak kullanılabileceğini öğrenmiş oldum.

Aslında github aracılığı ile Jekyll ve Pelican blog platformları aracılığı ile blog oluşturulduğundan daha öncesinden biraz bilgi sahibi olmuştum. Fakat blogger için böyle bir özelliğin kullanılanilir olduğunu bilmiyordum. Test edip işe yaradığını görünce de bu blogdaki yazıdan esinlenerek arayış içerisinde olanlar için Türkçe bir içerik oluşturmaya karar verdim. Aşağıdaki adımlar eksiksiz ve doğru bir şekilde uygulandığında blogger bloglar için bir nevi hosting hizmeti kullanılabilir oluyor.

Adım 1 : Yeni bir depo oluşturma

Eğer halihazırda bir github üyeliğiniz varsa https://github.com/new adresinden örneğin isim.github.io şeklinde yeni bir depo(repository) oluşturun.

Adım 2 : Dosya Yükleme veya Oluşturma

İster Github Pages'te yer alan yönergeleri takip ederek oluşturduğunuz depoya ilk dosyalarınızı yükleyin.



Ya da https://github.com/kullaniciadi/isim.github.io adresine giderek Create new file veya upload seçenekleriyle ilk dosyalarınızı yükleyin - oluşturun

Adım 3 : CNAME ile Alt Alan Adı Oluşturma

Alan adı sağlayıcısından DNS Ayarları (alan adı sağlayıcısına göre farklılık gösterebilir) CNAME kaydı yani bir alt alan adı (subdomain) oluşturun.

Adım 4 : GitHub üzerinde CNAME dosyası oluşturma

Github üzerinden yani oluşturulan depo adresi olan github.com/kullaniciadi/isim.github.io adresinden Create new file ile CNAME adında yeni bir dosya oluşturun ve içerisine alan adı sağlayıcısında oluşturduğunuz alt alan adını örneğin dosyalar.zaferzent.com yazın ve Commit new file düğmesiyle kaydedin.



Bu işlemleri doğru bir şekilde yaptıysanız artık blogger temaları ve içerikleri için oluşurduğunuz css, js gibi dosyaları github alanına yükleyerek bloglarınızda kullanabilirsiniz. dosyalar.zaferzent.com/style.css gibi.

Bu arada Gihub'un sınırlamaları olduğunu söylemeden geçmeyelim. Bu tür bir kullanım için Github 1GB depolama alanı ve aylık 100gb trafik sağlıyor.

3.9.2018 Güncelleme : Github'a HTTPS/SSL Desteği Geldi

Yorumlarda Kazım Çakır adlı arkadaşımızın belirttiği gibi Github'da HTTPS/SSL desteği yoktu. Mayıs ayı itibari ile yani yaklaşık 4 ay önce Github HTTPS/SSL özelliğini getirmiş fakat ben Twitter'da gezerken, Github'un Twitter adresinde aşağıdaki tweetle yeni haberdar oldum ve gerekli adımları uygulayarak Github için HTTPS/SSL özelliğini aktif ettim.

Today, custom domains on GitHub Pages are gaining support for HTTPS via @letsencrypt. It's another step towards making the web more secure for everyone. https://t.co/MbB7Jjd3EE

— GitHub (@github) May 1, 2018

Peki Github için HTTPS/SSL'yi nasıl aktif ettim ?

* Öncelikle alan adımın bağlı olduğu IHS'den 4 adet yeni A kaydı girdim. Bunlar; 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153



* Daha sonra ise dosyaları barındırdığım repo adresi olan https://github.com/zaferzent/zaferzent.github.io/settings sayfasında yer alan Github Pages ayarlar kısmından aşağıdaki resimde görüldüğü gibi Enforce HTTPS seçeneğini aktif duruma getirdim ve anlık olarak HTTPS/SSL özelliğinin etkinleştiğini gördüm.

Bir kaç uyarı

1 - Github HTTPS/SSL'yi kullanabilmek için öncelikle, yukarıdaki işlemleri yapmış olmak gerekiyor (CNAME ayarları gibi)
2 - A kayıtlarını girmeden HPTTS/SSL aktif edilemiyor. Github Pages ayarlarında Enforce HTTPS seçeneği yanında "Not yet available for your site because the certificate has not finished being issued." gibisinden bir uyarı veriyor.
3 - Github A kayıtlarının Blogger A kayıtlarına henüz bir etkisi olmadı ve sorun yaşamadım fakat ilerleyen zamanlarda ne olur bilemiyorum(ana alan adına www olmadan girememe gibi).