Blog ipuçları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blog ipuçları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

19 Haziran 2016 Pazar

Blogger Şablon (Tema) Nasıl Yüklenir

Blogger Tema Tasarımı

Blogger, Blog kullanan birçok yazarın vazgeçemediği uğraşlardan biride, Blogunun Temasını (Şablon) değiştirmesidir. Blogunuzun görsel şekli olan şablon'u (temayı) nasıl değişeceksiniz? Yüklediğiniz şablonda, problem yaşadığınızda veya vazgeçtiğinizde, blogunuzun eski şablonunu geri nasıl yükleyeceksiniz? Unutulmaması gereken diğer konuda yeni tema kurdunuz. Asıl iş bundan sonra başlıyor. 

Yeni kurduğunuz şablonu yapılandırmanız gerekiyor. Temanızı da bir süre sonra yapılandırdınız. Bunca emek ve zaman harcadınız. Bir gün çok hoşunuza giden bir tema daha gördünüz. Bu temayı yüklemek istediğinizde aynı emekleri tekrarlamanız gerekecektir. Sizce değer mi bilmem. Ancak benimde çok sevdiğim temalar zaman zaman oluyor, bu temayı bir kere seçmem gerektiğini biliyorum. 

Bunca emeğin defalarca çöpe atılmasını istemiyorum. Henüz böyle bir karar vermedim. Sizde kararınızı verirken gerçekten seçtiğiniz tema üzerinde kesin karar verdikten sonra yükleyin. Bir daha değiştirmeyin. Yoksa temayla uğraşmaktan başka birşey yapamaz duruma gelebilirsiniz. Şimdi anlatacağım konuyu tam olarak çözümlerseniz hem yeni bir tema kurmasını, hemde en kötü ihtimali, göz önünde bulundurarak eski temanıza dönmenizi garantilemiş olursunuz.

Tema ( Şablon ) kurulmadan önce yapılacak işlemler :

Bu konuda daha önce yazdığım bir yazımı size önererek başlıyorum. Yazının adı Blogunuzu iki şekilde yedekleneceğini biliyormusunuz? Bu yazımı okumadan kesinlikle temanızı yüklemeyin. Yazının özünde blogunuzun tema yedeğinin yüklenmesi ve blogunuzun tam yüklenmesi konusu anlatılmakta.

Yeni Blogger Teması nasıl yüklenir :

1. İndireceğiniz tema büyük bir ihtimalle zip dosyası şeklindedir. İndir butonuna tıkladıktan sonra, indirme yeri olarak masa üstünü seçin.
2. İndirdiğiniz dosyayı zipten çıkarın. Nasıl çıkaracaksınız? Verdiğim örnek resimde zip dosyasına, mausunuzla sağ tıklayın ve buraya çıkar'a tıklamanız yeterli olacaktır. Masa üstüne dosya çıkarılacaktır. Bu çıkardığınız dosyanın içinde bulunan (XML) uzantılı dosya sizin şablonunuzdur unutmayın.kaynak:https://guney59.blogspot.com.tr/2013/01/blogger-sablon-tema-nasl-yuklenir.html

Zip dosyası

3. Blogunuza giriş yapın → Şablon → Sağ üstte Yedekle/Geri Yükle tıklayın
4. Açılan pencerede Dosya seç → Masa üstüne çıkardığınız dosyanın içindeki XML uzantılı dosyaya tıklayın → Hemen altında Yükle yazan sekmeye tıkladığınızda yeni şablonunuz yüklenmiş olacaktır.

Blogger şablon yedekleme

5. Tüm yapacağınız işlem bundan ibarettir. Tema ( Şablon ) kurulmadan önce yapılacak işlemler ile ilgili kısmı tam anlamadan temanızı değiştirmeyin. Sonradan problemler yaşar geriye denemezsiniz. 

Artık tüm işlemler bundan sonra başlıyor. Yeni temanızda menüleri özelleştirecek, sosyal paylaşım URL’nizi yazacak. Yeni gadgetler ile süsleyeceksiniz. Slaytlar için arayış içine girecek nasıl yapılır soruları ile beraber yaşayacaksınız. 

Bu tür sorunları yaşamamak için tema tasarımcının bu konuda ne gibi yardımları oluyor diye sitesini kesin araştırın. Gerekli bilgi ve destek verildiğine kanat getirdiğinizde artık temanızı rahatlıkla değişebilirsiniz. Temanızı tasarlamak için menü çubuğunda bulunan Tema Tasarım kategorisindeki yazılardan faydalanabilirsiniz.

Blogger Otomatik Sayfa Yükleme Eklentisi

Github yükleme ilerleme kodları
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 Şablonda Kod Nasıl Bulunur

Blogger Şablon kodları içinde eklenti ekleyebilmek için, aradıkları kodu bulabilmesine yardımcı olabilecek videolu kısa bir anlatımı aşağıda inceleyerek etiket kodlarının nasıl bulunması gerektiğini görelim. Bu öğretici, Blogger ile yeni blog açan webmaster yazar arkadaşlara ne yapması gerektiği konusunda rehber olacaktır. Bloguna sosyal paylaşım butonu, okuyucu sayacı, sayfa navigasyonu, kategori menüsü vb. gibi kodların şablon içinde bulunması için öncelikle blogger kumanda paneline giriş yapın.
1. Şablon → HTML’yi Düzenle ile şablon kodlarını açık konuma getirin.
2. Arama yapmak için dikkat etmemiz gereken iki işlem vardır.
a: CTRL + F klavye aramı yapmak : Direk bu şekilde yapacağınız aramada tarayıcınızın arama penceresi açılır.
b: Şablon içinde boş bir yere tıklayarak, CTRL + F klavye ile  aramı yapmak : Şablon içinde arayacağımız etiket veya kodları bu yöntemle bulacağız.
3. Arayacağımız etiketten birkaç tane olduğunu düşünürsek, her arama yapacağımızda şablon içindeki arama penceresinde bulunan etiketin son kısmına tıklayarak enter çekmemiz olduğunu unutmayın.
4. Aradığımız kod etiketi genelde ilk bulunandır. Ancak bazı temalr farklılık gösterdiğinden aynı etiketten birakaç tane olabilir. Bu nedenle doğru etiketi bulmamız gerekir. Eklentisini kullanacağınız yazar size gereken yolu söylecektir. Bu konuda kuşkunuz olmasın.
Aşağıda izleyeceğiniz video için bir senarya yaparak konuyu netleştirelim ve Youtube videomuzu izleyelim.
Örnek bu linki inceleyelim : Blogger Duyarlı Devamını Oku Eklentisi
Senaryo :
1. Blogger Şablon kodlarınızın açılması,
2. Şablon içine tıklamadan CTRL+F ile tarayıcı aramayı açma,
3. Şablon içine tıklayarak CTRL+F ile şablon içinde aramayı açma,
4. Aradığımız etiketi enterleyerek diğer kodları bulma.

Youtube Video Linki : http://youtu.be/1r2e3Ew8bN8
Şablonda Kod,etiket bulma ile ilgili YouTube anlatım videosu :