Straight Ahead–Premium Kalitede Blogger Teması

Wordpress’ten Blogger’a çevrilmiş, çok güzel bir temaya rastladım ve sizlerle paylaşmak istedim.Temanın yapımcısı temayı başlıkta yadığım gibi tanımlıyor.Premium kalitede…

 

Temanın özelliklerinden kısaca bahsetnek gerekirse…

1. Temiz Tasarım : Blog ana sayfası temz ve net bir tasarıma sahip.Güzel ve birbiriyle uyumlu renkler seçilmiş.Gözü hiç yormuyor.

2. Jquery Slider : Blogunuzla ilgili duyurular yapabileceğiniz, daha çok okunmasını istediğini yazılarınızı veya resimlerinizi koyabileceğiniz bir manşet uyguluması hazır bulunuyor.

3. Footer : Footer 4 sütuna bölümünmüş.Bu sayede zengin görünümlü ve kullanışlı bir footer bölümüne sahip olabilirsiniz.

4. Diğer Özellikler : Temanın dikkat çeken diğer özelliklerinden bahsedecek olursam; Header’da yatay açılır menü, sidebar’da tab menü, her yazıya ait yorum sayısını gösteren yorum balonu, resimli otomatik devamını oku özelliği.

- Bu temayı blogunuza nasıl yükleyeceğinizi bilmiyorsanız okuyun: Blogger Şablon Yükleme

- Daha önce paylaştığım tüm temaları görmek için bakın: Blogger Şablonları

Blogunuz İçin 2 Farklı Stilde Arama Kutusu

Yeni bir Blogger teması üzerinde çalışıyorum.Bu temada şık ve farklı bir stilde arama kutusu kullanmak istedim ve internette ufak bir araştırma yaptım.Arama kutusu stilleri araştırırken Design3Edge sitesinde bir psd paketine rastladım.Bunlardan iksi hoşuma gitti ve burada da paylaşmak istedim.

Resimde gördüğünüz stillerdeki arama kutularına ait kodlar aşağıda mevcut.Hangi stildeki arama kutusu kullanmak istiyorsanız o kodu HTML/JavaScript gadget’ı olarak blogunuza eklemeniz yeterli.

1.Stildeki arama kutusunun kodları:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbjO29fXDzcEKAyKzkFQ2glpp8br-LmeM5O2FTird0kgPeMwff82mLigUNzPVe1OlVFLy-QnYaPupmmwM1QYNigPoZ1t9skzZTgt8auiay5M__QtGmKlisLH5kNm-JrdtKjo46uZ7FedZo/s307/arama-kutusu-psd1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Ara..." onfocus='if (this.value == "Ara...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Ara...";}'/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>

2.Stildeki arama kutusunun kodları:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJn2XsX1uQLs9Q2mkqR8vvjyKqjxe24LQdWIMuXxWG4KgIHAGYDvnUfqnUujooG-UjXjeV3tWpyN1TXTshlHVrqKpuDjI2yiAotl8PKFSeHeapsyJH7bytHcR5m4tZcX-L9lpadfafAQ7H/s307/arama-kutusu-psd2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>

Fotoğraf Ve Portfolyo Blogları İçin Blogger Teması

Bu aralar tema hazırlamak ve düzenlemek için pek vakit bulamıyorum.Ben de haır bir tema paylaşayım dedim ve PremiumBlogTemplates tarafından hazırlanan Myfolio temasını seçtim.
Tema oldukça sade ve gözü hiç yormayan bir tasarıma sahip.Özellikle fotoğraf ve portfolyo bloglar için bire bir.Başlığın altındaki menüye sayfa linklerinizi ekleyebilirsiniz.3 sütunlu footer bölümüne ise sosyal hesaplarınıza ait butonlar, etiket bulutu, arşiv gibi öğeler ekleyebilirsiniz.

         
Blogumun temasını nasıl değiştirebilirim? diyorsan oku => Blogger Şablon Yükleme

Dışarıda yağmur var,
Ve ben her yağmur damlası kadar seviyorum seni...

Karanlık sokağa düşen damlaların sesi
Yeminim,
Yüzünü serinleten yağmur kokusu
Şahidim olsun...

Bütün yağmurlar kadar özleyeceğim seni...
Altında ıslananlar pişmanlıklarım olsun,
Ve sokak lambası ateş,
Yüreğimi kavuran...

Blogunuzun Hızını Test Edebileceğiniz Araçlar

Bu aralar blogların hızı ve performansı ile çok ilgileniyorum.Blogunuzu hızlandırmanıza yarayacak ipuçlarını daha önce yazmıştım.O yazıya yapılan yorumlardan birinde bir ouyucum blogu hızlandırmak için yapılan işlemlerin blogun görünümünü çok asdeleştireceğini yazmıştı.Haksız da sayılmaz.Ben de ona cevaben bu dengeyi sağlamak gerektiğini yazmıştım.

 

Burada paylaşacağım online araçlar ile blogunuzun yüklenmesini hangi öğelerin yavaşlattığını görebilecek, blogunuzun açılış hızını diğer bloglarla karşılaştırabileceksiniz.Bu sayede performans – görünüm dengesini en iyi şekilde kurabileceksiniz.

 

1. PAGE SPEED ONLINE

Bir Google servisi olan Page Speed Online, blogunuzu test ettikten sonra size 100 üzerinden bir puan verir.Bu puanı belirleyen bazı kriterler vardır.Puanınızı düşüren kriterleri önem derecesine göre ayırarak size raporlar.Bu rapor ile blogunuzun performansını nelerin düşürdüğünü öğrenebilirsiniz.

Link: https://developers.google.com/pagespeed/

 

2. PINGDOM TOOLS

Pingdom Tools benim favori araçlarımdan.Bu araç blogunuzu detaylı bir şekilde analiz ettikten sonra 100 üzerinden bir performans puanı, yüklenme süresi ve ana sayfanızın toplam boyutunu verir.Ayrıca blogunuzu diğer sitelerle kıyaslayarak diğer sitelerinden %kaçından daha hızlı olduğunuzu yazar.Bunun dşında blogunuzdaki grafikllerden tutunda javascriptlere kadar her bir öğebnin kaç saniyede yüüklendiğini detaylı bir şekilde görebilirsiniz.

Link: http://fpt.pingdom.com/

 

3. Free Website Performans Test

BrowserMob şirketinin bu ücretsiz aracı ile blogunuzun ortalama yüklenme süresi, ana sayfanızın bboyutu, blogunuzdaki öğelerin sayısını ve bu öğelerin tek tek yüklenme sürelerini görebilirsiniz.Ayrıca bu araç blogunuza 4 ayrı merkezden ping atarak değişik lokasyonlardaki prformansı da gösterir.

Link: https://browsermob.com/free-website-performance-test

 

4. Which Loads Faster?

Bu ilginç araç ile iki sitenin performansını kıyaslayabiliyorsunuz.Kıyaslamak istediğiniz sitelerin adresini yazdıktan sonra ekran ikiye bölünüyor ve siteler yüklenmeye başlıyor.Her iki siteninde yüklenme süresi hesaplandıktan sonra hangisinin ne kadar daha hızlı olduğu ekranda yazıyor.

Link: http://whichloadsfaster.com/

 

5. WebPagestest

 

Blogunuzu detaylı bir şekilde analiz eden baka bir araç daha.Bu aracın en iyi özeliği ise blogunuzun açılış hızını farkl tarayıcılar ve dünya üzerindeki farklı merkezler için test edebilmesi.

Link: http://www.webpagetest.org/