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 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/

Blogger Açılır Menü Oluşturma

Blogger, Blog’larınıza iki adımda açılır menü nasıl oluştururuz ? Açılır menüyü biçimlendirme veya yeni menü eklemek için yapılması gereken işlemler nelerdir ? Klasik Blogger kullanan birçok arkaşımıza yardımcı olmak ve arayış çabalarını biraz olsun hafifletmek için blog’unuza iki adımda açılır menü ekleyebileceğiniz çok basit iki kod veriyorum. Şimdi açılır menü kategorimizi nasıl yapacağız adım adım bakalım. Kodları blog’larınıza eklediğinizde manuel ayarlar yapabildiğiniz gibiBlogger’un özelleştirme seçeneklerini de kullanarak menünün arka plan renklerini, sekme renklerini, yazı renklerini değiştirme şansına sahipsiniz. Bu yazıyı yazmamdaki en büyük etken, yeni blog'cuların açılır menü oluşturarak bloglarını güzelleştirmeleri ve bloglarını severek yazılarına devam etmeleridir.

AÇILIR MENÜ NASIL OLUŞTURULUR ?

1. Blogger → Yerleşim → HTML/JavaScript Gadget’ini açın ve aşağıdaki kodu yapıştırın.

<div id='gpnavbar'> 
      <ul id='gpnav'> 
        <li> 
          <a href='#'>Home</a> 
        </li> 
        <li> 
          <a href='#'>About</a> 
       </li> 
        <li> 
          <a href='#'>Contact</a> 
        </li> 
  <li> 
           <a href='#'>Sitemap</a>
            <ul> 
                <li><a href='#'>Sub Page #1</a></li> 
                <li><a href='#'>Sub Page #2</a></li> 
                <li><a href='#'>Sub Page #3</a></li> 
              </ul> 
        </li>
      </ul> 
    </div>

 2. Sayfa bağlantıları ve sayfa isimlerini kalın metin ile # değiştirin.

⇒ Sarı renk ile vurgulanan kod açılır menü’i belirlemektedir.

⇒ <li> ile başlayan ve </li> ile biten kodu kopyalayıp altına yapıştırarak ikinci bir menü yapabilir/çoğaltabilirsiniz.

Ayrıca Bakınız ⇒ Blogger açılır menü başlığı nasıl yapılandırılır ?

⇒ <ul> ile başlayan ve </ul> ile biten kod açılır menüdür. Kodu kopyalayıp ikinci bir açılır menü ekleyebilirsiniz.

<li> 
          <a href='#'>Home</a> 
        </li>

3. Her zaman kod eklemeden yapılan işlem olarak blog yedeğinizi alın.
4. Blog şablon → HTML Düzenle açın ve aşağıdaki kod bulun (Ctrl+F)

]]></b:skin>

5. Bulduğunuz bu kodun üstüne gelecek şekilde aşağıdaki kodu kopyalayıp yapıştırın.
6. Şablon kullanmadan CSS kodunu farklı bir şekildede kullanabiliriz.
→ Şablon → Özelleştir → Gelişmiş → CSS ekle yolunu takip edin ve kodu yapıştırdıktan sonra } bu işaretten sonra enterleyin. Blog’u kaydedin. Her iki şekilde de aynı işlemi yapmış olursunuz.

/*----- GP Drop Down Menu ----*/

#gpnavbar { 
    background: #060505; 
    width: 960px; 
    color: #FFF; 
        margin: 0px; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}

#gpnav { 
    margin: 0; 
    padding: 0; 
} 
#gpnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#gpnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
        border-left:1px solid #333; 
        border-right:1px solid #333; 
        height:35px; 
} 
#gpnav li a, #gpnav li a:link, #gpnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:normal 12px Helvetica, sans-serif;    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
        
} 
#gpnav li a:hover, #gpnav li a:active { 
    background: #BF0100; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 10px 12px; 
        
    
        
}
#gpnav li { 
    float: left; 
    padding: 0; 
} 
#gpnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
} 
#gpnav li ul a { 
    width: 140px; 
} 
#gpnav li ul ul { 
    margin: -25px 0 0 161px; 
} 
#gpnav li:hover ul ul, #gpnav li:hover ul ul ul, #gpnav li.sfhover ul ul, #gpnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#gpnav li:hover ul, #gpnav li li:hover ul, #gpnav li li li:hover ul, #gpnav li.sfhover ul, #gpnav li li.sfhover ul, #gpnav li li li.sfhover ul { 
    left: auto; 
} 
#gpnav li:hover, #gpnav li.sfhover { 
    position: static; 
}
#gpnav li li a, #gpnav li li a:link, #gpnav li li a:visited { 
    background: #BF0100; 
    width: 120px; 
    color: #FFF; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333;
    
} 
#gpnav li li a:hover, #gpnavli li a:active { 
    background: #060505; 
    color: #FFF; 
    display: block;     margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
}

Manuel değişiklik için :

⇒ #060505 Kodu Ana menü arka plan rengi değişimi için

⇒ Yazı tipi renk, boyut ailesini değiştirmek için sarı vurgular

⇒ # BF0100 Fare ile sekme üzerine gelince arka plan değişimi için

⇒ # BF0100 Açılır menü arka plan rengini değiştirmek için

⇒ #060505 Fare üzerine gelince açılır arka plan rengi değişimi için

Son işlemi yaptık.Ancak bu işin bir kısmını sekme biçimleme kısmından da yapabilirsiniz.Kendi Blog açılır menü’nü ücretsiz proğramla yapmayı düşünür müsünüz ?Blogger Menü Oluşturucu - Ücretsiz Türkçe İndirÖnemli Not: Blogger temanızın özelliğine göre, menu çubuğu açılır olarak görülmüyorsa lütfen aşağıdaki açıklayıcı bağlantı linkini takip ederek " /* Tabs " ayarlarınızı yapılandır