2 Şubat 2019 Cumartesi

Blog Yazar Profilini Güncelleme Zamanı
Google+ hesabınız 2 Nisan 2019'da kullanıma kapatılacaktır.

Google Google+ sosyal medya hizmetini, hizmetteki hatalardan dolayı kullanıcı verilerini sızdırma nedeniyle durdurma kararı almıştı ve Google+ hizmetinin Mart 2019'da kapatılacağını duyurmuştu.

Google+ hizmetinin sona ermesi, Blogger'ı, G+ profilini, G+ widget'larını ve Google+ yorumlarını kullanan blog yazarlarını etkileyecek. Bu sebeple, G+ profilini kullananalarının blog profili 404 hatası ile karşılaşacak, çünkü G+ profil URL'si devre dışı kalmış olacak. Google+ widget'ları, butonları ve yorumları kullanılmayacak. Daha da kötüsü, Google+ yorumları Blogger yorumlarına taşınamaz ve mevcut yorumlar kaldırılmış olacak.


Blog yazarı profilinin 404 hata kodu almayacak şekilde güncellemenin zamanı. Google+ Blogger entegrasyonu 4 Şubat 2019'da sona erecek. 4 Şubat'tan itibaren artık yeni Google+ profilleri, sayfaları, toplulukları veya etkinlikleri oluşturamayacaksınız. 2 Nisan'da Google+ hesabınız ve oluşturduğunuz tüm Google+ sayfaları kullanıma kapatılacak ve ilgili içerikler tüketici Google+ hesaplarından silinmeye başlayacak. Google+ Topluluğunuza ait verileri indirip kaydedebilirsiniz.

Blogger profilinin güncellenmemesi durumunda, blog yazar profili anonim şekilde ve resim olmadan görünecektir. Bu yüzden en iyi yapmanız gereken 4 Şubat 2019'dan önce, profilinizi Google+ profilinden Blogger profiline güncellemelisiniz.

Google+ hesabınız 2 Nisan 2019'da kullanıma kapatılacaktır.

Profilinizi güncellemek için, Blogger kontrol panelinize giriş yapın ve ardından Ayarlar > Kullanıcı ayarları > Kullanıcı Profilini Blogger olarak seçin ve profil adınızı ekleyin ve bir sonraki adıma geçin. Kullanıcı ayarları için Blogger kontrol paneli sayfanızı yenileyin ve Blogger profilinizi düzenleyin. Öncelikle Blogger profil resminizi değiştirin (logo da ekleyebilirsiniz). Blogger profil resminizi daha önce eklemediyseniz, blog yazar proflinizin resim alanı boş görüntülenir.

Google+ hesabınız 2 Nisan 2019'da kullanıma kapatılacaktır.

Ayrıca, Blogger profilini değiştirmeniz durumunda, bu değişiklik Blogger hesabınızdaki tüm bloglar için geçerlidir. Blogger hesabınızda birkaç blog varsa bir blogda yalnızca bir profil değişikliği yapın, diğer blogların yazar profili de aynı Blogger profiline otomatik olarak geçecektir.

12 Aralık 2018 Çarşamba

Arama Sonuçlarındaki Tarihi Kaldırma ve Güncelleme Hatasını Giderme
Blogger SEO

Arama sonuçlarından blog yayınlarının yayınlanma tarihini kaldırılmanın nedeni, yayınların arama sonuçlarında eski veya yeni olarak görünmüyor olmasıdır. Bu, blog yayınlarının için olumlu bir etki oluşturacaktır. Çünkü Google'da arama yapanların büyük bir çoğunluğu daha yeni tarihlerde yayınlanmış olan yayınları arayacak olmasıdır.

Arama Sonuçlarında Görüntülenen Yayınlanma Tarihi Nasıl Kaldırılır?


Blogger bloglarının yayınların yayınlanma tarihini arama sonuçlarından kaldırmak için lütfen aşağıdaki adımları takip edin.

Birinci adım: Aşağıdaki Meta etiketlerini kopyalayın.

Meta Etikleri
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>

Meta etiketlerini blog sitenizin tema editör (tema kodları) arasında bulunan aşağıdaki kodun hemen altında ekleyin.

HTML "article"
<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

İkinci adım: Aşağıdaki kodu veya benzer kodu tema editör sayfanızda bulun (her temada aynı kod bulunmayabilir).

"abbr" HTML (permanent link)
<span>
<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'> <data:post.timestamp/>
</abbr>
</a>
</span>

Blogger SEO

Yukarıdaki kod, blog yayınlarının yayınlanma tarihini gösteren ve aynı zamanda tarihin arama sonuçlarında gösterilmesini sağlayan bir koddur.

Ancak bu kodu tamamen silmeyin, eğer silerseniz, "hatom" veri yapısı için Google Search Console'da "eksik:güncelleme" gibi bir hata görünür. Bu hatalara sebebiyet vermemek için yukarıdaki kodu aşağıdaki kod ile değiştirin (bu koda benzer birden fazla kod bulunuyorsa hepsini değiştirin).

"abbr" HTML (updated)
<abbr class='updated' expr:title='data:post.timestampISO8601'/>

Değişiklikleri yaptıktan sonra tema editör sayfanızı kaydedin.

SEO'yu Olumsuz Yönde Etkiler Mi?

Yukarıdaki değişiklikler Blogger sitenizi SEO yönenden veya farklı bir olumsuzluk yönünden etkilemez. Çünkü blog içeriklerinin yayınlanma tarihlerini gösteren zaman damgasını tamamen kaldırmadık. Yayınlanma zamanını arama motorlarına bildiren meta etiketlerini kullanmış olduk.

Kısa Bilgiler

Yukarı adımları tamamladıktan sonra, arama sonuçlarında gösterilen yayınlama tarihi hemen kaldırılmaz. Google'ın, arama sonuçlarındaki yayınlama tarihini kaldırmak için zamana ihtiyacı vardır. Bu nedenle, yayınlanma tarihinin arama sonuçlarından kaldırıldığını görmek için düzenli olarak kontrol edin.

Blog Yayınları İçerisine Otomatik Reklam Ekleme Kodu

10 Aralık 2018 Pazartesi

Blog Yayınları İçerisine Otomatik Reklam Ekleme Kodu
Blogger Google Adsense Reklam Kodları

Blog yayınları içerisine Google Adsense reklam birimi / alanı nasıl eklenir ve reklam birimleri otomatik olarak nasıl görüntülenir? Blog yazıları içerisine Google Adsense reklam birimi eklemek için daha önce paylaşmış olduğum makalelerde belirtilen bilgiler ile hemen hemen aynı bilgiler.

Blog yayınlarına manuel olarak Adsense reklam birimi eklemek için Adsense Yazı İçi Reklamlarını Blog Yazılarına Ekleme makalesini paylaşmıştım. Bu eklenti de daha önceki eklentilerden daha düzenli ve Blgger kodlamasına daha uyumludur. Eski eklentilerde reklam birimlerini eklemek için <data:post.id/> kodunu kullanıyorduk, ancak bu metot blog sayfalarında birden fazla ID oluşmasına ve arama motorları tarafından sayfa içeriklerinin hatalı taranmasına neden oluyordu.

Şimdi blog yazılarına reklam eklemek için biraz daha gelişmiş ve farklı olan denklem, yazı içerisindeki paragraflardan sonra 2 (iki) Google Adsense reklam biriminin otomatik olarak görüntülemesini sağlayacak.

Blog Yazılarına Otomatik Reklam Kodu Nasıl Eklenir?


Blogger tema kodları arasında (blog yazılarınızın gövdesini oluşturan) aşağıda belirtilen koda benzer kodlar yer almakta. Tema kodlarınız arasında bu koda benzer birden fazla kod bulunabilir, ancak veri konumlandırma etiketleri kullanacağımızdan dolayı bu sorun değil.

HTML (İçerik Gövdesi)
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<data:post.body/>
</div>

Yukarıdaki kodu blog sitenizin tema kodları arasında bulun ve aşağıdaki kodu bulmuş olduğunuz kodun </div> kapanış etiketinden hemen sonra ekleyin.

Otomatik Reklam Birimi / Alanı Kodu
<b:if cond='data:view.isPost'>
<div class='inArticle inArticle1' id='inArticle1'>
<!-- Ads reklam kodu alanı 1 -->
</div>
<div class='inArticle inArticle2' id='inArticle2'>
<!-- Ads reklam kodu alanı 2 -->
</div>
<script type='text/javascript'>
function insertAfter(tbh,tgt) {
var prt = tgt.parentNode;
if (prt.lastChild == tgt) {prt.appendChild(tbh);}
else {prt.insertBefore(tbh,tgt.nextSibling);}}
var tgt = document.getElementById(&quot;post-body-<data:post.id/>&quot;);
var articleAds1 = document.getElementById(&quot;inArticle1&quot;);
var articleAds2 = document.getElementById(&quot;inArticle2&quot;);
var showAds1 = tgt.getElementsByTagName(&quot;br&quot;);
var showAds2 = tgt.getElementsByTagName(&quot;p&gt;&quot;);
if (showAds1.length &gt; 0) {insertAfter(articleAds1,showAds1[2]);}
if (showAds2.length &gt; 0) {insertAfter(articleAds1,showAds2[2]);}
if (showAds1.length &gt; 0) {insertAfter(articleAds2,showAds1[8]);}
if (showAds2.length &gt; 0) {insertAfter(articleAds2,showAds2[8]);}
</script>
</b:if>

Reklam birimlerinizin yazı içerisinde daha düzenli görüntülenmesi için aşağıdaki CSS kodunu blogunuzun stil </style> dosyası içerisine ekleyin.

CSS
.inArticle{margin:0 auto 20px;display:block;overflow:hidden;width:100%;height:auto;text-align:center}

Açıklamalar ve Bilgilendirmeler

  • Birinci reklam birimi kodunuzu yerleştirin <!-- Ads reklam kodu alanı 1 -->
  • İkinci reklam birimi kodunuzu yerleştirin <!-- Ads reklam kodu alanı 2 -->
  • Reklam birimlerini kaçıncı paragraftan sonra görüntülemek istiyorsanız, aşağıdaki kodda belirtilen sıra sayı değerlerini ayarlayın.

Sıra Sayı Değerleri
if (showAds1.length &gt; 0) {insertAfter(articleAds1,showAds1[2]);}
if (showAds2.length &gt; 0) {insertAfter(articleAds1,showAds2[2]);}
if (showAds1.length &gt; 0) {insertAfter(articleAds2,showAds1[8]);}
if (showAds2.length &gt; 0) {insertAfter(articleAds2,showAds2[8]);}

Not: Sıra sayısı değeri arttıkça, reklam birimi görüntüleme alanı o kadar azalır.

Kod içerisinde belirtilen yerlere reklam birimlerinizi ekledikten ve belirtilen bilgiler doğrultusunda blog sitenize uygun şekilde düzenleme yaptıktan sonra tema editör sayfanızı kaydedin. Reklam kodlarınızı yeni oluşturduysanız kısa süre içerisinde reklamlarınız görüntülenecektir.

Tema kodlamaları bir birinden farklı olduğu için, yazı içi otomatik reklam eklentisi ile tema kodları ID uyum sorunu olabilir. Böyle bir durumla karşılaşanlara yardımcı olabilmemiz için, yorum formu üzerinde sorunlarını bize iletebilirler.

6 Ekim 2018 Cumartesi

Trends - Haber ve Magazin Duyarlı Blogger Teması
Blogger Temaları

Trends, birçok özellikleri olan haber ve magazin blogcuları için güzel bir Blogger teması. Duyarlı, modern, ilgi çekici ve özelleştirilebilir. Haber ve magazin blogları için tasarlanmış olan Trends teması ile tüm blog içeriklerini ana sayfada göstermek için farklı Widget özelliklerine sahip.


Blogger tema tasarımcısı özelliğini kullanarak tema renklerini kolayca değiştirebilirsiniz.
Trends tema dosyasını indirmek veya sahip olmak için, öncelikle blog sitemize abone olmalısınız ve yorum formunu kullanarak tema dosyasını talep etmelisiniz. Talepte bulunan blog takipçilerimize tema dosyaları belirtmiş oldukları mail adresine gönderilecektir.
Trends teması diğer özellikleri;

  • Mega Menü
  • Trend Menüsü
  • Duyarlı Reklam Alanları
  • Yapışkan Kenar Çubuğu
  • Açılır Kategori
  • Otomatik Ekran Boyutlandırma
  • Özel Video Bölümü
  • TimeAgo Desteği (Zaman)
  • Son Yorumlar Widget'ı
  • 4 Sütun
  • Feedburner Abone Widget'ı
  • Yazar Hakkında Bilgi
  • İlgili (Benzer) Yayınlar Widget'ı

Trends tema kurulum ve kodlama bilgileri için yorum formunu kullanarak bana ulaşabilirsiniz. Farklı Blogger temalarına da sahip olmak istiyorsanız tema koleksiyonlarını da inceleyebilirsiniz.

Blogger Tema Koleksiyonu Birinci Serisi

Blogger Tema Koleksiyonu İkinci Serisi

28 Eylül 2018 Cuma

Blogger Tema Koleksiyonu İkinci Serisi
Blogger Temaları

Merhaba arkadaşlar, bir önceki yazımızda Blogger tema koleksiyonunun birinci serisini yayınlamıştım. Blog sitemizi takip eden tüm blogcu arkadaşlarıma 25 adet blog temasını hediye ettim. Blogger tema koleksiyonunu seri olarak yayınlayacağımı söylemiştim. Ancak, tema koleksiyonu hazırlama ve düzenleme işlemlerinin uzun sürmesi nedeniyle, bu yazımızda 476 adet Blogger temasını ikinci serimiz olan bu yazımızda paylaşmaya karar verdim.



Blogger Tema Koleksiyonu İkinci Serisi içerisinde birbirinden farklı 476 adet Blogger teması bulunmakta ve 476 adet temanın tümü ücretli blog temasıdır. Temaların tümü orjinal dilde ve temalarda hiçbir şekilde düzenleme işlemi yapılmamıştır. Tema kod kaynaklarının tümü açık ve istediğiniz gibi tema kodlarını düzenleyebilirsiniz.

Blogger Tema Koleksiyonu (476 Adet Blogger Teması)


Tema kolaksiyonu içerisinde bulunan temalar ThemeForest ve Sora Templates gibi bir çok web sitesinde bulunan ücretli Blogger temalarıdır.
Tema koleksiyonunda bulunan tema dosyalarını indirmek veya sahip olmak için, öncelikle blog sitemize abone olmalısınız ve yorum formunu kullanarak tema dosyasını talep etmelisiniz. Tema dosyalarını, talepte bulunan blog takipçilerimizin belirtmiş oldukları mail adresine gönderilecektir.
Tema kurulumu ve kodları ile ilgili sorularınızı yorum formu üzerinden bize iletebilirsiniz. Lütfen kurulum ve kodlar ile ilgili sorularınız için iletişim formunu kullanmayınız. Yorum formu üzerinden sorulan sorulara yardımcı olabilecek arkadaşlarda destek verebilir.

Blogger Tema Koleksiyonu Birinci Serisi

NewsPlus - Haber ve Magazin WordPress Teması
NewsPlus - Haber ve Magazin WordPress Teması
NewsPlus - Haber ve Magazin WordPress Teması

NewsPlus, WordPress kullanıcıları için tasarlanmış haber, gazete, blog ve magazin gibi çok amaçlı kullanılan bir WordPress temasıdır.


NewsPlus e-dergi, online gazete, seyahat blogu, yemek tarifi blogu, moda dergisi yada kişisel blog web siteleri için muhteşem bir tema. BuddyPress, bbPress forumu, WooCommerce, TablePress, WPML ve daha birçok eklenti tema içerisinde yer almakta.

Blogger Tema Koleksiyonu Birinci Serisi

NewsPlus, en iyi SEO uygulamaları ve hızlı sayfa yüklenmesi optimize edilmiş kodlarla desteklenen temiz ve modern tasarımla oluşturulmuştur. Bu çok amaçlı WordPress teması, Google AdSense ve diğer reklam hizmetlerden en iyi gelir elde etmenize yardımcı olacak reklam alanlarına sahiptir.
NewsPlus WordPress temasını indirmek veya olmak için, öncelikle blog sitemize abone olmalısınız ve yorum formunu kullanarak tema dosyasını talep etmelisiniz. Talepte bulunan blog takipçilerimize tema dosyası belirtmiş oldukları mail adresine gönderilecektir.
Bir sonraki yazımızda blog takipçilerimiz için Blogger tema koleksiyonunun ikinci serisini paylaşacağım. Blogger tema koleksiyonunun içerisinde yüzlerce tema yer alacak. Böylece, blog takipçilerimiz mevcut blog siteleri ve yeni oluşturmak istedikleri blog siteleri için artık tema arayışında bulunmalarına gerek kalmayacak.

24 Eylül 2018 Pazartesi

Blogger Tema Koleksiyonu Birinci Serisi
Blogger Tema Koleksiyonu Birinci Serisi

Merhaba arkadaşlar, bu yazımızda Blogger Tema Koleksiyonunun birinci serisini sizlerle paylaşıyorum. Tema koleksiyonu içerisinde tümü ücretli olmak üzere 25 adet Blogger teması yer almaktadır. Ancak, bu ücretli Blogger temalarını, blog sitemizi sürekli takip eden ve abone olan ziyaretçilerimize hediye etmek için hazırladım.


Koleksiyon içerisinde bulunan temaların toplam değeri yaklaşık 2500 TL değerinde, blog takipçilerimiz daha değerli ve onlara hizmet vermek blog sitemizin zaten asıl görevi. Tema koleksiyonumuz 4 seriden oluşmakta ve aynı şekilde WordPress siteleri için de WordPress Tema Koleksiyonu oluşturuyorum.
Tema koleksiyonunda bulunan tema dosyalarını indirmek veya sahip olmak için, öncelikle blog sitemize abone olmalısınız ve yorum formunu kullanarak tema dosyasını talep etmelisiniz. Talepte bulunan blog takipçilerimize tema dosyaları belirtmiş oldukları mail adresine gönderilecektir.
Blogger tema paylaşımımız bu seriler ile sınırlı değil, daha bir çok blog temasını yine takipçilerimiz için özel olarak paylaşmaya devam edeceğim. Bayan blogcu arkadaşlar için de bir birinden kaliteli ve 1500 TL değerindeki moda ve kozmetik bloglarına değer katacak Blogger temalarını paylaşacağım.

Blogger Tema Koleksiyonu Birinci Serisi


Birbirinden farklı özelliklere ve tasarıma sahip Blogger temalarının kısa açıklamaları aşağıda paylaştım. Koleksiyonda bulunan temaların hesi orjinal Blogger temasıdır.
TEMALAR
AeroMag Blogger Teması: Modern görünümlü tasarımı ile bir çok özelliğe sahip duyarlı bir teması.
Sevita Blogger Teması: Teknoloji ve magazin blogcularının en çok tercih ettiği blog temalarından biri.
Maxxiz Blogger Teması: Çekici bir renk kombinasynu ve etkileyici profesyonel birçok özelliğe sahip bir blog teması.
Active Mag Blogger Teması: Duyarlı tasarımı ve görünümü ile gazete, dergi ve haber blogcuları için ideal bir blog teması.
Adamz Blogger Teması: Magazin blogcuları için mükemmel bir tasarıma sahip duyarlı blog teması.
Agista Blogger Teması: Haber ve kişisel blog siteleri için tasarlanmış bir blog teması.
Apriezt Blogger Teması: Bir çok özelliğe sahip kullanış ve duyarlı bir blog teması.
Avoid Blogger Teması: Her türlü web tarayıcısı ve telefon, tablet ve bilgisayar gibi tüm elektronik cihazlar ile uyumlu bir blog teması.
Axact Blogger Teması: Dergi, haber, spor, teknoloji ve oyun gibi çok amaçlı blog siteleri için tasarlanmış bir blog teması. Modern, duyarlı ve SEO uyumlu esnek bir tarz ile tasarlanmış Blogger temasıdır.
BMAG Blogger Teması: Magazin blogcuları için tasarlanmış tüm cihazlar ile uyumlu özelleştirilebilir bir blog teması.
Deco Mag Blogger Teması: Magazin blogcuları için düz renkler ile tasarlanmış modern bir blog teması.
Flat Mag Blogger Teması: Magazin ve kişisel blog temaları için tasarlanmış sade bir blog teması.
Geek Press Blogger Teması: Haber ve magazin blog siteleri için tasarlanmış duyarlı bir blog teması. Herhangi kod eklemeden kolayca düzenlenen kısa magazin haberleri için en ideal blog temalarından biri.
Genova Blogger Teması: Müthiş yönetici paneli ile bir çok benzersiz widget özellikleri sayesinde istediğiniz gibi özelleştirebileceğiniz bir blog teması.
Gonzo Blogger Teması: HTML5 ve CSS3 teknikleriyle kodlanmış SEO uyumlu bir blog teması.
MovieKhor Blogger Teması: Film, dizi ve video blogcuları için tasarlanmış bir blog teması.
NanoMag Blogger Teması: Magazin ve haber blog siteleri için özel olarak tasarlanmış duyarlı blog teması.
Newsly Blogger Teması: Haber, magazin ve kişisel blog siteleri için tasarlanmış düz bir stile sahip duyarlı blog teması.
Ovation Blogger Teması: Magazin, haber ve gazete blog siteleri için en verimli blog teması. Kategorilere ayrılmış etiket widget'ı ve basit düzen değiştirme özelliği ile blogcuların ihtiyaçları karşılayan fonksiyonel bir blog teması.
Rifqiy Blogger Teması: Çekici bir renk kombinasyonu ve etkileyici profesyoneller birçok özelliğe sahip blog teması.
Seo Boost Blogger Teması: Her türlü gazete, dergi, portal ve kişisel blog sitesi için özel olarak tasarlanmış bir blog teması.
Sevida Blogger Teması: Olabildiğince esnek ve kendine özgü widget özellikleri ile blogculara farklı hazmetler sunun bir blog teması.
SNews Blogger Teması: Magazin, haber ve gazete blog siteleri için en etkili blog teması. Magazin blog sitelerinin ihtiyacı olan birçok özelliğede sahip.
Syahira Blogger Teması: Duyarlı bir düzene sahip ve diğer blog temaları ile aynı özelliklere sahip, ancak görünüm olarak farklı bir tema kullanmak isteyen blogcular için önerilen bir blog teması.
Techy Blogger Teması: Haber, yazı ve kısa bilgileri takipçileri ile paylaşmak için tema arayan blogculara özel olarak tasarlanmıştır.
Blogger tema koleksiyonu paylaşımlarımız sadece bu seri için 100 adet tema ile sınırlıdır. Birbirinden değerli farklı tarzda Blogger temalarını yine bu şekilde tema koleksiyonu olarak paylaşmaya devam edeceğim. Paylaşmış olduğumuz tema koleksiyonları dışında ücretli olarak paylaşacağımız mobil uygulamalı ve bu zamana kadar paylaşılmış olan Blogger temalarından farklı ve yepyeni Blogger tema tasarımlarını da blog sitemizde paylaşacağım. Çok yakın zamanda blog sitemizde ve blog sitemize bağlı olan blog sitelerinde, blogculara daha iyi hizmet sunmak için yenilenme çalışmalarımız var. Tüm blog kullanıcıları için Adsense dışında para kazandırma çalışmalarımızda var, gelişmeleri blog sitemizden duyuracağım.

18 Eylül 2018 Salı

Blogger Yönetim Paneli Hakkında Detaylı Bilgiler
Blogger Kumanda Paneli Hakkında Detaylı Bilgiler

Blogger Yönetim Paneli Hakkında Bilgiler - Blogger kullanıcılarının yönetmiş oldukları blog sitelerini daha iyi yönetmek ve blogu anlamak için, blog yönetim paneli hakkında ayrıntılı bilgileri sizlerle paylaşmak istedik. Blogger sitesi açmayı bir kullanıcı zaten biliyor, ama yeni başlayanlar için kısaca bu konuya değinelim;


Blogger sitesi açmak için öncelikle bir Gmail hesabı oluşturmalısınız. Oluşturduğunuz Gmail hesabı ile Blogger.com'a giriş yaparak ilk blogunuzu oluşturabilirsiniz. Bu yazımı blogunuzu oluturduktan sonra yapmanız gerekenler ile ilgili önemli bilgileri size aktarmak için oluşturduk.

Blogger Yönetim Paneli ve Bölümleri


Blogger Yönetim Paneli 11 bölümden oluşan her bir bölümü kendi içerisinde farklı özelliklere sahiptir. Blogunuzda yayın paylaşmadan önce bu yazımızı tamamen okumanızı tavsiye ederiz.

A- Kayıtlar: Yönetim panelinde bulunan yayınlar bölümü blog sitesinde paylaştığınız yayınlar yer almaktadır. Bu bölümde yayınlar ile ilgili tüm bilgilere ulaşabilirsiniz. Yayınların yayınlanma tarihlerine, görüntülenme sayılarına ve yorum sayılarına buradan ulaşabilirsiniz. Bu bölümde yer alan yayınların hemen altında bulunan sekmeleri kullanarak veya sayfanın üst kısmında bulunan araç çubuğundan yayınları düzenleyebilir, önizleme yapabilir veya silebilirsiniz.

Kayıt bölümü çerisinde bulunan özellikler;

a- Tümü: Blogunuzda kaç yayın olduğunu Kayıtlar sekmesinden öğrenebilirsiniz.

b- Taslak: Blogunuzda yayınlamadığınız yada yayınlanan içeriklerin taslağa dönüştürülmesi veya hazırlık aşamasında olan yayınlarınız bu bölümde yer almaktadır.

c- Yayınlananlar: Blogunuzda yayınladığınız tüm yayınları ve yayın sayısını buradan takip edebilirsiniz.

d- Yeni yayın: Kayıt bölümünü tıkladığınızda blogunuzda yayın oluturmak için sayfanın sol üst köşesinde bulunan Yeni yayın sekmesine tıklayarak yayın oluşturma sayfasını açabilirsiniz.

Blogger yayın oluşturma sayfası: Bu bölümden yayınlarınızı oluşturabilir ve yayınlarınıza özellikler ekleyebilir veya yayınlarınızı güncelleyebilirsiniz. Yayın oluşturma sayfası 2 bölümden oluşmaktadır; bu sayfanın sol üst köşesinde bulunan aşağıdaki resimde 1 ve 2 no ile gösterilen Oluştur ve HTML sekmeleri ile yayınlarınızı oluşturabilirsiniz.

Yayın: Blogger sitenizde oluşturduğunuz her bir içeriğe yayın denir. Bu yayınlar blogunuzun varlığını oluşturur. Daha doğrusu blogunuzun ne olduğunu gösterir.

Yayın başlığı: Blogunuzda oluşturduğunuz her bir yayın için eklenen ana başlıktır. Başlık ekleme kutusu yayın oluşturma sayfasının üst kısında yer almaktadır. Yayın başlıkları yayınlarınızın en önemli unsuru ve bunu özellikle söylemek istiyorum blog sitelerinde kullanılan en büyük ve en güçlü anahtar kelime yayın başlıklarıdır. Bu nedenle yayın başlıklarını oluştururken içeriğinize uygun olduğundan amin olun.

Araç çubuğu: Aşağıdaki resimde numaralandırılmış araç çubuğunda bulunan özellikleri inceleyin.

Blogger Yönetim Paneli Hakkında Bilgiler

1- Oluşturma sayfası blog yayınlarının oluşturulduğu resim ve yazı gibi bilgilerin eklendiği ve yayınların koordine edildiği bölümdür.

2- HTML bölümde ise eğer yayınlarınızda kodlu içerikler kullanmak istiyorsanız bu kodlu içerikleri HTML bölümden yapmalısınız.

3- Resimde de gördüğünüz gibi sağ ve sol ok işaretleri 4 numaralı sekmede bulunan yazı fontlarını değiştirme görevi yapmaktadır. Oluşturduğunuz yayına yazı eklediyseniz yazının bir bölümü yada tamamını seçerek bu bölümden yazı fontunu değiştirebilirsiniz.

4- Bir önceki madde ile açıkladığımız yazı fontlarının bulunduğu bölümdür. Bu bölümü kullanarak yazı fontlarını doğrudan da değiştirebilirsiniz.

5- Bu bölümde yer alan özellik blog yayınlarında oluşturduğunuz yazıların bilgi ve açıklama gibi yazı boyutları için kullanılan fontlar yer almaktadır. Bu font seçeneği diğer font seçeneğinden farkı font-size özelliğidir. Bu özellik yazı boyutlarının değiştirilmesini sağlamaktadır.

font-size türleri: 5 farklı yazı boyutunu değiştiren özellik yer almaktadır.

  • x-small
  • small
  • normal
  • x-large
  • xx-large

6- Bu bölümde yer alan özellikler yayın içerisinde oluşturulan başlıklarına h etiketi özelliği ekleme ve önem derecesine göre başlıkları sınıflandırmaya yarayan bölümdür. Bu bölüm içerisinde yer alan özellikler;

Başlık: Blog yayınları içerisinde oluşturduğunuz yazılara başlık özelliği kazandırmak için bu sekmeyi kullanırız. Bu yazı türü h2 etiketi özelliğine sahip olup yayının ana başlığından sonra gelen başlıklar için kullanılır.

Alt başlık: Bu özellikte yukarıdaki Başlık özelliğinden sonra gelen başlıklar için kullanılan h3 etiketine sahip özelliktir.

Alt başlık: Bu özelliği yukarıdaki özellikten ayırın h4 etiketine sahip olmasıdır. Yani h etiketlerini doğru sıralanması gibi h1, h2, h3, h4, h5, h6 gibi bu alt başlıklarda kullanım özelliğine göre yayınlarda kullanılmak üzere sıralanmıştır.

Normal: Düz yazı oluşturulan yazı görünümüdür. Açıklama, bilgi veya metinler.

Not: Blog sayfalarında h etiketlerinin doğru kullanılmasına özen gösterin. Yani h2 etiktinden önce h3 etiketini kullanmayın. Bir blog sayfası veya yayınında max. 1 adet h1, 4 adet h2, 4 adet h3 ve 6 adet h5 bulunması önerilir.

7- B etiketini eklemek istediğiniz yazı grubunu seçerek bu sekmeye tıklayın. B etiketi önemli açıklamalar veya yazılarınızı kalın-koyu yapmanızı sağlayan bölümdür.

8- Bu bölümde i etiketi yer almaktadır. Bu etiket ile yazılarınıza italik yazı özelliğini verebilirsiniz.

9- Blog yayınlarınızda altı çizili yazı özelliği kazandırmak için bu sekmeden faydalanabilirsiniz.

10- Blog yayınlarında üzeri çizili yazı oluşturmak için kullanılan özelliktir. Kullanımı çok az olan bu özellik genelde kod paylaşımında kullanılır.

11- Bu bölümde yer alan özellik yayınlarınıza eklediğiniz yazıların renklerini değiştirmek için kullanılır. Rengini değiştirmek istediğiniz yazı grubunu fare ile seçerek renk sekmesinden istediğiniz rengi ekleyebilirsiniz.

12- Bu özellik yukarıdaki özellikten farkı yazıların arkasına renk verme özeliğine sahip olmasıdır. Fare ile seçtiğiniz yazılarınızın arka plan rengini değiştirmek için kullanılan özelliktir.

13- Blog yayınlarına bağlantı eklemek için bu özellikten çokça faydalanılır. Özellikle yayınlarınızda bulunan yazılara bağlantı eklemek için, yine fare ile yazı grubunu seçerek bu bağlantı sekmesine tıklayın. Açılan bağlantı düzenleme penceresinde görüntülenecek metin URL (bağlantı) kutuları yer almaktadır. URL kutusuna eklemek istediğiniz bağlantıyı ekleyin ve pencerenin alt kısmında yer alan "Bu bağlantıyı yeni pencerede aç" ve "rel=nofollow noopener" özelliğini ekleyin kutularını da kullanabilirsiniz.

Bu bağlantıyı yeni pencerede aç: Bu özellik eklediğiniz bağlantıya tıklandığında yayının yeni bir sayfada açılmasını sağlamaktadır.

"rel=nofollow noopener" özelliği: Bu özelliği eklediğinizde Google (robotlar) tarafından bu bağlantı taranmaz ve takip edilmez. Kullandığınız bağlantı blogunuza ait bir bağlantı değilse yani dış link ise bu özelliği mutlaka ekleyin. Eğer blogunuza ait bir bağlantı ise (iç link) bu özelliği kullanmayın.

Ve blog yayınınıza bağlantıyı ekledikten sonra açılan pencerenin alt kısmında bulunan Tamam butonuna tıklayın.

14- Bu özellik blog yayınlarınıza resim veya görsel eklemenizi sağlayan sekmedir. Bu bölüm içerisinde yer alan özellikler.

Yükle: Bu özellik ile bilgisayarınızdan doğrudan bir dosya seçerek eklemenizi sağlamaktadır. Ben genelde bu özelliği kullanıyorum.

Bu blog'dan: Blogunuza daha önceden eklediğiniz resim veya görseli tekrardan kullanmanızı sağlayan özelliktir.

Google Albüm Arşivi'nden: Hesabınız üzerinden Google'a yüklediğiniz resimleri blogunuzda kullanmak için kullanılan özellik.

Telefonunuzdan: Google Mobile sayfasından Google + (Google Plus) özelliğini telefonunuza ekleyerek bu özelliği kullanabilirsiniz. Google + özelliğini telefonunuza eklemek için Google Mobile sayfasında bulunan Android için Google + 'yı indirin butonuna tıklayarak telefonunuza yükleyebilirsiniz.

Web kameranızdan: Bilgisayarınızın kamerasını kullanarak blogunuza resim veya görsel eklemenizi sağlayan özelliktir.

URL'den: Bu özellik ile web üzerinde bulunun resim veya görselin URL'sini açılan pencerede bulunan kutuya ekleyerek görüntüleyebilirsiniz.

15- Blogunuza bir video eklemek istiyorsanız bu sekmeden faydalanabilirsiniz. Bilgisayarınızdan, telefondan ve Youtube üzerinden bir video seçerek ekleyebilirsiniz.

Youtube: Eğer Youtube üzerinden bir video eklemek istiyorsanız, Youtube'ta bulunan bir video üzerine sağ tıklayın ve açılan pencerede Video URL'sini kopyala seçeneğini tıklayarak video URL'sini açılan pencerede bulnan kutuya ekleyerek görüntüleyebilirsiniz.

16- Özel karakter ekleme: Bu bölümü kullanarak yayınlarınıza simge veya özel karakter ekleyebilirsiniz.

17- Atlama aralığı ekleme: Bu özellik Blogger kendi içerisinde barındırdığı temalarda Devamı niteliğinde kullanılan özelliktir. Şuan pek kullanılmamaktadır. Yada ben öyle düşünüyorum.

18- Blog yazılarınızı sağa, sola, ortalama ve iki yana dayamak için bu bölümden faydalanabilirsiniz.

19- Blog yayınlarınızda sıralı yazı oluşturmak için bu sekmeden faydalanabilirsiniz. Yapmanız gereken sıralamak istediğiniz yazıları fare ile seçin bu sekmeye tıklayın. Eğer sıralı yazılarınızı manuel eklemek istiyorsanız daha önce yayınladığımız yazımıza göz atabilirsiniz;

Blog Yazı ve Yayınlarında Kullanılan Eklentiler

20- Blog yayınlarında sırasız yazı oluşturmak için bu sekmeden faydalanabilirsiniz. Yukarıdaki sıralı yazı oluşturma gibi fare ile yazılarınızı seçin ve bu sekmeye tıklayarak sırasız yazılarınızı oluşturabilirsiniz.

21- Blog yayınlarınıza blockquote kullanmak için bu sekmeden faydalanabilirsiniz. Blog yayınlarınıza blockquote eklemek için herhangi bir kod eklemenize gerek yok, oluşturduğunuz yayın içerinde blockquote içine almak istediğiniz bölümü fare ile seçin bu sekmeye tıklayın.

22- Blog yayınlarınızda altı çizili italik yazıları normal yazı formatına çevirmek için bu sekmeden faydalanabilirsiniz.

23- Yazıların arakasına sarı renk eklemek için kullanılan Yazımı denetme butonudur. Yazıların arkasına sarı renk eklemek için buradan faydalanabilirsiniz.

Yayın ayarları: Bu bölümde blogunuzda oluşturduğunuz yayınlar ile ilgi önemli düzenlemeler yer almaktadır. Aşağıdaki resimde görünen yayın ayarları özelliklerini inceleyin;

Blogger Yönetim Paneli Hakkında Bilgiler

1- Etiketler: Blogger sitelerini bir kitap gibi düşünün, her kitap içerisinde ilk sayfalarda bulunan içindekiler sayfası kitabın haritasını oluşturmaktadır. Hangi konu kaçıncı sayfada veya kitap içerisinde bulunan konular hakkında bilgiler verir. Şimdi bunu düşünerek blogunuzun bir kitap olduğu bu kitap içerinde yer almasını istediğiniz konuları belirli sayfalarda toplamak için Yayın ayarları içerisinde bulunan Etiketler bölümünden faydalanırız.

Burada şunu özellikle vurgulamak istiyorum blogunuza eklediğiniz etiketler anahtar kelime görevi işlevini üstlenmez, bu etiketler blogunuzun kategorilere ayrılmasına, blog içi dolaşımı kolaylaştırmaya ve Google robotlarının blogunuzu anlamasına yardımcı olmaktadır. Yani blogunuzda bulunan içeriklerin doğru indekslenmesi açısından çok büyük görev üstlenmektedir. Bir çok blog yazarı bu bölüme 5-6 etiket eklemekte hatta 8-9 etiket ekleyen blog yazarları var. Bu çok yanlış bir kullanım ve daha sonraları bu etiketler başınıza iş açabilir. Her yayın için yayın içeriğine göre 1 veya 2 etiket yeterlidir, en ideali ise 1'dir. Bir film sitesini düşünün, izlemek için ne tür bir film aradığınızı bulmak için sitede bulunan kategorilerden faydalanırsınız, sizin aradığınız film türü aksiyon ve bunu aksiyon kategorisi içerisinde bulunan filmlere ulaşmak için bu kategoriye tıklarsınız. Eğer siz aksiyon türü filmi aşk kategorisi içerisine eklerseniz bu film aşk türü film kategorisinde görüntülenir ve çok anlamsız bir durum ortaya çıkar. Şimdi söylemek istediğimi daha iyi anladınız sanırım.

2- Program yapma: Bu bölüm 2 farklı seçenek bulunmaktadır;

Otomatik: Oluşturduğunuz yayını sağ üst köşede bulunan Yayınla butonuna tıklayarak doğrudan yayınmanızı sağlayan tanımlı seçenektir.

Tarih ve saati ayarlayın: Bu seçeneği seçtiğinizde hemen alt tarafta tarih ve saat dilimi görüntülenmektedir. Eğer oluşturduğunuz yayını ileri bir tarih veya saatte yayınlanmasını istiyorsanız buradan yayınlanma tarihi ve saatini ayarlayarak istediğiniz tarih ve saate planlayabilirsiniz. Bu yayın Yönetim paneli Kayıtlar bölümünde Planlı olarak görünecektir. İlgili tarih ve saatte yayınlandığında yayınlandı olarak görünecektir.

3- Kalıcı bağlantı: Bu bölümde oluşturduğunuz yayına ait bağlantı yani blogunuzda bu yayının açıldığında tarayıcınızın arama kutusunda görünen URL bağlantısıdır. Yani yayının barındırıldığı URL'dir.

Otomatik Kalıcı Bağlantı: Bu bağlantı siz yayını oluşturduğunuzda otomatik olarak oluşmaktadır.

Özel Kalıcı Bağlantı: Eğer yukarıdaki otomatik bağlantı yerine oluşturduğunuz bir özel bağlantı ile yayının açılmasını istiyorsanız bu bölümden Özel Kalıcı Bağlantı'nızı oluşturabilirsiniz. Eğer Özel Kalıcı Bağlantısı oluşturmayı bilmiyorsanız bu bölümde değişiklik yapmayın.

Blog Yayınlarının Özel Kalıcı Bağlantı SEO Ayarları

4- Konum: Bu bölümde Google Maps ile yayınlarınıza konum ekleyebilirsiniz. Menünün hemen üst kısmında bulunan arama kutusu ile yer belirleyebilirsiniz.

5- Arama açıklaması: Bu bölüm oluşturduğunuz yayınların arama motorları üzerinde görünmesini ve aramalarda yayınlarınızın görünürlüğünü sağlayan açıklamalardır. Yukarı da Etiketler bölümünden bahsetmiştik, şimdi bu 2 özelliğin daha iyi anlaşılmasını sağlayalım. Arama açıklaması, blogunuzda oluşturduğunuz yayınların en güçlü anahtar kelimesini oluşturmaktadır. Blogunuzda yayınlandığınız yayınların arama motorlarında görünmesini sağlamaktadır. Bu bölüme eklediğiniz açıklamalar arama motorlarında aşağıdaki resimde görüldüğü gibi görünmektedir.

Blogger Yönetim Paneli Hakkında Bilgiler

Yukarıdaki resimde gördüğünüz gibi Arama açıklaması bölümüne gereksiz uzun açıklamalar ekleyerek aramalarda görünürlüğünün yok olmasına sebebiyet vermeyin. Arama açıklamasını bölümüne oluşturduğunuz yayının başlığını ekleyebilirsiniz. Çünkü başlık ve arama açıklaması yayınlarınızın en büyük anahtar kelimesidir. Bu nedenle yayınlarınıza arama motorları üzerinden doğrudan ulaşılması için, arama açıklamanızı aşağıdaki örnekte olduğu gibi yapabilirsiniz;

Örnek: Arama açıklamanızı aşağıdaki gibi oluşturabilirsiniz.

  • Yayın Başlığı - Blog Adı
  • Yayın Başlığı | Blog Adı
  • Yayın Başlığı / Blog Adı

Yukarıdaki resimde gördüğünüz gibi arama açıklamasının hemen altında blog URL'sinden sonra Etiketler yer almaktadır. Yani blogumuzda bir tema paylaştık ve bu temayı Blogger Temaları kategorisine eklemek için sadece Blogger Temaları etiketini ekledik, eğer buraya birden fazla etiket eklemiş olsaydık hem görüntü kirliliği oluşturmuş hemde blogunuzun arama motorlarınca anlaşılmasında karışıklılığa neden olacaktık. Bu bölümleri doğru kullanmanızı tavsiye ediyorum çünkü blogunuzun ilerleyen dönemlerde sıkıntılar yaşamaması ve tüm yayınlarınızı tekrardan düzenlemek zorunda kalmamanız açısından bu bilgilere yer vermeyi amaçladık.

Blogger Temel Bilgi ve Arama Açıklaması Ekleme

6- Seçenekler: Bu bölümde yayınlarını oluştururken değişiklik yapmayın, eğer HTML bölümden yayınlarınıza kod eklemek istiyorsanız ve kod durumuna göre bu bölümden değişiklikler yapabilirsiniz.

7- Özel Robot Etiketleri: Bu bölüm ile herhangi değişiklik yapmayın. Yönetim panelinde bulunan Ayarlar > Arama tercihleri sayfasında bulunan Gezginler ve Dizin Oluşturma bölümünde yer alan Özel robots.txt içerisine Google Search Console'den almış olduğunuz txt dosyası ve Özel robot başlık etiketleri içerisinde bulunan Yayınlar ve Sayfalar için Varsayılan Ayar bu bölümde görünmektedir.

Blog Header Özel Başlık Robotu Ayarlama

B- İstatistikler: Bu bölümden blogunuzun görüntülenme verileri ile ilgili istatistikler yer almaktadır. Bu bölümden blogunuzun sayfa görüntülenme, içerik görüntülenme sayıları ve tarik kaynaklarını görüntüleyebilirsiniz. Bu bölümde 4 farklı istatistik sayfası bulunmaktadır.

1- Önizleme: Bu sayfada blogunuzun günlük, haftalık aylık ve tüm zamanlar olmak üzere faklı zaman aralıklarında blogunuzun görüntülenme sayılarına ulaşabilirsiniz.

2- Kayıtlar: Bu sayfada yer alan bilgiler blogunuzda bulunan yayınların ve sayfaların görüntülenme sayılarını gösterilmektedir. Bu sayfada da Önizleme sayfasındaki gibi ayrıntılı olarak yayın istatistiklerine ulaşabilirsiniz.

3- Trafik kaynakları: Bu sayfada blogunuzun trafik kaynakları istatistiklerine ulaşabilirsiniz. Blogunuza hangi URL'ler üzerinden, hangi sitelerden ve arama anahtar kelimelerine ulaşabilirsiniz. Sayfanın sağ üst köşesindeki araç çubuğundan blogunuzun farklı zamanlardaki trafik kaynaklarına ulaşabilirsiniz.

4- Kitle: Bu sayfada blogunuzun hedef kitlesi hakkında istatistik bilgileri yer almaktadır. Blog sitenizin 3 farklı sayfa görüntülenme kaynağı hakkında bilgilere ulaşabilisiniz;

  • Ülkelere Göre Sayfa Görünümleri
  • Tarayıcılara Göre Sayfa Görünümleri
  • İşletim Sistemlerine Göre Sayfa Görünümleri

C- Yorumlar: Yorumlar sekmesinde yayınlanan, onay bekleyen ve spam olmak üzere 3 farklı yorum kontrol seçeneği bulunmaktadır.

D- Kazançlar: Blogunuz için Adsense başvurusunun yapıldığı sayfadır. Adsense başvuru yapmak istiyorsanız Adsense hesabına geç butonuna tıklayın ve açılan Adsense başvuru sayfasındaki gerekli talimatları tam ve doğru olarak doldurun ve başvurunuzu gönderin. Blogunuz ile ilgili Adsense başvurusu yapmadan önce;

AdSense'e katılmak için uygunluk politikasını mutlaka okuyun.

Blogunuz ile ilgili Adsense başvurusu onaylanmadı ve gelen mailde yetersiz içerik belirtiliyorsa, sizin için yeterli içerik oluş olabilir. Bu blogunuzun Google robotları tarafından ne olduğu tam olarak tanımlanmamış anlamına gelmektedir. Bunun için biraz daha beklemelisiniz, yaklaşık 15 - 20 gün sonra tekrar başvurun.

E- Kampanyalar: Bu bölümden blogunuzun Google AdWords ile reklamını yapmak istiyorsanız Şimdi başlayın butonuna tıklayarak Google AdWords'de reklamınızı oluşturun. En az 100 TL olacak bütçe ile blogunuzun Google AdWords'e reklamını yapabilirsiniz.

F- Sayfalar: Bu bölümde blogunuzda oluşturmak istediğiniz sabit sayfalar yer almaktadır. Henüz blogunuzda sabit bir sayfa oluşturmadıysanız, blogunuzun yönetim panelinden Sayfalar sekmesine tıklayın. Açılan sayfanın üst kısmında bulunan araçlar menüsünden Yeni sayfa butonuna tıklayarak sayfanızı oluşturabilirsiniz. Blog için oluşturulması gerek sayfalar;

  • Blog hakkında sayfası (Hakkımda)
  • Blog gizlilik sayfası (Gizlilik)
  • Blog gizlilik politikası sayfası (Gizlilik Politikası)
  • Blog kullanım şartları sayfası (Kullanım Şartları)
  • Blog yasal uyarı sayfası (Yasal Uyarı)
  • Blog kaynak ve destek sayfası (Kaynak ve Destek)
  • Blog iletişim sayfası (İletişim)
  • Blog sıkça sorulan sorular sayfası (S.S.S.) (YENİ)
  • Blog arşiv sayfası (Arşiv)
  • Blog haberleri ve duyuru sayfası (Haber ve Duyuru) (YENİ): Blog haber ve duyuru sayfası oluşturmanız için yeni bir çalışmamız mevcut en kısa sürede sizlerle paylaşacağız.
  • Blog google sayfası (Google) (YENİ): Blog google sayfası sayfası oluşturmanız için yeni bir çalışmamız mevcut en kısa sürede sizlerle paylaşacağız.
  • Blog kategori içerikleri sayfası (Kategori) (YENİ): Blog kategoriler sayfası oluşturmanız için yeni bir çalışmamız mevcut en kısa sürede sizlerle paylaşacağız.
  • Blog yorum sayfası (Yorumlar YENİ): Blog yorumları sayfası oluşturmanız için yeni bir çalışmamız mevcut en kısa sürede sizlerle paylaşacağız.

Blogunuzda oluşturabileceğiniz yukarıdaki sayfalar hakkında daha fazla bilgi şuanda veremiyoruz. En kısa sürede blogumuzda yayınlayacağız, hatta blogumuzda da kulanmaya başlayacağız. Özellikle şunu belirtmek istiyorum ki blogunuzda kullanabileceğiniz bir birinden özel eklentileri sizler için hazırlıyoruz.

G- Yerleşim: Blogunuzun Gatget'lerinin bulunduğu kontrol panelidir. Burada bulunan bölümler;

1- Sık kullanılan simge: Özel favori simgesinin yüklendiği gatget, buraya ekleyeceğiniz PNG, SVG, JPEG veya DATA gibi resim dosyaları tam kare olmak zorundadır. Boyutları ise 18px-18px veya 19px-19px olacak şekilde eklemeniz uygun olacaktır. Çünkü bu simge tarayıcınızın en üst sekme başlığında görünen (favicon) simge logosudur.

2- Sayfa üstbilgisi gadget'ı: Bu gatget'in görevi blogunuzun başlık, blog tanımı (kısa açıklaması) ve logo düzenlemenize yardımcı olmaktır.

3- Blog kayıtları gadget'ı: Blogunuzun kayıklarının bulunduğu gatget'tir. Eğer blogunuzda bu gatget'i hala düzenlemediyseniz, aşağıdaki gibi bilgileri takip ederek güncelleyin. Yeni temalarda buradaki tüm seçekeleri düzenlemenize gerek yok, bazı önemli seçenekler hakkında bilgiler paylaşıyoruz.

Blog kayıtarını yapılandırma;

  • Ana sayfa seçenekleri: Bu seçenek ile blogunuzun ana sayfasında kaç adet yayın görüntülemek istiyorsanız yayın sayısını belirleyeceğiniz kısa yol yer almaktadır.
  • Kayıt sayfası seçenekleri: Burada birden fazla seçenek yer almaktadır. Ben sadece blogunuz için önem arz eden tarih ve zaman seçenekleri hakkında bilgilendirmek istiyorum. Bu Google tarafından yayınlarınızın yayınlanma tarihleri doğru algılaması sağlayacaktır. Aşağıdaki resimde gördüğünüz gibi tarih ve zaman diliminin aynı olmasını sağlayın, bu önemsiz görmeyin Google Yapısal Veri Test Aracı ile bu değişiklikleri yaparak blogunuzu kontrol edebilirsiniz.

Blog kayıtarını yapılandırma

4- Gatget: Yerleşim sayfasında bulunan gatget'ler ile blogunuzu daha kullanışlı yapmak için önemli hizmetler sunmaktadır.

Blogger'ın sunmuş olduğu temel gatget hizmetleri;

  • Adsense: Blogunuzda ilgili reklamları görüntüleyerek gelir elde etmenizi sağlamaktadır.
  • Öne çıkan yayın: Blogunuzdaki özel bir yayını ön plana çıkarmanızı sağlamaktadır.
  • Blog araması: Ziyaretçilerin blogunuzda arama yapmasına izin vermeniz için arama kutusu eklemenizi sağlamaktadır.
  • HTML/JavaScript: Blogunuza üçüncü taraf işlevselliği veya başka bir kod eklemenizi sağlamaktadır. Adsense kodu veya diğer reklam kodarı ile son yayınlanan yayınlar menü kodlarını eklemenizi sağlamaktadır.
  • Profil: Ziyaretçileriniz için kendinizle ilgili bilgilrin görüntülemeyi sağlamaktadır.
  • Blog arşivi: Blogunuzda bulunan yayınların bağlantıları sayesinde, ziyaretçilerin blog'unuzda gezinmesini kolaylaştırmayı sağlar.
  • Sayfa üstbilgisi: Yukarıda açıklamıştık blogunuzun başlığı ve açıklamasının bulunduğu widget.
  • Resim: Bilgisayarınızdan veya web'deki herhangi bir siteden resim eklemenizi sağlamaktadır.
  • Etiketler: Blogunuzdaki tüm kayıt etiketlerini görüntülenmesini sağlamaktadır. Daha önce de açıklamıştık.
  • Sayfalar: Blog'unuzdaki bağımsız yani sabit sayfaların listesini blogunuzun ana sayfasında görünmesini sağlayabilirsiniz.
  • Bağlantı listesi: Ziyaretçileriniz için, favori sitelerinizin, blog'larınızın veya web sayfalarınızın bir koleksiyonunu oluşturmanızı sağlamaktadır.
  • Metin: Blog'unuza kısa mesaj eklemenizi sağlamaktadır. Blogunuzla ilgili bir haber yada bilgiyi ana sayfanızda paylamanızı sağlar.
  • Popüler yayınlar: Blog'unuzdaki en popüler yayınların listesini, yani blogunuzda en çok okunan yada görüntülenen yayınların ana sayfada görünmesini sağlar.
  • Blog istatistikleri: Blog'unuzun sayfa görüntüleme sayısını ve blogunuzun ne kadar popüler olduğunu gösterir.
  • Video çubuğu: Okuyucularınızın etiket duyarlı en çok izlenen YouTube kliplerinin görüntülenmesini sağlar.
  • Blog listesi: Bloglarınızı blogroll’uyla okuduklarınızı gösterin.
  • E-posta ile takip widget'i: Ziyaretçilerin, yayın gönderdiğinizde e-posta ile bilgilendirilmek üzere abone olmalarını sağlar.
  • İçerik takibi: Blogunuza RSS veya Atom içerik takibinden içerik eklemenizi sağlar.
  • Logo: Sayfanıza Blogger logosu eklemenizi sağlar.
  • Anket: Blogunuza bir anket ekleyerek ziyaretçilerinizin fikirlerini almayı sağlar. Bunu tüm blog kullanıcılarının yapması gerek bir çalışmadır.
  • Abonelik bağlantıları: Okuyucularınızın popüler içerik takibi okuyucuların gösterilmesini sağlar.
  • +1 Düğmesi: Blogunuza eklediğiniz Google +1 ile ziyaretçilerin, markanızı ve içeriğinizi hızla önermesini sağlar.
  • Google çeviri: Ziyaretçilerin, blog'unuzu farklı dillere çevirmesine yardımcı olur.
  • Liste: Blogunuzda bir liste oluşturmanızı sağlar.
  • Google+ üyeleri: Tüm Google+ kitleniz (kitlenizin boyutunu ve bazı tanıdık yüzleri) ve ziyaretçilere sizi Google+'da takip etme fırsatı sunar.
  • Google+ rozeti: Ziyaretçilerinize Google+'da olduğunuzu bildiren ve sizi tek bir tıklamayla takip etmelerini sağlar.
  • Atıf: Blog'unuzun atıf verilerini (telif hakkı) görüntüler.

Blogger'ın sunmuş olduğu diğer gatget hizmetleri;

  • İzleyiciler: Blogunuzu izleyen kullanıcıların bir listesini oluşturmanızı sağlar.
  • İletişim formu: Blogunuza bir İletişim eklemenizi sağlar.
  • Wikipedia: Bu gadget'ı kullanarak Wikipedia'da hızlı, rahat ve kolay bir şekilde makale veya tam metin araması yapabilirsiniz.


H- Şablon: Blogunuzun şablonunuzun yer aldığı, blog şablonunuzun özelleştirildiği ve değiştirildiği HTML düzenleme sayfasınız.

Blogger Özel Şablonlar Nasıl Yüklenir?

I- Ayarlar: Bu sayfada blogunuzun temel ve bazı ayarlarının yapıldığı menüler yer almaktadır. Bu bölümdeki ayarları blogunuzu ilk oluşturduğunuzda mutlaka yapmalısınız.

Temel ayarlar: Bu menüde temel, yayıncılık ve izinler gibi ayarlar yapılmaktadır.

1- Başlık: Blogunuzun başlığını düzenleme.

2- Açıklama: Blogunuza (maksimum 500 karakter) açıklama ekleme ve düzenleme.

3- Gizlilik ayarları: Burada blogunuzun arama motorlarında görünmesini ve listelenmesini istemek veya istememek.

Yayıncılık ayarları: Bu bölümde blognuzun domaini yer almaktadır.

Blogger Domain Ekleme ve Yönlendirme

Blogger www Yönlendirme Sorunu

HTTPS yönlendirme ayarları: HTTPS yönlendirme etkinleştirilmesi, bu seçeneğin etkinleştirilmesi blogunuzda bazı javaScript'lerin çalışmasını durdurabilir.

İzinler: Blogunuza yazar ve yönetici eklemenizi sağlar.

Blog okuyucuları: Blogunuzun okuyucu kitlesini belirlemeyi sağlar. Herkese açık, özel - yalnızca blog yazarları ve özel - yalnızca şu okuyucular seçenekleri mevcuttur.

Yorumlar ve paylaşım: Bu bölümde blogunuzun yorumlarını ve Google+ paylaşımlarının düzenlemesi yapılmaktadır.

1- Yorumlar: Blogunuzun yorumlarını mutlaka denetleyin. Yorumlar menüsünde kimler yorum yapabilir seçeneğini herkes (anonim kullanıcılar dahil) işaretleyin. Yorum denetleme her zaman olarak işaretleyin ve mail adresinizi ekleyerek sağ üst köşede bulunan ayarları kaydet butonuna taklayarak kaydedin.

2- Google+ yorumları: Bu seçeneği hayır olarak işaretleyin.

3- Google+'da paylaş: Paylaşmak istediğiniz sayfayı seçerek, yeni paylaşılan yayınlar Google+ profilinizde otomatik paylaşılsın seçeneğini işaretleyin değişiklikleri sağ üst köşeden kaydedin.

E-Posta: Blogger e-posta adresinizi oluşturun. Bu bölümde ayrıca belirli kişilere yayınlarınızın gönderilmesini sağlayabilirsiniz.

Dil ve biçimlendirme: Blogunuzun dil, saat dilimi, tarih başlığı, tarih damgası ve yorum damgası ayarlarını düzenleyin.

Arama tercihleri: Blogunuzun en önemli ayarlarından olan arama tercihleri blogunuzun indekslenmesi açısından önem arz etmektedir.

1- Meta etiketler: Bu açıklama blogunuzun arama motorlarındaki açıklamasıdır. Ve ayrıca arama açıklamasının etkinleştirilmesi ayınlarınızın arama açıklamasının eklemesini de sağlamaktadır.

2- Hatalar ve yönlendirmeler: Sayfanızda bulunamayan yada kaldırılan yayın ve sayfalar için özel içerik ve yönlendirme bağlantısı eklemenizi sağlar.

3- Gezginler ve dizin oluşturma: Bu menüde blogunuzun Google Search Console ayarları yer almaktadır.

Blogger Sitesini Google Search Console Ekleme

Blog Header Özel Başlık Robotu Ayarlama

Diğer ayarlar: Bu bölümde blogunuzla ilgili içerik yedekleme, blogu silme, içerik takibi, OpenID, özel içerik ayarı ve Google Analytics ID kodu ekleme ayarları yapılmaktadır.

Kullanıcı ayarları: Blog sitesini kullanıcı profili, blog dili ve e-posta bildirimleri (özellik duyuruları) ayarları yer almaktadır.

İ- Okuma Listesi: Bu bölümde izlemek istediğiniz blogların yayınları yer almaktadır. Eğer bir blogu izliyor yani takip ediyorsanız, bu bloga yeni bir yayın eklendiğinde bu sayfada görünmektedir. Sayfanın sağ tarafında bulunan İzlediğim Bloglar menüsü yer almaktadır. Bu menüyü düzenlemek ve yeni bir blog eklemek isiyorsanız Okuma Listesini Yönet butonuna tıklayın. Açılan sayfada izlediğiniz bloglar ve Ekle butonu yer almaktadır. İzlediğiniz bloglardan izlemeyi durdurmak ve kaldırmak için izlediğiniz blogun sağ tarafında bulunan izlemeyi durdur iconuna tıklayarak yapabilirsiniz. Eğer yeni bir blog izlemek istiyorsanız sağ üst köşede bulunan Ekle butonuna tıklayın ve izlemek istediğiniz blogun URL'sini ekleyerek sonraki adıma geçin. Eklediğiniz yani izlemek istediğiniz blogu ister kullanıcı adınız ile ister anonim olarak takip edebilirsiniz, bu seçeneklerden birini işaretleyin ve İzle butonuna tıklayın.

J- Yardım: Bu bölümde Blogger yardım merkezi yani kullanma klavuzu yer almaktadır.
Blogger AB Çerezleri Kullanma Bildirim Çubuğu'nu Özelleştirme
Blogger AB Çerez Kullanımı Bildirim Çubuğu Özelleştirme

Blogger kullanıcıları yakın zamanda, Avrupa Birliği (AB) yasaları uyarınca, Avrupa Birliği (AB) ziyaretçilerine bilgi verilmesi gerektiği hakkında kontrol panelinde bilgilendirildi. Bu nedenle, Blogger ekibi bu düzenlemeye uyulmasına yardımcı olmak için tüm bloglara (Google Analytics ve AdSense çerezlerinin kullanımı da dahil olmak üzere) otomatik olarak bir bildirim çubuğu ekledi.


Bu bildirim çubuğunun blog sitelerinde açıkça görülebilmesi ve yayıncıların sitelerinde çerezlerin kullanımı hakkında ziyaretçileri bilgilendiren bir özel bilgilendirme (çerez) çubuğu göstermediği sürece CSS ve javaScript (AdSense JS dosyası da dahil) dosyaları devre dışı bırakılır.

Blogger AB Çerez Kullanımı Bildirim Çubuğu Özelleştirme

Bu sorumluluk tamamen Blogger kullanıcılarına aittir.

Bu Uygulamaya Blogger Özel Alan Adları da dahil mi?

Evet, bu uygulamaya varsayılan ..blogspot.com kullanıcıları gibi özel alan adı kullanan blogcular için de dahil tüm Blogger kullanıcılarının uyması gerekir.

Blogger Özel Alan Adı ve Kullanmanın Faydaları Nedir?

Özel alan adı (.com, .net, org vb.) veya ccTLD (internet ülke alan kodu şuan Blogger'da kullanılmıyor) kullanan tüm Blogspot bloglarına otomatik olarak bildirim çubuğu gösterilecektir. Bir ziyaretçi Avrupa ülkerindeki bir tarayıcıdan bir blogu ziyaret ettiğinde sayfanın üst kısmında veya alt kısmında:

Blogger AB Çerez Kullanımı Bildirim Çubuğu Özelleştirme

Bu şekilde bildirim çubuğu görüntülenir.

AB Çerez Bildirimini Gizleyebilir veya Devredışı Bırakabilir miyiz?

Evet, ancak blogunuzda çerezlerin kullanımı hakkında ziyaretçileri bilgilendiren özel komut dosyaları kullanıyorsanız bunu yapabilirsiniz. Eğer, ziyaretçileri çerzlerle ilgili bilgilendirmek için bir komut dosyası kullanmıyorsanız, varsayılan Blogger çerez bildirimini kullanmak zorundasınız. Blogunuzda çerezlerin kullanımı hakkında ziyaretçilerinizi bilgilendirmeye özen gösterin. Bu uygulamaya uymayan blog kullanıcılarının blogları yasaklanmış sayılabilir (AB ülkeleri için).

Çerezler hakkında ziyaretçileri bilgilendirmek için, blogunuzda varsayılan Blogger çerez bildirimi dışında bir komut dosyası kullanıyorsanız ve bu komut dosyası iletisini de Gizlilik Bildirimi sayfanız ile (açıkça anlaşılır bir şekilde) ilişkilendirmişse, aşağıdaki komut dosyasını blogunuzun tema kodları arasında bulunan </head> veya &lt;/head&gt;&lt;!--<head/>--&gt; kodunun bir satır üzerine ekleyerek Blogger varsayılan bildirim çubuğunu devre dışı bırakabilirsiniz.

javaScript [Devre dışı bırakma]
<script type="text/javascript">
//<![CDATA[
cookieChoices = {};
//]]>
</script>

Blogger AB Çerezlerini Bildirme Çubuğunu Özelleştirme

Blogger AB çerezlerini bildirme çubuğu varsayılan görünümü aşağıdaki resimde olduğu gibi donuk renkelere sahip ve blog sitelerinin üst bölümünde görünmektedir.

Blogger AB Çerez Kullanımı Bildirim Çubuğu Özelleştirme

Bu görünüm bir çok blog kullanıcısı tarafından beğenilmiyor ve blog sitelerine uygun bir görünüm olmasını istiyor. Çerez bildirimi çubuğunun varsayılan renklerini değiştirmek ve blog sitenize uygun olacak şekilde düzenlemek için aşağıdaki adımları takip edin.

Blogger kontrol panelinde Tema > HTML'i Düzenle yolunu takip ederek tema editör sayfasını açın ve aşağıdaki CSS kodlarını </head> veya &lt;/head&gt;&lt;!--<head/>--&gt; kodunun bir satır üzerine ekleyin.

CSS
<style type='text/css'>
/*<![CDATA[*/
.cookie-choices-info{background-color:#fff!important;position:fixed!important;line-height:normal!important;left:0!important;right:0!important;bottom:0!important;font-family:inherit!important;box-shadow:0 -3px 16px -3px rgba(0,0,0,.75);-webkit-transform:translateZ(0)}
#cookieChoiceInfo .cookie-choices-inner{margin:auto!important;padding:16px!important;text-align:center!important}
.cookie-choices-info .cookie-choices-text{font-size:12px!important;color:#000!important;margin-bottom:16px;line-height:1.5}
.cookie-choices-buttons{margin-left:0!important;text-transform:uppercase}
.cookie-choices-info .cookie-choices-button{color:#fff!important;font-size:13px!important;margin-left:5px!important;padding:3px 6px!important;background-color:#438afe!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background-color:#ef690f!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:focus{background-color:#3c7ce5!important;text-decoration:none!important;transition:all .1s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2):hover,.cookie-choices-info .cookie-choices-button:nth-child(2):focus{background-color:#d65f00!important}
@media only screen and (max-width:640px){.cookie-choices-info .cookie-choices-text{display:block}.cookie-choices-buttons{margin-left:0!important}.cookie-choices-info .cookie-choices-button{margin-left:0!important}.cookie-choices-info .cookie-choices-button:nth-child(2){margin-left:5px!important}}
/*]]>*/
</style>

Çerez bildirim çubuğunun renkleri blog siteniz ile uyumlu değil ise CSS kodları içerisinde belirtilmiş olan renk kodlarını değiştirerek blogunuza uygun hale getirebilirsiniz. Düzenlemelerinizi yaptıktan sonra tema editör sayfasını kaydedin.

Ön İzleme

Blog sitenizde CSS ve javaScript harici dosya bağlantılarını devre dışı bıraktıysanız, Blogger ekibi tarafından otomatik olarak eklenen AB çerez bildirim çubuğu da devre dışı bırakılmıştır.

Blogger CSS ve Javascript Gibi Harici Dosya Bağlantılarını Devre Dışı Bırakma

Blogger ekibi tarafından eklenmiş olan AB çerez bildirim çubuğunu kullanmak istiyorsanız, aşağıdaki javaScript kodunu &lt;!--</body>--&gt;&lt;/body&gt; kodunun bir satır üzerine ekleyin.

javaScript
<script type="text/javascript">
//<![CDATA[
cookieOptions = {
msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
link: "https://www.blogger.com/go/blogspot-cookies",
close: "Got it!",
learn: "Learn More" };
//]]>
</script>

AB çerez bildirim javaScript dosyası içerisindeki bildiri metnini Türkçe olarak eklemeyin, çünkü bu bildirim çubuğu sadece AB ülkelerinde bulunan ve AB ülkesinde herhangi bir tarayıcıdan giriş yapıldığında görünecektir. Bu nedenle, javaScript içerisindeki metni Türkçe olarak ekleyen blog kullanıcılarının en kısa sürede değişiklik yapmaları gerekmektedir. JavasSript kodu içerisinde bulunan İngilizce metin aynen kullanılmalıdır.

Blogger AB çerez bildirim çubuğu kullanımı hakkında ayrıntılı olarak bilgiler verdim. Konu ile ilgili kafanıza takılan birşey varsa veya bu konuda yardıma ihtiyacınız varsa lütfen yorum formunu kullanarak bana ulaşabilirsiniz. İnşallah eskisinden daha güvenli bir blog sahibi olursunuz. Hepinize barış, sevgi, mutluluk ve hayırlı bir blog hayatı diliyorum! :)

10 Eylül 2018 Pazartesi

Blogger 404 Hata Sayfası Ana Sayfaya Yönlendirme Javascript Kodları
Blogger 404 Hata Sayfası Yönlendirme Kodları

Blog sitelerinin 404 Hata Sayfasını otomatik olarak ana sayfaya yöndirme javascript kodu ve özellikleri hakkında bilgiler paylaşacağım.



Bir çok blog sitesinde bazen aranan bir yayın veya sayfa bulunamadığında 404 Hata Sayfası veya Sayfa Bulunamadı gibi bilgi mesajları ile karşılaşılır. Bu durum genellikle popülerliğini veya süresi geçmiş sayfa ve yayınlar için sık karşılaşılan bir durum. Sayfa veya yayın silinmiş yada URL'sinde bir hata oluşmuş olabilir. Bunun nedenle, blog veya web sitesi yöneticileri, aranan hedef sayfa veya yayının bulunmadığından dolayı, 404 hata sayfası veya buna benzer bir bilgilendirme sayfası oluşturur.

404 ve bilgilendirme sayfalarına ana sayfaya dönmek için bir buton veya ilgili sayfayı ve yayını tekrar aramak için bir arama kutusu eklenir.

Blog sitelerinde 404 hata sayfasını otomatik olarak yönlendirmek için bir kaç ipucu vereceğim, böylece blog ziyaretçileri ana sayfaya dönmek için herhangi bir butona tıklamasına gerek kalmayacak.

Blogger 404 Hata Sayfası Otomatik Yönlendirme Kodları


Blog sitenize 404 hata sayfası yönlendirme kodu eklemek için aşağıdaki adımları takip edin.

Kodları blog sitenize eklemek için 2 farklı yol var. Bunlar;

Birinci yol: Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek tema editör sayfasınızı açın. Aşağıdaki javascript kodunu </body> veya &lt;!--</body>--&gt; &lt;/body&gt; kodunun bir satır üzerine ekleyin.

İkinci yol: Blogunuzun kumanda panaelinde Ayarlar > Arama tercihleri sayfasını açın ve "Hatalar ve Yönlendirmeler / Sayfa Bulunamadı Sayfası için Özel İçerik" Düzenleye tıklayın. Açılan kutu içerisine aşağıdaki javascript kodunu ekleyin.

javaScript [Sayfa 8 saniye sonra yönlendirilecek]
Yönlendirme kodunu tema kodlarınız arasına eklemek için aşağıdaki kodu kullanın.

<b:if cond='data:view.isError'>
<script>
setTimeout(function () {
window.location.replace("<data:blog.homepageUrl/>");
}, 8000); // Sayfa 8 saniye sonra yönlendirilecek.
</script>
</b:if>

Yönlendirme kodunu Arama tercihlerinde "Hatalar ve Yönlendirmeler" kullanmak için aşağıdaki kodu kullanın.

<script>
setTimeout(function () {
window.location.replace("<data:blog.homepageUrl/>");
}, 8000); // Sayfa 8 saniye sonra yönlendirilecek.
</script>

Blog ziyaretçileriniz 404 hata sayfasında bulunan bilgileri yeterli bir sürede okuyabilmesi için, yukarıdaki kod içerisinde bulunan otomatik yönlendirme süresini değiştirebilirsiniz. Kod içerisinde belirtilen 8000 değeri sayfanın 8 saniye sonra yönlendirileceğini gösterir (1 saniye = 1000).

Blogunuzun 404 hata sayfasını doğrudan yönlendirmek için aşağıdaki kodu kullanın.

javaScript [Doğrudan yönlendirme]
<b:if cond='data:view.isError'>
<script>
setTimeout(function () {
window.location.replace("<data:blog.homepageUrl/>");
});
</script>
</b:if>

Veya

<b:if cond='data:view.isError'>
<script>
window.location.replace("<data:blog.homepageUrl/>");
</script>
</b:if>

404 hata sayfası yönlendirme kodunu Wordpress'te de kullanabilirsiniz, tek yapmanız gereken aşağıdaki kodu 404.php bölümüne eklemeniz.

WordPress için [Sayfa 8 saniye sonra yönlendirilecek]
<script>
setTimeout(function () {
window.location.replace("<?php echo home_url('/'); ?>");
}, 8000); // Sayfa 8 saniye sonra yönlendirilecek.
</script>

Doğrudan yönlendirmek için aşağıdaki kodu kullanın.

WordPress için [Doğrudan yönlendirme]
<script>
setTimeout(function () {
window.location.replace("<?php echo home_url('/'); ?>");
});
</script>

Bu yazımızda Blogger ve WordPess 404 hata sayfası otomatik yönlendirme kodlarını paylaştım. Paylaşmış olduğum bilgiler hakkında görüşünüzü ve sorularınızı yorum formunu kullanarak bana iletebilirsiniz.

Blogger Yayınlarına Başlık Listesi veya İçindekiler Tablosu Ekleme

2 Eylül 2018 Pazar

Blogger Yayınlarına Başlık Listesi veya İçindekiler Tablosu Ekleme
Blogger'da Yayın Haritası veya İçindekiler Bölümü Oluşturma

Başlık listesi veya içindekiler tablosu, bir blog yayınında veya makalesinde yer alan konu veya bölümlerden oluşan listedir. İçindekiler eklentisi, blog yayın veya makalesi içeriğinin bir bağlantı grubu şeklinde dökümü oluşturan yani içerik başlıklarının yer aldığı içerik çubuğudur. Blog ziyaretçilerinin okumak istediği konunun hangi bölümünü seçeceğini kolaylaştırır.


Blog yayınlarının daha hızlı ve daha iyi anlaşılması için, başlık listesi veya içindekiler tablosu oluşturmak için aşağıdaki adımları takip edin.

Blogger Yayınlarına Başlık Listesi veya İçindekiler Tablosu Nasıl Oluşturulur?


Blogger hesabınızda oturum açın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki adımları uygulayın.

Birinci adım: Aşağıdaki CSS kodunu tema editör sayfasında bulunan </head> veya &lt;/head&gt;&lt;!--<head/>--&gt; kodunun bir satır üzerine ekleyin.

CSS
<style type='text/css'>
/*<![CDATA[*/
#light-contents{background:#fff0da;padding:10px 20px;border-radius:3px}
#contents_list{font-weight:700;cursor:pointer;margin:10px 0}
#contents_list:focus,#contents li:focus,.back_contents:focus{outline:none}
#contents_list svg{width:18px;height:18px;fill:#000;vertical-align:middle}
#contents li{background:transparent;margin:.2em 0 .2em 1em;cursor:pointer}
#contents ol li:before{left:-2em}
#contents li a{color:#000}
#contents li a:hover{color:#1e80ff}
#contents{display:block}
.back_contents{background:#2196F3;color:#fff;display:inline-block;text-align:right;float:right;margin:15px auto;font-size:14px;padding:2px 12px;cursor:pointer;border-radius:99em;transition:all .3s}
.back_contents:hover{background:#2d3435;color:#fff}
:target::before{content:';';display:block;height:40px;margin-top:-40px;visibility:hidden}
/*]]>*/
</style>

İkinci adım: Aşağıdaki jQuery kodunu tema editör sayfasında bulunan </body> veya &lt;!--</body>--&gt;&lt;/body&gt; kodunun bir satır üzerine ekleyin ve tema editör sayfasını kaydedin.

jQuery
<script type='text/javascript'>          
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>

Üçüncü adım: Aşağıdaki HTML kodu yayın editör sayfasının HTML bölümüne ekleyin.

HTML İçerik Başlık Listesi
<div id="light-contents">
<div id="contents_list" onclick="if (document.getElementById('contents').style.display === 'none') { document.getElementById('contents').style.display = 'block'; } else { document.getElementById('contents').style.display = 'none'; }" role="button" tabindex="0">İçindekiler <svg viewBox="0 0 24 24"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="contents">
<ol>
<li><a href="#article_head_1" title="Alt başlık 1">Başlık 1</a></li>
<li><a href="#article_head_2" title="Alt başlık 2">Başlık 2</a></li>
<li><a href="#article_head_3" title="Alt başlık 3">Başlık 3</a></li>
<li><a href="#article_head_4" title="Alt başlık 4">Başlık 4</a></li>
<li><a href="#article_head_5" title="Alt başlık 5">Başlık 5</a></li>
</ol>
</div>
</div>

Blog yayınlarınız içerisinde bulunan h2, h3, h4, h5, h6 ve b gibi başlık etiketlerini kullanabilirsiniz.

<h2 id="article_head_1">Başlık</h2>
<h3 id="article_head_2">Başlık</h3>
<h4 id="article_head_3">Başlık</h4>
<h5 id="article_head_4">Başlık</h5>
<h6 id="article_head_5">Başlık</h6>

Dördüncü adım: Blog yayınlarınızda oluşturmuş olduğunuz yayın bölümlerinin alt kısmına başlık listesine veya içerik tablosuna dönmek için bir buton eklemek için aşağıdaki kodu kullanın.

HTML Dönüş Butonu
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>

Başlık listesine veya içindekiler tablosuna dönmek için kullanılacak olan butonu aşağıdaki örnek kodlamada olduğu gibi blog yayınlarınıza ekleyebilirsiniz.

<h4 id="article_head_1">Başlık</h4>
<br />
<p>İçerik bölümü, ...............</p>
<br />
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>
<br />
<br />
<h4 id="article_head_2">Başlık</h4>
<br />
<p>İçerik bölümü, ...............</p>
<br />

Ön İzleme

Bu yazımıza blog yayınlarında bulunan içerik başlıklarını kullanarak içindekiler listesi oluşturmayı paylaştım. Daha önce de buna benzer eklentiler paylaşmıştım;

Blogger AMP HTML Uyumlu İçindekiler Tablosu Oluşturma

Blog Yayınlarında Otomatik İçindekiler Dizini Oluşturma

Blog İçindekiler Sayfası Nasıl Kurulur?

Bu yazımız hakkında görüş ve sorularınız için yorum formunu kullanabilirsiniz.
Blogger Blogları İçin Sayfa Ön Yükleme Eklentileri
Blogger Pre Loader / Loading

Blogger blog sitesi yöneticilerinin sayfa geçiş ve yüklenme süreleri zaman diliminde bir ön yükleme efekti eklentisi kullanmak istiyor. Bu yazımızda blog sitelerinin sayfaları arka planda yüklenirken sayfanızın yüklendiğini gösteren ön yükleme eklentisinin blog sitesine nasıl eklendiği ve nasıl çalıştığı hakkında bilgiler paylaşacağım.


Blog sitesi sayfa yüklenme süresi 2 (iki) saniyenin üzerindeyse, bir sayfa ön yükleme bilgi eklentisi kullanabilirsiniz. Eğer, blog sayfaları 2 (iki) saniye veya daha az sürede yükleniyorsa, bir ön yükleme bilgi eklentisi kullanmanıza gerek yoktur.

Sayfa ön yükleme eklentisi, blog sitenizin sayfaları arka planda yüklenirken ön yükleme sayfasında blog sayfanızın yüklendiği hakkında ziyaretçilere bilgi verir ve sayfa yüklendiğinde otomatik olarak kapanır.

Blogger Özel Önyükleme Ekranı Oluşturma

Paylaşmış olduğum sayfa ön yükleme eklentileri CSS3 ve basit bir javascrip kodu ile çalışmakta ve blog sayfalarının yüklenme  hızını olumsuz yönde etkilemez. Blog sitenize bir sayfa ön yükleme eklentisi kurmak istiyorsanız aşağıdaki adımları takip edin.

Blogger Bloglarına Sayfa Ön Yükleme Eklentisi Nasıl Kurulur?


Blogger hesabınıza giriş yapın yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek tema editör sayfasını açın ve aşağıdaki adımları uygulayın.

jQuery 1.7.1 Sürümü
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Blogger sayfa ön yükleme eklentileri jQuery 1.7.1 sürümü ile çalışır. Bu nedenle, tema editör sayfanızda bulunan Google Apis jQuery kodunu yukarıdaki sürümü ile değiştirin.

Aşağıdaki sayfa ön yükleme kodlarını tema editör sayfanıza sırasıyla aşağıdaki sıralamaya uygun şekilde ekleyin.
  • Sayfa ön yükleme CSS kodunu </head> veya &lt;/head&gt;&lt;!--<head/>--&gt; kodunun bir satır üzerine ekleyin.
  • Sayfa ön yükleme HTML kodunu <body> kodunun bir satır altına ekleyin.
  • Sayfa ön yükleme jQuery kodunu </body> veya &lt;!--</body>--&gt;&lt;/body&gt; kodunun bir satır üzerine ekleyin.

Sayfa Ön Yükleme Eklentileri

Blog siteniz için en uygun olan ön yükleme eklentisini seçerek blogunuza kurulumunu yapın. Her eklenti için ayrı ayrı CSS, HTML ve jQuery kodu bulunmaktadır.

Sayfa Ön Yükleme Eklentisi - 1
CSS
<style type='text/css'>
/*<![CDATA[*/
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.loader{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #f44336;top:50%;animation:loader 2s infinite ease}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#f44336;animation:loader-inner 2s infinite ease-in}
@keyframes loader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}}
/*]]>*/
</style>

HTML
<div id='preloader'>
<div class='spinner'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 2
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}
.loader-spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}
.loader-spinner,.loader-spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}
.loader-spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}
.loader-spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}
@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}
@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}
@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}
@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
/*]]>*/
</style>

HTML
<div id="PreLoader">
<div class="loader-spinner">
<div class="loader-spinner-inner"></div>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-spinner").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 3
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#000;color:#eaf8ff;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;font-family:Verdana,sans-serif!important}
@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}
@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}
@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}
@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes loader-bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}
@-moz-keyframes loader-bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}
@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}
@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}
.loader-wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}
.loader-bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:loader-bg 1.5s linear infinite;-webkit-animation:loader-bg 1.5s linear infinite;animation:loader-bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px #000;-webkit-box-shadow:inset 0 0 45px 30px #000;box-shadow:inset 0 0 45px 30px #000}
.pre-loading{position:relative;margin:0 auto;text-align:right;text-shadow:0 0 6px #bce5ff;height:20px;width:150px}
.pre-loading span{position:absolute;display:block;right:30px;height:20px;width:400px;line-height:20px}
.pre-loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf6ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px #bce5ff;box-shadow:0 0 15px #bce5ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}
.pre-loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}
.pre-loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class="loader-wrap">
<div class="loader-bg">
<div class="pre-loading">
<span class="title">Yükleniyor...</span>
<span class="text"><data:blog.title/></span>
</div></div></div></div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(&quot;.loader-wrap&quot;).fadeOut(&quot;slow&quot;);setTimeout(function(){$(&quot;#PreLoader&quot;).fadeOut(&quot;slow&quot;)},1000)},1000)});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 4
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000}
.loader-juggle{width:300px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px}
.loader-juggle div{position:absolute;width:21px;height:21px;border-radius:10.5px;background:#4285f4;margin-top:150px;margin-left:150px;animation:juggle 2.1s linear infinite}
.loader-juggle div:nth-child(1){background:#34a853;animation-delay:-0.7s}
.loader-juggle div:nth-child(2){background:#fbbc05;animation-delay:-1.4s}
@keyframes juggle{0%{transform:translateX(0px) translateY(0px)}12.5%{transform:translateX(25px) translateY(-55px) scale(1.1);background:#ea4335}25%{transform:translateX(50px) translateY(0px);animation-timing-function:ease-out}37.5%{transform:translateX(25px) translateY(55px)}50%{transform:translateX(0px) translateY(0px)}62.5%{transform:translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function:ease-in}75%{transform:translateX(-50px) translateY(0px);animation-timing-function:ease-out}87.5%{transform:translateX(-25px) translateY(55px)}100%{transform:translateX(0px) translateY(0px)}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class='loader-juggle'>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(&quot;.loader-juggle&quot;).fadeOut(&quot;slow&quot;);setTimeout(function(){$(&quot;#PreLoader&quot;).fadeOut(&quot;slow&quot;)},1000)},1000)});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 5
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}
.loader-spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:loader-spinner-wiggle 1.2s infinite}
@keyframes loader-spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}
.loader-spinner:before,.loader-spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:loader-spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,loader-spinner-fade 1.2s linear infinite}
.loader-spinner:before{border-top-color:#66e5ff}
.loader-spinner:after{border-top-color:#f0db75;animation-delay:0.3s}
@keyframes loader-spinner-spin{100%{transform:rotate(360deg)}}
@keyframes loader-spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class="loader-spinner"></div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(&quot;.loader-spinner&quot;).fadeOut(&quot;slow&quot;);setTimeout(function(){$(&quot;# PreLoader&quot;).fadeOut(&quot;slow&quot;)},1000)},1000)});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 6
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000}
.loader-balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}
.loader-balls:nth-child(1){background-color:#2196F3;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}
.loader-balls:nth-child(2){background-color:#F44336;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}
.loader-balls:nth-child(3){background-color:#FFC107;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}
.loader-balls:nth-child(4){background-color:#4CAF50;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}
@keyframes move{0%{left:0%}100%{left:100%}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(&quot;.loader-balls&quot;).fadeOut(&quot;slow&quot;);setTimeout(function(){$(&quot;#PreLoader&quot;).fadeOut(&quot;slow&quot;)},1000)},1000)});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 7
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner-inner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285f4}25%{stroke:#ea4335}50%{stroke:#f7c223}75%{stroke:#1b9a59}100%{stroke:#4285f4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<svg class='spinner-inner' height='48px' viewBox='0 0 66 66' width='48px'><circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='6'/></svg>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-inner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 8
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#000;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader-container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#loader-do{background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:loader-do .6s ease-in-out infinite}
@-webkit-keyframes loader-do{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.loader-step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#step-1{animation:anim 1.8s linear infinite}
#step-2{animation:anim 1.8s linear infinite -.6s}
#step-3{animation:anim 1.8s linear infinite -1.2s}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div id='loader-container' class='spinner-inner'>
<div id='loader-do'></div>
<div class='loader-step' id='step-1'></div>
<div class='loader-step' id='step-2'></div>
<div class='loader-step' id='step-3'></div>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-inner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 9
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#fff;position:fixed;overflow:hidden;left:0;right:0;top:0;bottom:0;z-index:9999}
.spinner-wrap{position:absolute;list-style:none;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{position:absolute;height:0;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b7ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b9ccd}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class='spinner-wrap'>
<ul class='loading reversed'>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-wrap").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 10
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner-wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader-balls{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-ball{animation-name:loader-balls;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-ball:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-ball:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-ball:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-ball:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-ball:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-ball:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader-balls{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class='spinner-wrap'>
<div class='loader-balls'>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
</div>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-wrap").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 11
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px}
.loader > .steps{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:steps1 3s cubic-bezier(.55,.3,.24,.99) infinite}
.loader > .steps:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:steps2}
.loader > .steps:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:steps3}
@keyframes steps1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}}
@keyframes steps2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}}
@keyframes steps3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class='loader spinner'>
<div class='steps'></div>
<div class='steps'></div>
<div class='steps'></div>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 12
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="balls-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.balls-1{z-index:-1;background-color:#2196F4;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.balls-2{z-index:-2;background-color:#03A9F5;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.balls-3{z-index:-3;background-color:#00BCD5;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.balls-4{z-index:-4;background-color:#009689;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.balls-5{z-index:-5;background-color:#4CAF51;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.balls-6{z-index:-6;background-color:#8BC35A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.balls-7{z-index:-7;background-color:#CDDC38;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.balls-8{z-index:-8;background-color:#FFEB4B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class='spinner'>
<span class='balls-1'></span>
<span class='balls-2'></span>
<span class='balls-3'></span>
<span class='balls-4'></span>
<span class='balls-5'></span>
<span class='balls-6'></span>
<span class='balls-7'></span>
<span class='balls-8'></span>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 13
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#ecf0f2;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.gge{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b5ff;width:0;z-index:2}
.gge2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde16;width:0;z-index:1}
.gge3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da159;border-bottom:0 solid transparent;width:0;z-index:1}
.gge4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea344f;border-bottom:0 solid transparent;width:0;z-index:2}
.circa{border:30px solid rgba(255,255,255,0.1)}
.circa2{margin-top:30px;border:25px solid #fff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div class='spinner'>
<div class='loader gge'></div>
<div class='loader gge2'></div>
<div class='loader gge3'></div>
<div class='loader gge4'></div>
<div class='loader circa'></div>
<div class='loader circa2'></div>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Sayfa Ön Yükleme Eklentisi - 14
CSS
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#f5f5fa;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader-status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px}
.spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinner > div{background-color:#4267b3;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinner .rct2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinner .rct3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinner .rct4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinner .rct5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
/*]]>*/
</style>

HTML
<div id='PreLoader'>
<div id='loader-status'>
<div class='spinner'>
<div class='rct1'></div>
<div class='rct2'></div>
<div class='rct3'></div>
<div class='rct4'></div>
<div class='rct5'></div>
</div>
</div>
</div>

jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Ön İzleme

Blogger siteleri için birbirinde farklı sayfa ön yüklenme eklentilerini sizlerle paylaştım. Bu yazımızda paylaşılan eklentiler hakkında görüş ve sorularınız için yorum formunu kullanabilirsiniz.