Blogger Otomatik Sayfa Yükleme Eklentisi

Web sitelerini incelerken menü bar çubuğunun üst header bar kısmında gördüğünüz renkli hızlı ve değişik stillerden oluşan yükleme ilerl...

...

Web sitelerini incelerken menü bar çubuğunun üst header bar kısmında gördüğünüz renkli hızlı ve değişik stillerden oluşan yükleme ilerleme çubuğunu sizde blogunuza ekleyebilirsiniz.

Pace.js farklı tiplerdeki stil seçenekleri ile otomatik sayfa yükleme ilerleme çubuğu seçtiğiniz CSS teması ile sayfanızın yükleme ve ajax ilerleme navigasyonu için oldukca güzel ilerleme göstergesi sağlar. Blogger sayfa yüklemesinin ne zaman son bulduğunuda araç çubuğunu izleyerek takip edebilirsiniz.

Pace nedir ?
Pace.js seçtiğiniz bir CSS tema içerir ve sayfa yüklemede ajax navigasyon için güzel bir ilerleme göstergesidir.

Bblogunuza Pace.js yükleme ilerleme efekti eklemek için,ilgili adımlar:

1. Blogger şablon kodlarınızı açın. Aşağıdaki kodu bulun. Blogger şablon içinde Kod bulma ile ilgili sorun mu yaşıyorsunuz ? Buradan yardım alabilirsiniz.

]]></b:skin>

2. Yukarıdaki kodu bulduktan sonra etiketin hemen altına aşağıdaki kodu ekleyin. Blogu kaydedin ve önbelleği yenileyin. CTRL + Üstkarakter (Shift) F5

Blogger şablon içindeki kodu görmek için resmi tarayıcıda açın.

Blogger yükleme çubuğunu farklı temalar ile deneyerek beğendiğiniz yükleme ilerleme kodlarını aşağıda verilen kodlar ile deneyerek beğendiğinizi kullanın. Örnekler :

İnce görünüm en az :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-minimal.css' rel='stylesheet'/>

Flaş görünüm :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-flash.css' rel='stylesheet'/>

Berber dükkanı görünüm :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-barber-shop.css' rel='stylesheet'/>

Mac Osx görünüm :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-mac-osx.css' rel='stylesheet'/>

Sola dolgulu görünüm :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-fill-left.css' rel='stylesheet'/>

Flat top görünüm :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-flat-top.css' rel='stylesheet'/>

Büyük sayaç görünüm :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-big-counter.css' rel='stylesheet'/>

Köşe gösterge görünümü :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-corner-indicator.css' rel='stylesheet'/>

Zıplayan top görünümü :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-bounce.css' rel='stylesheet'/>

Bar yükleme görünümü :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-loading-bar.css' rel='stylesheet'/>

Orta yuvarlak sayaç görünümü :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-center-circle.css' rel='stylesheet'/>

Merkezli atom görünümü :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-center-atom.css' rel='stylesheet'/>

Merkezli radar görünümü :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-center-radar.css' rel='stylesheet'/>

Merkezi basit görünüm :

<script src='http://cdn.jsdelivr.net/pace/0.5.5/pace.min.js'></script>
<link href='http://cdn.jsdelivr.net/pace/0.5.5/themes/pace-theme-center-simple.css' rel='stylesheet'/>

Uygulama projesi hakkında daha fazla bilgi alabilirsiniz: http://github.hubspot.com/pace/