11.05.2018
Eski şablonlarda göz gezdirirken bu kod parçacığını not alıp kaybetmemek adına paylaşmak istedim.
Kodun kullanımında iki önemli nokta bulunuyor. Birinicisi kodun sadece Yönetici tarafından görünmesi için span ile başlayan ve item-control blog-admin class ismine sahip olması. Bu sayede Hızlı Düzenle bağlantısını sadece yöneticiler görebiliyor. *Uyarı : Eğer kod parçacığı herkese görünüyorsa blogger'ın varsayılan dosyaları; widget_css_bundle.css gibi dosyalar pasif duruma getirilmiş olabilir.
İkinci önemli nokta ise kodlar arasında turuncu renk ile belirginleştirdiğim blogID kısmı. Burada yer alan ID kısmına hangi blogda kullanılacaksa o bloğa ait ID'nin eklenmesi gerekiyor. Bu ID Kontrol Paneline giriş yapıldığında adres satırında görülebiliyor.
* Aşağıdaki kod yazıların altına üstüne veya bilgi kısmı var ise oraya eklenebilir.
Blogger'da yazılara hızlı düzenle bağlantısı nasıl eklenir
Blogger'da yazıları düzenlemek için Blogger Kontrol Paneline gidip, Kayıtlar başlığından düzenlemek istenen yazı bulunup rutin yazı düzenleme adımını uygulamak gerekiyor. Bu uzun rutini uygulamak yerine blog anasayfasında yer alan yazıların kenarına, köşesine Hızlı Düzenle bağlantısı eklenerek kolaylaştırılabiliyor. Bazı varsayılan blogger şablonlarında yazıların bilgi kısmında hızlı düzenle bağlantısı bulunsa da özelleştirilmiş şablonlarda bu kısa kod parçacığı bulunmuyor.
Eski şablonlarda göz gezdirirken bu kod parçacığını not alıp kaybetmemek adına paylaşmak istedim.
Kodun kullanımında iki önemli nokta bulunuyor. Birinicisi kodun sadece Yönetici tarafından görünmesi için span ile başlayan ve item-control blog-admin class ismine sahip olması. Bu sayede Hızlı Düzenle bağlantısını sadece yöneticiler görebiliyor. *Uyarı : Eğer kod parçacığı herkese görünüyorsa blogger'ın varsayılan dosyaları; widget_css_bundle.css gibi dosyalar pasif duruma getirilmiş olabilir.
İkinci önemli nokta ise kodlar arasında turuncu renk ile belirginleştirdiğim blogID kısmı. Burada yer alan ID kısmına hangi blogda kullanılacaksa o bloğa ait ID'nin eklenmesi gerekiyor. Bu ID Kontrol Paneline giriş yapıldığında adres satırında görülebiliyor.
* Aşağıdaki kod yazıların altına üstüne veya bilgi kısmı var ise oraya eklenebilir.
<span class='item-control blog-admin' style='font-size:13px'>
<a expr:href='"https://www.blogger.com/blogger.g?blogID=3193402366393083298#editor/target=post;postID=" + data:post.id' style='color:green' target='_blank'>Hızlı Düzenle</a>
</span>
21.04.2018
Özellikle son paylaşmış olduğum Blogger Aspire temasında yaşamış olduğum, blogger'ın varsayılan olarak gelen js (javascript) ve css dosyalarının Google PageSpeed Insights puanını düşük göstermesinden dolayı bu yazıyı hazırlama gereği duydum. Özellikle mobil puanı büyük ölçüde etkileyen ve çok düşük gösteren bu dosyaları bir kaç adımda kaldırarak sorunu çözüme kavuşturdum.
plusone.js, widgets.js ve widget_css_bundle.css dosyalarını tamamen ortadan kaldırmak için aşağıdaki iki kolay adımı uygulamak yeterli oluyor.
Birincisi
Şablon - tema kodlarının en üstünde yer alan
devam eden kodun başlangıç kısmını aşağıdaki ile değiştiriyoruz veya sadece turuncu renkle belirttiğim kısımları ekliyoruz.
İkincisi
Şablon - tema kodlarının en altında yer alan
etiketini alttaki ile değiştiriyoruz
Uyarı : Varsayılan blogger css dosyası kaldırıldığı zaman blog tasarımında sorunlara neden olabilmektedir.
Blogger plusone.js, widgets.js ve widget_css_bundle.css Nasıl Silinir
Blogger'da varsayılan olarak şablon - tema kodlarına eklenen, sayfa açılış hızını ve Google PageSpeed Insights puanını düşüren plusone.js, widgets.js ve widget_css_bundle.css nasıl silinir?
Özellikle son paylaşmış olduğum Blogger Aspire temasında yaşamış olduğum, blogger'ın varsayılan olarak gelen js (javascript) ve css dosyalarının Google PageSpeed Insights puanını düşük göstermesinden dolayı bu yazıyı hazırlama gereği duydum. Özellikle mobil puanı büyük ölçüde etkileyen ve çok düşük gösteren bu dosyaları bir kaç adımda kaldırarak sorunu çözüme kavuşturdum.
plusone.js, widgets.js ve widget_css_bundle.css dosyalarını tamamen ortadan kaldırmak için aşağıdaki iki kolay adımı uygulamak yeterli oluyor.
Birincisi
Şablon - tema kodlarının en üstünde yer alan
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
devam eden kodun başlangıç kısmını aşağıdaki ile değiştiriyoruz veya sadece turuncu renkle belirttiğim kısımları ekliyoruz.
<html b:css='false' b:js='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection'İkincisi
Şablon - tema kodlarının en altında yer alan
</body>
etiketini alttaki ile değiştiriyoruz
<!--</body>--></body>
Uyarı : Varsayılan blogger css dosyası kaldırıldığı zaman blog tasarımında sorunlara neden olabilmektedir.
19.04.2018
Aspire blogger teması bir kaç ay önce galeri, portföy tarzı bloglar için entegre ettiğim ilk blogger teması oldu. Tabi galeri görünümünde olması dışında farklı proje ve bloglar için de kullanılabilir.
Aspire Blogger Teması Hakkında Genel Bilgiler :
- Temada anasayfasında yazı başlıkları önünde bulunan yazı görseli için blogger'ın kendi özelliği olan thumbnail'i kullandım.
- Tema mobil uyumlu olup menüyü Sayfalar bileşeni ile hazırladım, bu sayade şablon editörü kullanmadan sayfalar otomatik olarak eklenebilmektedir.
- Footer'da (alt kısımda) 4'lü bileşen alanı ve üst menüde manuel olarak düzeltilmesi gereken sosyal medya butonları bulunmaktadır.
- Yazı altlarında etiket, tarih, yazar ismi dışında daha önce bloğumda da paylaşmış olduğum yazı okunma süresi ve yazı uzunluğu gibi eklemeler yaptım.
- Footer alanındaki abonelik kutusu kodları
* Kodlar arasında yer alan web-gunlugu kısmı saihp olunan feedburner akış adresi ile değiştirilmelidir.
Mobil Görünüm
20 Nisan 2018 Cuma Güncelleme : Pagespeed skorunu etkileyen js dosyalarından kaynaklanan sorun düzeltildi. Şu an mobil ve masaüstü skorları 90 üstünde gelmektedir.
Canlı önizleme : https://aspiretema.blogspot.com.tr/
İndirme : https://yadi.sk/d/pJlfoQPx3UceWR
Aspire Blogger Teması
Aspire blogger teması bir kaç ay önce galeri, portföy tarzı bloglar için entegre ettiğim ilk blogger teması oldu. Tabi galeri görünümünde olması dışında farklı proje ve bloglar için de kullanılabilir.Aspire Blogger Teması Hakkında Genel Bilgiler :
- Temada anasayfasında yazı başlıkları önünde bulunan yazı görseli için blogger'ın kendi özelliği olan thumbnail'i kullandım.
- Tema mobil uyumlu olup menüyü Sayfalar bileşeni ile hazırladım, bu sayade şablon editörü kullanmadan sayfalar otomatik olarak eklenebilmektedir.
- Footer'da (alt kısımda) 4'lü bileşen alanı ve üst menüde manuel olarak düzeltilmesi gereken sosyal medya butonları bulunmaktadır.
- Yazı altlarında etiket, tarih, yazar ismi dışında daha önce bloğumda da paylaşmış olduğum yazı okunma süresi ve yazı uzunluğu gibi eklemeler yaptım.
- Footer alanındaki abonelik kutusu kodları
<p class='u-font-small'>>Yeniliklerden haberdar olun..</p>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=web-gunlugu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<label class='u-hidden-visually' for='email'>Newsletter Email</label>
<input class='c-input' id='email' name='EMAIL' placeholder='Email' type='email'/>
</form>* Kodlar arasında yer alan web-gunlugu kısmı saihp olunan feedburner akış adresi ile değiştirilmelidir.
Mobil Görünüm
20 Nisan 2018 Cuma Güncelleme : Pagespeed skorunu etkileyen js dosyalarından kaynaklanan sorun düzeltildi. Şu an mobil ve masaüstü skorları 90 üstünde gelmektedir.
Canlı önizleme : https://aspiretema.blogspot.com.tr/
İndirme : https://yadi.sk/d/pJlfoQPx3UceWR
24.12.2017
Tabi özellik gelmişken kullanmamak olmaz derken bunu yaparken bir yandan da bu konuyla ilgili bir yazı hazırlamak istedim. Öncelikle özellik tam olarak yayınlanmandı ve test aşamasında olduğu için https ayarları sadece draft.blogger.com adresinde görünür ve aktif edilebilir durumda. Bu yüzden ayarları Draft Blogger (Blogger Taslak) üzerinden yaptım ve başarılı sonuç aldım.
1. İlk olarak draft.blogger.com adresine girip Ayarlar > Temel sayfasına giriş yapıyoruz. Karşımıza aşağıdaki gibi iki seçeneğin de (HTTPS Kulanılabilirliği ve HTTPS Yönlendirmesi) HAYIR durumda olduğu bir sayfa ile karşılaşıyoruz.
2. İkinci aşamada buradaki HTTPS Kullanılabirliği seçeneğini EVET durumuna getiriyoruz ve ikinci seçenek olan HTTPS Yönlendirmesinin aktif hale gelmesini bekliyoruz. (Resimde de görüleceği üzere HTTPS Kullanılabilirliği işleniyor ibaresi çıkıyor ve HTTPS Yönlendirmesi için de bu işlem bitmeden bu ayarın kullanılamayacağını belirten bir uyarı çıkıyor.)
3. HTTPS Kullanılabilirliği işlendi ve artık HTTPS Yönlendirmesi aktif duruma geldi.
4.HTTPS Yönledirmesi seçeneğini de EVET durumuna getirip beklemeye geçiyoruz. Adresimize girdiğimiz zaman HTTP'den HTTPS'ye yönlendirme yapılıyor fakat bir süre erişim sağlayamıyoruz. Çok değil 5-6 dakikada tamamlanıyor.
İşlem tamamlandı HTTPS ayarlarını tamamladık fakat alan adı adresimiz ve yazı bağlantılarının URL yapısı değiştiği için Google Webmaster Tools üzerinden sitemizi yeniden HTTPS'li olarak eklemek ve HTTPS'li site haritalarını da yeniden göndermek gerekiyor. Herhangi bir yazıya veya sayfaya HTTP üzerinden girildiğinde o bağlantının HTTPS yönlendirilmesi yapılsa da indexleme işlemi uzun süreceği için Google Webmaster Araçları üzerinden sitemizi eklemek ve yeni site haritalarını göndermek faydalı olacaktır.
Ayrıca kullanılan tema - şablonda da bu yönlendirme işlemi sonucunda sorunlar çıkacağı için tema içerisinde yer alan bağlantıların da HTTPS'li olarak güncellenmesi gerekiyor.
Blogger İHS Özel Alan Adı DNS Ayarları
Blogger https ayarları nasıl yapılır
Blogger Draft (Blogger Taslak) adresinde bugün SSL şifreleme yani https özelliğinin(https ayarları) özel alan adı için de artık kullanılabilir olduğunu gördüm. Blogger için SSL yani https desteği geçen yılın ortalarına doğru gelmişti. Fakat bu özellik sadece .blogspot.com uzantılı bloglarda kullanılabiliyor, özel alan adları için bu seçenek aktifleştirilemiyordu.
Tabi özellik gelmişken kullanmamak olmaz derken bunu yaparken bir yandan da bu konuyla ilgili bir yazı hazırlamak istedim. Öncelikle özellik tam olarak yayınlanmandı ve test aşamasında olduğu için https ayarları sadece draft.blogger.com adresinde görünür ve aktif edilebilir durumda. Bu yüzden ayarları Draft Blogger (Blogger Taslak) üzerinden yaptım ve başarılı sonuç aldım.
Blogger Özel Alan Adları için Adım Adım HTTPS Ayarları
1. İlk olarak draft.blogger.com adresine girip Ayarlar > Temel sayfasına giriş yapıyoruz. Karşımıza aşağıdaki gibi iki seçeneğin de (HTTPS Kulanılabilirliği ve HTTPS Yönlendirmesi) HAYIR durumda olduğu bir sayfa ile karşılaşıyoruz.
2. İkinci aşamada buradaki HTTPS Kullanılabirliği seçeneğini EVET durumuna getiriyoruz ve ikinci seçenek olan HTTPS Yönlendirmesinin aktif hale gelmesini bekliyoruz. (Resimde de görüleceği üzere HTTPS Kullanılabilirliği işleniyor ibaresi çıkıyor ve HTTPS Yönlendirmesi için de bu işlem bitmeden bu ayarın kullanılamayacağını belirten bir uyarı çıkıyor.)
3. HTTPS Kullanılabilirliği işlendi ve artık HTTPS Yönlendirmesi aktif duruma geldi.
4.HTTPS Yönledirmesi seçeneğini de EVET durumuna getirip beklemeye geçiyoruz. Adresimize girdiğimiz zaman HTTP'den HTTPS'ye yönlendirme yapılıyor fakat bir süre erişim sağlayamıyoruz. Çok değil 5-6 dakikada tamamlanıyor.
İşlem tamamlandı HTTPS ayarlarını tamamladık fakat alan adı adresimiz ve yazı bağlantılarının URL yapısı değiştiği için Google Webmaster Tools üzerinden sitemizi yeniden HTTPS'li olarak eklemek ve HTTPS'li site haritalarını da yeniden göndermek gerekiyor. Herhangi bir yazıya veya sayfaya HTTP üzerinden girildiğinde o bağlantının HTTPS yönlendirilmesi yapılsa da indexleme işlemi uzun süreceği için Google Webmaster Araçları üzerinden sitemizi eklemek ve yeni site haritalarını göndermek faydalı olacaktır.
Ayrıca kullanılan tema - şablonda da bu yönlendirme işlemi sonucunda sorunlar çıkacağı için tema içerisinde yer alan bağlantıların da HTTPS'li olarak güncellenmesi gerekiyor.
Blogger İHS Özel Alan Adı DNS Ayarları
19.12.2017
Bootstrap blogger temasını, Twitter tarafından geliştirilen Bootstrap CSS kütüphanesinin şu anda beta aşamasında olan 4.sürümü ile hazırladım. Genel olarak sade olan temaya ekstra olarak responsive menü (açılır menü) ve resmi sosyal paylaşım butonları ekledim.
Önizleme : http://bv4template.blogspot.com/
İndirme Adresi : https://github.com/zaferzent/bloggerbootstrapv4template/
- Bootstrap JavaScript kaynakları eklendi.
- Menü değiştirildi (Bootstrap'ın nav olan bileşeni yerine responsive olan navbar kullanıldı)
- Gereksiz kod temizliği yapıldı.
* Yeni sürüme GitHub üzerinden erişilebilir.
Bootstrap Blogger Teması
Bootstrap blogger temasını, Twitter tarafından geliştirilen Bootstrap CSS kütüphanesinin şu anda beta aşamasında olan 4.sürümü ile hazırladım. Genel olarak sade olan temaya ekstra olarak responsive menü (açılır menü) ve resmi sosyal paylaşım butonları ekledim.Önizleme : http://bv4template.blogspot.com/
İndirme Adresi : https://github.com/zaferzent/bloggerbootstrapv4template/
05.06.2019 v1.1 Güncellemesi
- Bootstrap JavaScript kaynakları eklendi.
- Menü değiştirildi (Bootstrap'ın nav olan bileşeni yerine responsive olan navbar kullanıldı)
- Gereksiz kod temizliği yapıldı.
* Yeni sürüme GitHub üzerinden erişilebilir.