Web Günlüğü

Blogger plusone.js, widgets.js ve widget_css_bundle.css Nasıl Silinir

blogger plusone.js, widgets.js ve widget_css_bundle.css nasil 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

&lt;!--</body>--&gt;&lt;/body&gt;

Uyarı : Varsayılan blogger css dosyası kaldırıldığı zaman blog tasarımında sorunlara neden olabilmektedir.

Aspire Blogger Teması

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
aspire blogger teması mobil görünümaspire blogger teması 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

Blogger https ayarları nasıl yapılır

blogger https ayarları (ssl sertifikası)

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.

blogger ssl https ayarları adım 1

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.)

blogger ssl https ayarları adım 2

3. HTTPS Kullanılabilirliği işlendi ve artık HTTPS Yönlendirmesi aktif duruma geldi.
blogger ssl https ayarları adım 3

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.

blogger ssl https ayarları adım4

İş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 İHS Özel Alan Adı DNS Ayarları

Bootstrap Blogger Teması

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.

Twenty Seventeen (Yirmi Onyedi) Blogger Teması

Twenty Seventeen (Yirmi Onyedi) Blogger Teması
Twenty Seventeen (Yirmi Onyedi) Blogger Teması son uyarlamış olduğum bir WordPress teması. Twenty Seventeen isminden de anlaşılacağı üzere meşhur WordPress blog sisteminin, WordPress geliştiricileri tarafından her yıl seri şekilde çıkardığı temalardan sonuncusu.

Aslında bu temayı uyarlayalı çok zaman olmasına rağmen ne kullanmaya ne de paylaşmaya fırsat bulamadım. Bir de tabi tema kodları ile ilgili yaşadığım sorunlar da bu sürenin uzamasına neden oldu.

Tema mobil uyumlu olup elimden geldiğince bire bir (yorum formu tasarımı dahil) entegre etmeye çalıştım. Fakat küçük eskiklikler ve hatalar bulunabilir.

Twenty Seventeen Teması ile ilgili notlar :



Sabit sayfaları tam genişlikte kullanmak için
<!-- For Full Width Page -->
<b:if cond='data:blog.url == &quot;http://blogger2017tema.blogspot.com/p/full-width.html&quot;'>
<style>#primary{width:100% !important} aside{display:none !important}</style>
</b:if>
kod bloğunu bulup turuncu olan yere tam genişlikte kullanılacak sayfa bağlantısı eklenmesi gerekiyor.

- Menü bileşini otomatik olup anlamadığım sebepten dolayı yerleşim sayfasında görünmüyor. Fakat blogger hesabına giriş yapılmış ise blog/site üzerinden (şaağıdaki resimde olduğu gibi) sayfalar eklenip çıkarılabiliyor.

Blogger Otomatik Sayfa Bileşeni

Tema Önizleme Adresi : http://blogger2017tema.blogspot.com/
Tema İndirme Adresi : https://yadi.sk/d/Qk3IKtKw3PXZJ4