teknoloji haberleri - internet haberleri

Okuyucuların ortak istekleri ve beklentileri Blog Hocam’ın 1 numaralı yazı kaynağı diyebilirim. Son zamanlarda bayan bloggerlardan gelen talepler sonucunda da bu yazı ortaya çıktı.

Modadan makyaja, takıdan alışverişe çeşitli konularda blog yazan bayan takipçiler, son zamanlarda tema konusunda sıkça danışmaya başlamışlardı. Bu kişileri genellikle BH Pinterest sayfasına yönlendiriyordum fakat oradaki temaların bayan bloglarına özellikli de moda bloglarına pek uygun olmadığı bir gerçek. Son olarak @nimostylo ile Twitter’da benzer bir diyalog yaşadıktan sonra moda blogları için uygun temaları derlemeye karar verdim.

Başlıkta moda blogları için uygun temalar desem de aşağıdaki temalarda ufak tefek değişiklikler yaparak alışveriş, makyaj, takı gibi diğer konulardaki bloglarınızda da kullanabilirsiniz.

Alyeska II Blogger Teması

DEMO  &  DOWNLOAD

Slayt alanı, kullanışlı yatay açılır menüsü, orijinal arama kutusu ve görsel içeren yayınlara uygun ana sayfa tasarımıyla moda blogları için ideal bir Blogger teması. Resimli otomatik devamını oku eklentisi, sayfa numaralandırma eklentisi ve yorum sayısını gösteren baloncuk temayla birlikte hazır bir şeklide gelmekte. Ayrıca 4 sütundan oluşan footer alanını etkin bir şekilde kullanabilirsiniz.

Pretty Theme Blogger Teması

DEMO  &  DOWNLOAD

Sade ve basit bir tasarıma sahip olan Pretty Theme teması hızlı ve kullanımı kolay bir tema. Hiç bir eklenti olmadığı için blogunuzun çok çabuk açılmasını sağlar. Temiz bir kodlamanın dışında arka plan resmi, header resmi, üst tarafta şık arama kutusu ve temaya hareket katması için bir kadın resmi var. Hızlı ve sade bir tema isteyeler için ideal olabilir.

Beauty & Clean Blogger Teması

DEMO  &  DOWNLOAD

Çok şık bir Blogger teması olan Beauty&Clean ‘de blog başlığında ve yazı başlıklarında özel font kullanılmış. Dolayısıyla bazı türkçe karakterlerde sorun çıkarabilir. Bunun dışında açılır menü ile sayfa numaralandırma eklentisi bulunuyor. Temanın en dikkat çekici yeri olan kuğu resmi olarak gördüğünüz sabit manşet alanına ise blogunuzun konusuyla ilgili bir duyuru veya başka bir resim ekleyebilirsiniz. Elegan tasarım tercih edenler bu temayı deneyebilirler.

Scrappy Blogger Teması

DEMO  &  DOWNLOAD

Vintage tarzını andıran bu tema bayan bir tasarımcı tarafından yapılmış. Temada “resimli otomatik devamını oku” eklentisi, basit yatay menü, öne çıkarılmış yazı tarihleri ve özel font kullanılan yazı başlıkları dikkat çeken özellikler. Yazı başlıklarında özel font kullanıldığı için bazı türkçe karakterlerde sorun çıkarabilir.

Project 10 Blogger Teması

DEMO  &  DOWNLOAD

Temanın ismi modayı pek çağrıştırmasa da demoyu incelediğinizde moda veya bayan blogları için kullanılabilecek br tema olduğunu görebilirsiniz. Sayısız özelliğe sahip, harika bir tema Project 10. Floating yani yüzen sidebar, sayfa üstünde haber akışı, otomatik slayt manşet alanı, resimli devamını oku eklentisi ve sayfa numaralandırma eklentisi başlıca özellikleri. Düzenlemek biraz vaktinizi alabilir ama uğraştığınıza değecektir.

Yazının başında da belirttiğim gibi bu temaları moda bloglarının dışında diğer konulardaki bayan blogları için de rahatlıkla kullanabilirsiniz. Temaların tek tek nasıl düzenleneceğini yazmak ciddi mesai gerektirdiği için maalesef yazamadım :) Düzenlemeyle ilgi sorularınızı yorum bölümünü kullanarak sorarsanız cevaplamaya çalışacağım.

Günümüzde gelişen teknolojiyle birlikte web sitelerine girmek için kullanılan cihazların sayısı da oldukça arttı. Farklı çözünürlüklerde ve teknolojilerde cihazların kullanılması, web tasarımcılarını da harekete geçirdi ve poansiyel ziyaretçinin kaçırılmaması için yeni teknikler geliştirildi.

Responsive Tema Nedir?

Türkçeye duyarlı tema olarak çevirebileceğimiz responsive temalar, web sitelerinin; bilgisayar, tablet, mobil ve benzeri cihazlarda sorunsuz bir şekilde gösterilmesi için kullanılır. Farklı cihazlarda düzgün bir görünüm için özel bir kodlama tekniği kullanılarak geliştirilir.

Blogunuzda kullandığınız temanın veya bir web sitesinin responsive olup olmadığını kontrol etmek çin size 2 ücretsiz araç tanıtmak istiyorum.

1. Am I Rersponsive: Bu siteye gidip sayfanın ortasındaki adres kutusuna blogunuzu adresini yazıp Go tuşuna bastıktan sonra blogunuzun responsive olup olmadığını yazacak ve farklı cihazlardaki görüntüsünü gösterecektir.

2. Responsive Tools: Blogunuzun hangi cihazlarda ve hangi çözünürlüklerde nasıl göründüğünü detaylı olarak incelemek istiyorsanız bu aracı kullanabilirsiniz.


Responsive temalar hakkında kısaca bilgi sahibi olduktan sonra internetten derlediğim responsive Blogger temalarını paylaşmak istiyorum.

Geekiesmn Responsive Blogger Teması

DEMO  &  DOWNLOAD

Yazıların etiketlere göre ayrı bloklarda gösterildiği magazin tarzı ana sayfa görünümüne sahip olan bu temada; hazır reklam alanları, özel 404 hata sayfaları, sayfa numaralandırma ve özel sosyal paylaşım butonları gibi özellikler var.


Metrofy Responsive Blogger Teması

DEMO  &  DOWNLOAD

Metro tarzı bir tasarıma sahip olan bu tema benim favorilerimden. Özellikle header bölümündeki metro tasarım çok orijinal olmuş. Bununla birlikte yatay menu ve sayfa numaralandrma dışında çok fazla özelliğin eklenmediği sade fakat kullanışlı bir tema.

Fizz Responsive Blogger Teması

DEMO  &  DOWNLOAD

Oldukça profesyonel bir görünüme sahip olan bu temada dikkati çeken ilk şey slayt bölümü. Ayrıca modern renk paleti, call to action için ayılmış alan ve 4 sütunlu footer, ana sayfada dikkat çeken özellikler.

My Extra News Responsive Blogger Teması

DEMO  &  DOWNLOAD

İçeriği fazla olan haber blogları düşünülerek tasarlanmış, oldukça özellikli bir tema.  Yatay menünün altındaki rastgele değişen metro tarzı eklenti çok dikkat çekici. “Load more” butonu ile navigasyon ve özel tasarlanmış yorum bölümü temayı öne çıkaran diğer özellikler.

Balance Responsive Blogger Teması

DEMO  &  DOWNLOAD

Temiz ve net bir tasarıma sahip olan bu temada en sevdiğim özellik blogdaki son yazının öne çıkarılması. Ayrıca fazlasıyla görünür ve büyük tasarlanan e-posta abonelik formunun headerda kullanılması akıllıca.

Not: Artık tema paylaşımlarını çoğunlukla BH Pinterest hesabında paylaşıyorum. Blogda bu tür derlemeler veya anlatılması gereken paylaşımlara yer veriyorum. Bu zamana kadar paylaştığım ve bundan sonra paylaşacağım temaları Pinterest’ten kolaylıkla takip edebilirsiniz.

Johny Asal Responsive Blogger teması, magazin temalara güzel örneklerden biri. Ana sayfası yan yana 3 adet galeri tarzı kayıttan oluşan temanın, aynı şekilde 3 stunlu footer alanı bulunuyor. Tasarımda dikkatimi çeken şeylerden biri header ve footerdaki arka plan deseni ile gövde bölümündeki desenin aynı ama renklerinin farklı olması. Küçük ama hoş bir detay. Headerda bulunan açılır yatay menü sayesinde kategori ve linklerinizi ana sayfada gösterebilirsiniz. Diğer özelliklerini gçrmek için demo siteyi incelemenizde fayda var.

DEMO & DOWNLOAD

Temayı kullanmaya karar verdiyseniz blogger tema yükleme ile ilgili bilgi alabilir ya da daha önce paylaştığım diğer blogger temalarına bakabilirsiniz.

Yatay açılır menüyü düzenlemek için şalonun HTML kodlarında şu bölümü bulun:

<ul>

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

<li><a href='#'>Menu 1</a></li>

<li><a class='prett' href='#'>Drop Menu</a>

<ul class='menus'>

<li><a href='#'>Drop Menu 1</a></li>

<li><a href='#'>Drop Menu 2</a></li>

<li><a href='#'>Drop Menu 3</a></li>

</ul>

</li>

<li><a href='#'>Menu 2</a></li>

<li><a class='prett' href='#'>Drop Menu 1</a>

<ul class='menus'>

<li><a href='#'>Drop Menu 1</a></li>

<li><a href='#'>Drop Menu 2</a></li>

<li><a href='#'>Drop Menu 3</a></li>

</ul>

</li>

</ul>

Burada # yerine açılmsını istediğiniz URL’yi yazacaksınız.

Galeri ve magazin tarzındaki bu temayı haber blogları, fotoğraf blogları, moda blogları, yemek blogları ve teknoloji blogları için rahatlıkla kullanabilirsiniz.

Temanın yapımcısı bu temadan SEO dostu, SEO uyumlu bir tema olarak bahsediyor. Bu konuda blogcular arasında çok arayış olduğunu biliyorum. Açıkçası kullanmadığım için gerçekten iddia edildiği gibi arama sonuçlarındaki performansınızı etkiler mi bilemiyorum ama denemekte fayda var.

Demo & Download 

Temanın Özellikleri

- Otomatik “Resimli Devamını Oku” eklentisi mevcut.

- Minimalist, temiz, şık ve kullanıcı dostu bir tasarıma sahip.

- Yatay açılır menü ekli.

- Sosyal butonlar mevcut.

- Hazır reklam alanları var.

- Yazı sonlarında sosyal paylaşım butonları mevcut.

Düzenlemeniz Gereken Yerler

- Sosyal butonlar

<a class='iconFacebook' href='#'>Facebook</a>

<a class='iconTwitter' href='#'>Twitter</a>

<a class='iconRSS' href='#'>RSS</a>

<a class='iconGoogle' href='#'>Google</a>

- Yatay açılır menü

<ul class='dropdown' id='secondmenu'>

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

<li><a href=''>World News</a></li>

<li><a href=''>Entertainment</a></li>

<li><a href=''>Health</a></li>

<li><a href=''>Technology</a></li>

<li><a href=''>Auto</a></li>

<li><a class='sf-with-ul' href=''>Sport</a>

<ul class='sub-menu'>

<li><a href=''>Soccer</a></li>

<li><a href=''>Formula 1</a></li>

<li><a href=''>Rally Racing</a></li>

<li><a href=''>Golf</a></li>

</ul>

</li>

</ul>

Temayı kullanmaya karar verdiyseniz blogger tema yükleme ile ilgili bilgi alabilir ya da daha önce paylaştığım diğer blogger temalarına bakabilirsiniz.

Temanın düzenlenmesiyle ilgili sorularınızı yorum bölümünden sorablirsiniz.

Kişisel blog sahibi bloggerlar, bloglarına uygun bir tema bulmakta zorlanabilirler. Kişisel bloglar insanların kendi düşüncelerini paylaştığı, samimi bloglardır. Dolayısıyla kişisel bir blogun tasarımı da sıcak samimi ve kişisel blogun ruhuna uygun olmalıdır. Aşağıda Blogger platformuna ait en beğendiğim kişisel blog temalarından bir derleme yaptım. Umarım beğenirsiniz.

1. Sunrise Blogger Template

DEMO & DOWNLOAD

Özellikler: Açılır menü, manşet slayt, resimli otomatik devamını oku, özelleştirilmiş yorum bölümü, yukarı çık butonu, sosyal takip butonları.

2. WebDesign Blogger Template

DEMO & DOWNLOAD 

Özellikler: Yatay menü, manşet slider, resimli otomatik devamını oku, 4 sütunlu footer alanı, sayfa numaralandırma, yazar kutusu.

3. Timeline Blogger Template

DEMO & DOWNLOAD 

Özellikler: Tek sütunlu, yatay menü, özel post footer, 3 sütunlu footer alanı, zaman tüneli tarzında tasarım.

4.  Espada Blogger Template

DEMO & DOWNLOAD 

Özellikler: Yatay üst menü, özel post footer tasarımı.

5. Leatherbound Blogger Template

DEMO & DOWNLOAD

Özellikler: Şık tasarım.

6. My Wall Blogger Template

DEMO & DOWNLOAD 

Özellikler:  Resim tabanlı tasarım, sol sidebar sabit, özel sosyal paylaşım butonları.

7. Lummoxie Blogger Template

DEMO & DOWNLOAD

Özellikler: Üst menü, özel yorum bölümü, şık tasarım.

8.  My Personal Diary Blogger Template

DEMO & DOWNLOAD 

Özellikler: Resim tabanlı tasarım,

9. CherryTruffle Blogger Template

DEMO & DOWNLOAD 

Özellikler: Üst menü, yatay açılır menü, sosyal takip butonları, resimli otomatki devamını oku, sayfa numaralandırma, 3 sütunlu footer alanı, özelleştirilmiş yorum bölümü.

10. Compartidisimos Blogger Template

DEMO & DOWNLOAD

Özellikler: Üst menü, sabit manşet, resimli otomatik devamını oku, 3 sütunlu footer, özelleştirilmiş yorum bölümü.

Araştır, toparla, düzenle… derken epey uğraştım bu yazıyı hazırlamak için. Alttaki butonları kullanarak sosyal ağlarda paylaşırsanız sevinirim.

Zaman geçtikçe her alanda olduğu gibi Blogger temalarında da teknoloji gelişiyor. 2013 yılıya birlikte Blogger tema yapımcıları yeni ve güzel temalar kodlamaya başladılar. Bu yıl tanıtmak istediğim ilk temanın ismi MaxMag.

MaxMag isimli bu temanın pek çok özelliği var. Bunlardan kısaca bahsetmek istiyorum.

• Responsive, kullanıcı dostu tasarım
• Hazır reklam alanları
• Ticker haber akışı
• Sabit yatay açılır menü
• Şık slider manşet alanı
• Hazır arama kutusu ve sosyal butonlar
• Resimli otomatik devamını oku eklentisi
• Yazar bilgi kutusu
• Resimli benzer yazılar eklentisi
• Özelleştirilmiş yorum kutusu

DEMO & DOWNLOAD

- Sabit yatay açılır menüyü düzenlemek için şablonda şu kodları bulup isimleri değiştirin ve # yerine açılmasını istediğiniz URL’leri yazın.

<div class='menu-main-nav-container'><ul><li><a href='#'>Home</a></li>

<li><a href='http://#'>Features</a>

<ul class='sub-menu'>

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

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

<li><a href='#'>Wallpaper Ad</a></li>

<li><a href='#'>Full Width Page</a></li>

<li><a href='#'>Archives Page</a></li>

<li><a href='#'>Homepage Blog</a></li>

<li><a href='#'>No Leaderboard</a></li>

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

</ul>

</li>

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

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

<ul class='sub-menu'>

<li><a href='http://#'>Blogs</a></li>

<li><a href='http://#'>Columnists</a>

<ul class='sub-menu'>

<li><a href='http://#'>Max Mag Staff</a></li>

</ul>

</li>

</ul>

</li>

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

<ul class='sub-menu'>

<li><a href='http://#'>Blogs</a></li>

<li><a href='http://#'>Columnists</a></li>

</ul>

</li>

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

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

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

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

</ul></div>

- Blog başlığının yanındaki küçük linkleri değiştirmek için şu kodları bulup aynı ekilde düzenleyin.

<div class='menu-secondary-nav-container'>

<ul>

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

<li><a href='#'>Support Center</a></li>

<li><a href='#'>Purchase Theme</a></li>

</ul>

</div>

- Ticker haber akışında gösterilecek haberleri değiştirmek için şu kodları bulup düzenleyin.

div id='ticker'>

<span class='ticker-heading'>Don't miss</span>

<ul class='ticker-list'>

<li><a href='#/'>Fashion For Grown Ups at Rue du Mail</a><span class='ticker-date'>Posted 125 days ago</span></li>

<li><a href='#'>Size matters at Monaco Yacht Show</a><span class='ticker-date'>Posted 131 days ago</span></li>

<li><a href='#'>Seven tasty pizza recipes everyone will enjoy</a><span class='ticker-date'>Posted 131 days ago</span></li>

<li><a href='#'>Find delicious, easy sundae recipes</a><span class='ticker-date'>Posted 131 days ago</span></li>

<li><a href='#'>Three-Way Tie at Weekend Box Office</a><span class='ticker-date'>Posted 131 days ago</span></li>

<li><a href='#'>Dave Matthews Band bigger than Dylan</a><span class='ticker-date'>Posted 135 days ago</span></li>

</ul>

</div>

- Sosyal butonları kendi hesaplarınıza bağlamak için şablondan şu kodları bulup hesap adreslerini değiştirin.

<li><a alt='Facebook' class='fb-but' href='http://www.facebook.com/templateism' target='_blank'></a></li>

<li><a alt='Twitter' class='twitter-but' href='http://www.twitter.com/templateism' target='_blank'></a></li>

<li><a alt='Pinterest' class='pinterest-but' href='http://www.pinterest.com/fosterzone' target='_blank'></a></li>

<li><a alt='Google Plus' class='google-but' href='https://plus.google.com/106374439082237286396/' target='_blank'></a></li>

<li><a alt='YouTube' class='youtube-but' href='#' target='_blank'></a></li>

<li><a alt='Linkedin' class='linkedin-but' href='http://www.linkedin.com/company/#' target='_blank'></a></li>

<li><a alt='RSS Feed' class='rss-but' href='#'></a></li>

Magazin, teknoloji, moda, haber ve eğlence türündeki bloglar için uygun olabilecek bir tema. Temay kullanmaya karar verdiyseniz blogger tema yükleme ile ilgili bilgi alabilir ya da daha önce paylaştığım diğer blogger temalarına bakabilirsiniz.

Temanın düzenlenmesiyle ilgili sorularınızı yorum bölümünden sorablirsiniz.

Bir süre önce, kendi düzenlediğim Sementit Blogger temasının beta versiyonunu, sosyal medya hesaplarımda yaptığım bazı etkinliklerle paylaşmıştım.Gelen geri bildirimler sonucunda temadaki hataları ve eksikleri gidererek tam sürümünü blogda paylaşmaya karar verdim.

Öncelikle temanın orijinalinden bahsetmek istiyorum.Daha önce de belirttiğim gibi bu temayı sıfırdan kodlamadım.Alfa isimli temayı düzenleyerek bu hale getirdim. Tema nereden nereye geldi diye merak ediyorsanız buyurun ilk ve son hali…

                                        ÖNCE                      SONRA

Temaya pek çok özellik ekledim ve modern bir görünüme kavuşturdum.Kısaca özelliklerinden bahsetmek gerekirse:

• Header  bölümünün geniş olması çok istendi.Bu blogunuzun banner ya da logosunu koyabileceğiniz header bölümünü genişlettim.
• Sayfalar arasındaki geçiş önceki – sonraki şekilndeyken numaralı geçiş eklentisini ekledim.
• Arka plan resmini ve renk paleetin tamamen değiştirdim.
• Tipografi, yazı başlıkları ve sidebar başlıklarını değiştirdim.
• Resimli benzer yazılar eklentisi ve paylaşım kutusu ekledim.
• Yorum bölümünü özelleştirdim.
• Statik sayfalardaki hatayı düzelttim.

Temanın diğer özelliklerini görmek ve düzenleme konusunda bilgi almak için DEMO siteye bakabilirsiniz.

Demo sitedeki yorumları kapattım.Temayla ilgili tüm sorularınızı bu başlık altına yorum yazarak sorun lütfen

>>> Download Sementit Blogger Theme <<<

Sıradışı özellikleriyle dikktimi çeken Blogger temalarını paylaşmaya devam ediyorum.Bugün paylaşcağım Legit isimli tema da Dzignine tarafından kodlanmış çok etkileyici bir tema.

DEMO & DOWNLOAD

Temada dikkatimi çeken başlıca özellikler şunlar:

• Hareketli Header: Temaın en göze çarpan özelliği HTML5 teknolojisi ile oluşturulmuş Header bölümü.Bulut animasyonu gerçekte hoş olmuş.
• Sağ & Sol Sidebar: Temanın içerik bölümünün sağ ve sol tarafında toplam 2 adet sidebar var.Sidebar’daki gadget başlıkla kullanılan özel font Türkçe karakterlerleri desteklemediği için Türkçe karakter kullanmamanızı öneririm.
• Blog Başlığı: Header kısmındaki animasyonun bozuomaması için her zaman üst tarafta görmeye alıştığımız blog başlığı bu temada sol sidebarın en üstünde.

Sade ve şık bir tasarıma sahip Legit teması renk uyumuyla da başarılı bir çalışma bence.Kişisel bloglar için çok uygun bir tema.Animasyonlu header sayesinde ziyaretçilerin dikkatini çekeceğinizden emin olabilirsiniz.

Dikkat ettiyseniz bir blogda sadece farklı özelliklere sahip ve orijinal temalar paylaşıyorum.Beğendiğim diğer tüm temaları ise Facebook, Google+ ve Twitter hesaplarımda paylaşıyorum.

DEMO & DOWNLOAD

Smoother temasının da kendine has, harika özellikleri olduğu için blogda paylaşmaya karar verdim.İşte temanın göze çarpan bazı özellikleri:

• Temanın sağ tarafında şık bir sidebar var.Sol tarafta ise sayfayla birlikte kayan ve sadece paylaşım butonlarından oluşan bir bar var.
• Blog başlığında kullanılan font hover efekti sayesinde logosu olmayanların ayrıca logoya ihtiyacı yok.
• Yazı başlıklarında gölgelendirme kullanılmış ve üzerine gelindiğinde yumuşak bir renk geçişi var.
• Numaralı sayfa navidasyonu, otomatik devamını oku gibi bazı eklentiler hazır.
• Tüm  ekran çözünürlüklerinde sorunsuz çalışıyor.
• Blogger şablon düzenleyiciyle uyumlu olduğu için bazı değişiklikleri kolayca yapabilirsiniz.

Bugüne kadar paylaştığım Blogger temaları arasında benm en iyisi olduğunu düşündüğüm bir temayı tanıtcağım size.Görünüm olarak sade ve çok dikkat çekici değil ama özelliklerini görünce bana hak vereceksiniz.

DEMO & DOWNLOAD

• Sayfa Görünümü: Blogu açtığınızda yazılar liste şeklinde alt alta gözüküyor.Ancak barın hemen başındaki grid view ikonuna basarak galeri görünümüne geçebiliyorsunuz.İstediğiniz an list view ikonuna basarak liste görünümüne dönüş yapabiliyorsunuz.Oldukça hızlı ve pratik.
• Açılır Menü: Temanın en orijinal özelliklerinden biri de barın devamındaki açılır menü.Menüdeki her bir öğenin başında bir ikon var ve bu öğelerin içine gadgetlar entegre edilmiş.Menüdeki son yazılar, son yorumlar ve kategoriler öğelerinin üzerine geldiğinizde açılan panelde o gadgetları göreceksiniz.
• Sosyal Butonlar: Barın devamındaki sosyal butonlar CSS sprite iözelliği kullanarak oluşturulmuş ve üzerine geldiğinizde rkendi rengine dönüşüyor.
• Arama Kutusu: Barın sonundaki arama kutusu ilk bakışta size klasik, her sitede gördüğünüz bir arama kutusu gibi gelebilir ama işin aslı öyle değil.Bir arama yaptığınızda küçük bir pencere açılarak sonuçlar orada gösteriliyor.Ana sayfaız açık kalıyor.
• Yorum Bölümü: Temanın bir diğer güzelliği de yorum bölümü.Özellikle bir kişinin yorumunu yanıtladığınızda aynı çerçeve alındığı için o kişiye verdiğiniz cevap net belli oluyor.

Bunların dışında resimli otomatik devamını oku, Cufon gibi diğer temalarda bulabileceğiniz özellikler de var ama onlardan bahsetmeyeceğim.

Pegasus teması, ana sayfada sadece yazıda kullanılan resimlerin gösterildiği çok şık bir tema.Resimlerin üzerine geldiğinizde o resme ait yazı başlığı beliriyor ve tıklandığında kayıt sayfasına yönleniyor.

Ana sayfada kayıtlara ait resimlerin dışında 4 sütunlu footer alanı ve yatay açılır menünün bulunduğu bir header var.Sayfalar arasındaki geçiş sayfa nbumaralandırma eklentisi kullanılarak kolaylaştırılmış.

Bu temanın sidebarı nerede diye sorabilirsiniz.Ana sayfada minimalist bir tasarım istendiği için sidebar sadece kayıt sayfalarında gözüküyor.

Son olarak yorum bölümünden bahsetmek istiyorum.Yorumlarda dişli yorum sistemi mevcut ve güzel bir stil kullanılmış.Ayrıca blog yazarının yorumlarının bir rozet kullanılarak belirginleştirlmesi güzel bir detay olmuş.

DEMO & DOWNLOAD

Demosuu inceleyip temayı kullanmaya karar verdiyseniz düzenlemeniz gerekenttekyer olan üstteki yatay menüyü nasıl düzenleyeceğinizi göstereyim.Menünün kodları şunlar:

<div class='menu-main-container'>
<ul class='sf-menu' id='menu-main'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Styling</a></li>
<li><a href='#'>Skins</a>
<ul class='sub-menu'>
<li><a href='#'>Black</a></li>
<li><a href='#'>Blue</a></li>
<li><a href='#'>Purple</a></li>
<li><a href='#'>Teal</a></li>
<li><a href='#'>Green</a></li>
<li><a href='#'>Orange</a></li>
<li><a href='#'>Silver</a></li>
<li><a href='#'>Yellow</a></li>
</ul>
</li>
<li><a href='#'>Templates</a>
<ul class='sub-menu'>
<li><a href='#'>Portfolio &amp; Blog Mixed Homepage</a></li>
<li><a href='#'>Full-Width Page</a></li>
<li><a href='#'>Full-Width Page with Featured Image</a></li>
<li><a href='#'>Full-Width Page with Slider</a></li>
<li><a href='#'>Standard Page with Featured Image</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Blog Categories</a>
<ul class='sub-menu'>
<li><a href='#'>Animals</a></li>
<li><a href='#'>Places</a></li>
</ul>
</li>
<li><a href='#'>Portfolio Categories</a>
<ul class='sub-menu'>
<li><a href='#'>Places</a></li>
<li><a href='#'>Animals</a></li>
<li><a href='#'>People</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Purchase</a></li>
</ul>
</div>

Menüde yer alan her öğeye ait kod  <li><a href='#'>Contact</a></li> şeklinde gösterilir.Buraadaki # yerine Contact yazısına tıklayınca açılmasını istediğiniz sayfanın URLsini yazacaksınız.

Yeni bir orjinal tema paylaşımı ile karşınızdayım.Bu temanbın ismi ise Float.Blogcuların kullandıüı temalar birbrine o kadar benziyor ki böyle usta tasarımcıarın elinden çıkan orjinal bir tema ile karşılaştıımda çok hoşuma gidiyor ve paylaşma ihtiyacı duyuyorum.

Demo – Download

Üstteki yatay menüyü düzenlemek için şanblondan şu kodlrı bulun:

<ul class='menu' id='menu-menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Styling</a></li>
<li><a href='#'>Drop-down</a>
<ul class='sub-menu'>
<li><a href='#'>News</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Some Link</a></li>
</ul>
</li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact</a></li>
</ul>

Menüdeki her bir öğeyi şu şekilde düzenleyeceksiniz:

<li><a href='Açılacak link'>Öğenin adı</a></li>

Düzenlemeniz gereken diğer bir yer ise sosyal butonlar.Bunun için şablondan aşağıdaki kodları bulun:

<ul>
<li><a href='#' id='dribbble'>Dribbble</a></li>
<li><a href='http://facebook.com' id='facebook'>Facebook</a></li>
<li><a href='#' id='flickr'>Flickr</a></li>
<li><a href='http://twitter.com' id='twitter'>Twitter</a></li>
<li><a href='#' id='google'>Google+</a></li>
<li><a href='#' id='tumblr'>Tumblr</a></li>
<li><a href='#' id='pinterest'>Pinterest</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' id='rss'>RSS</a></li>
</ul>

Her bir sosyal ağın önündei # işareti yerine o sosyal ağa ait adresinizi yazın.Örneğin:

<li><a href='http://twitter.com/bloghocam' id='twitter'>Twitter</a></li> gibi

Eğer listedeki sosyal ağlar arasında hesabınız olmayanlar varsa o satırı tamamen silebilirsiniz.

Bu güne kadar gördüğünüz en orjinal Blogger temasıyla tanışmaya hazır mısınız? Giriş cümlesi size çok iddialı gelmiş olabililr ama temayı test edip özelliklerini görünce bana hak vereceksiniz.

Aslında premium olan bu tema ilk kodlandığında yanlış hatırlamıyorsam $20 civarında bir fiyata satılıyordu.Sonra ne oldu bilmiyorum temanın yapımcısı ücretsiz dağıtmaya karar verdi.İşte bu temanın özellikleri:

• ThumbCropper: Bildiğiniz gibi normal temalarda ana sayfada yazıya ait resmin thumbnail şeklinde küçültülmüş haki gözükür.Bu temada kullanılan ThumbCropper aracı sayesinde yazının içerisindeki resim kırpılarak ana sayfada gözükür.
• Sonsuz Scroll: Twitter2da ve bazı sitelerde sayfanın altında daha fazla diye bir buton yer alır ve o butona tıkladığınızda sayfaya yeni öğeler eklenerek saşağı doğru ayar.İşte bu temada da ileri-geri veya numaralı sayfa geçişleri yerine bu özellik kullanılmış.
• 2 Renk Seçeneği: Temayı indirdiğinizde zip dosyasının içinde açık ve koyu renk seçenekleri için 2 adet .xml dosyası bulacaksınız.Eğer beyaz versiyonunu tercih etmiyorsanız gri versiyonunu da kullanabilirsiniz.
• Tarayıcı uyumluluğu: Temalarda yaşanan en büyük sorulardan biridir farklı tarayıcılarda düzgün çalışmaması.Bu tema tarayıcı uyumlu olduğu için tüm tarayıcılarda sorunsuz çalışmaktadır.

Demosuna da baktıysanız bu temayı neden bu kadar övdüğümü anlamışsınızdır.Fotoğraf ağırlıklı blog yazanlar veya blogunu portföy gibi kullananlar için bu şiddetle tavsiye ediyorum bu temayı.Gördüüm tek zayıf tarafı ise sanırım yorum bölümü.

Uzun zamandır Blogger teması paylaşmıyordum.Sebebi takip ettiğim tema sitelerinde hep benzer temaların olmasıydı.Farklı olanları da ya beğenmiyordum ya da bir yerinde eksik görüyordum.Nihayet paylaşmaya değer güzel bir temaya rastladım.İsmi Bloom.

Özellikleri

• Şık arama kutusu.
• Header’da iki kademeli açılır yatay menü.
• Slayt manşet alanı.
• Sabit manşet alanı.
• İki sütunlu kayıt alanı.
• Numaralı sayfa navigasyonu.
• Resimli otomatik devamını oku eklentisi.

Şimdi de düzenlemeniz gereken yerlerden bahsedeyim:

1. Kademe Yatay Menü: Açık renk zemin üzerine olan açılır yatay menüyü kendinize göre düzenlemek için şablonun HTML kodlarında şu bölümü bulun:

<ul class='wpn_menu' id='menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Get in Touch</a></li>
<li><a href='#'>HTML Elements!</a>
<ul class='children'>
<li><a href='#'>Headings</a></li>
<li><a href='#'>List Fun</a></li>
<li><a href='#'>Blockquotes!</a></li>
</ul>
</li>
<li><a href='#'>Page Templates</a>
<ul class='children'>
<li><a href='#'>Links &amp; Bookmarks</a></li>
<li><a href='#'>Lost? View Sitemap</a></li>
<li><a href='#'>No Sidebars</a></li>
</ul>
</li>
</ul>

Burada dikkat etmeniz gereken şey ul class='children' ile /ul arasındaki bölümün açılır menünün açılan kısmına ait olduğudur.

2. Kademe Yatay Menü: Hemen altındaki kinci yatay menüyü düzenlemek için de şu kodları bulun:

<ul class='wpn_submenu' id='submenu'>
<li><a href='#'>Culture + Celebrity</a></li>
<li><a href='#'>Fashion + Beauty</a></li>
<li><a href='#'>Food + Health</a></li>
<li><a href='#'>Travel + Nature</a>
<ul class='children'>
<li><a href='#'>Dropdown Flyout</a>
<ul class='children'>
<li><a href='#'>Child 2nd Level</a>
<ul class='children'>
<li><a href='#'>Child 3rd Level</a>
<ul class='children'>
<li><a href='#'>Child Item #1</a></li>
<li><a href='#'>Child Item #2</a></li>
<li><a href='#'>Child Item #3</a>
</li></ul></li></ul></li>
</ul>
</li>
<li><a href='#'>Dropdown Item</a>
</li></ul>
</li>
</ul>

Burada da her ul class='children' komutu yeni bir alt link oluşturmanızı sağlar.

Slayt Manşet: Menülerin hemen altındaki slayt manşeti düzenlemek için şu kodları bulun:

<div class='imageElement'><h2>Was &#8220;Free Willy&#8221;Better Off in Captivity?</h2><p/>
<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYT0WfyS7UKwM5EUgzsFwIfhapWLR6Y2-ujk5LkeJK71AdOXYW5kohnvRmDC3M2BvzVR2OlsT6U2YTTvYDwsTLwPYTYcf84WiDidMhtVtVFUvmk8ZNblE25s1GWZQR3yi2cwr8X7BBofzz/s586/free-willy.jpg'/>
<img class='thumbnail'/></div>

<div class='imageElement'><h2>One for Mom,One for Mother Earth</h2><p/>
<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVr3lI6A5_sh-TKHnRcO-YjO1CIIh7f6uK-HTNtDRC9CK34I5WAr3-V_8t0cztFdrq9Ohd6XrOlgQ39OKtaBZ7N-xss-_h2J70jNKXHI8Z-5WFf7iFdCsul7fs9sTFacBSM2F4ajvxkXke/s586/earth.jpg'/>
<img class='thumbnail'/></div>

<div class='imageElement'><h2>Power Station Takes an Axe to Santa&#8217;s Workshop</h2><p/>
<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQkzvjotWCE5eriY6cREBGBggSnTKR6liMXQ54VN2uUFRIQMKxRRlwMi2evwMIrF7NI9ghxSpiV3csjczI7WS7fGGXnhDYkpKaU-CIpKjZj25j5XOE8-z2EYzQMF5t6shHx1YfdChkaCCX/s586/santas.jpg'/>
<img class='thumbnail'/></div>

<div class='imageElement'><h2>Ben Southall Wins Spot as Island Caretaker</h2><p/>
<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj2-Ddi8g0eC3sdajri9S2bDKCkhGzuudD9W2_E40nVxaZ4sK6iCegP3uBFw7qOGqD-SvK38xUvsYHx_j9gY7RqbRWlDRi1YWHWBCe3AXwaCbFw5HvBYzjBNOgePZTMtAbOzj_fKR1T5FI/s586/island.jpg'/>
<img class='thumbnail'/></div>

<div class='imageElement'><h2>Australia Seeks $18 Million for Moreton Island</h2><p/>
<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VVHuJxC0rEgFDjdeEs_yuLH365kfcJC88Nx_yz6HRrFmn52wiZKeuq90mQ-xWav_t8owDuJa3gbK757mpD5IqCPFDdJexREfvro5FKE3-51OtfA5prZnWs3xzP8t8RgnrLRwhU-SIG0Y/s586/australia.jpg'/>
<img class='thumbnail'/></div>

Burada gösterilecek resimleri, o resme ait başlıkları ve resme tıklayınca açılmasını istediğiniz sayfaları belirleyeceksiniz.

Sabit 3’lü Manşet: Slaytın hemen altında yan yana 3 adet manşet daha var.Bunları düzenlemek için sayfa öğelerine (yerleşim) gidip Highlight1, 2 ve 3 isimli gadgetları düzenle deyin ve gösterilecek resmi, yazıyı ve linki oradan değiştirin.

Bu güne kadar hiç 3 sütunlu bir Blogger teması paylaşmamıştım.Neden bilmiyorum ama 3 sütunlu blog temalarına bir türlü ısınamadım.İlk defa beğendiğim ve paylaşmaya değer gördüğüm 3 sütunlu bir Blogger teması ile karşılaştım.Temanın ismi WP-OpenCart ve Wordpress ‘ten Blogger’a çevrilmiş bir tema.

3 sütunlu bir tema olarak test bloguma yüklediğimde aynı zamanda 2 sütunlu olarak kullanılabildiğini de farkettim.Sidebarlardan birini boş bıraktığınızda tema otomatik olarak 2 sütunlu bir temaya dönüşünüyor.Hem de hizalama ve yerleşim sorunu yaşamadan.Yorum bölümünde yorum yanıtlama seçeneğinin de aktif olduğunu ve sorunsuz çalıştığını hatırlattıktan sonra sizi temanın demousu izlemeye davet ediyorum…

Temanın demo sitesi ingilizce ve orjinalidir.Ancak indirdiğinizde zip klasörünün içinden türkçe hali çıkacaktır.Bir kaç küçük değişklik yapıp temayı türkçe olarak upload ettim.O yüzden demonun inglizce olması sizi yanıltmasın :)

Temada düzenlemeniz gereken tek yer yatay menü.Yatay menüyü ister açılır, ister normal yatay menü olarak kullanabiliriz.Şablonda menüye ait kodları şunlardır:

<div class='menu'>
                <ul>
                  <li class='page_item'><a href='#' title='Menu #1'>Menu #1</a></li>
                  <li class='page_item'><a href='#' title='Menu #2'>Menu #2</a></li>
                  <!-- begin example drop down menu -->
                  <li class='page_item'><a href='#' title='Menu #3'>Menu #3</a>
                    <ul class='children'>
                      <li class='page_item'><a href='#' title='Sub Menu #1'>Sub Menu #1</a></li>
                      <li class='page_item'><a href='#' title='Sub Menu #2'>Sub Menu #2</a></li>
                    </ul>
                  </li>
                  <!-- end example drop down menu -->
                  <li class='page_item'><a href='#' title='Menu #4'>Menu #4</a></li>
                </ul>
              </div>

Arama kutusunun üzerindeki Home – About – Contact yazan yerlerde oluşturduğunuz statik sayfalar otomatik olarak gözükecektir.Orada Sayfalar gadgetı ekli.Her hangi bir değişikliğe gerek yok.

Son olarak paylaşttığım diğer Blogger temalarına ve Blogger temalarının nasıl yükleneceğini bilmeyenler için hazırladığım yazıya bakmanızı öneriyorum.

Wordpress’ten Blogger’a BloggerReflex tarafından çevrilen Busby Blogger Teması, şık ve profesyonel görnümüyle dikkatimi çekti ve burada paylaşmak istedim.Denemek için test bloguma yüklediğimde Bloggr Şablon Tasarımcısı ile uyumlu olduğunu gördüğümde bu tema benim için daha değerli hale geldi.Bunun gibi Blogger Şablon Tasarımcısı ile uyumlu tema bulmak çok kolay olmuyor.

Temanın görünümü Blogger Şablon Tasarımcısından istediğiniz gibi değiştirebileceğinizi hatırlattıktan sonra kodlarda düzenlemeniz yerlere geçiyorum.

Twitter, RSS, Facebook Butonları

Sağ üst tarafta, blog başlığının yaında bulunan Twitter, RSS ve Facebook butonlarını düzenlemek için aşağıdaki kodları bulun ve # yerine kendi Twitter, RSS ve  Facebook adreslerinizi yazın.

<ul id='social'>
        <li class='twitter'><a href='#'>Twitter</a></li>
        <li class='rss'><a href='#'>RSS</a></li>
        <li class='facebook'><a href='#'>Facebook</a></li>
    </ul>

Manşet

Manşette slayt olarak gösterilen resimleri ve başlıkları düzenlemek için aşağıdaki kodları bulun.Kodlarda ki # yerine açılmasını istediğiniz sayfanın adresini, Post Title yerine açılacak sayfanın başlığını, http://……jpg yerine ise gösterilecek resmin adresini yazın.

<ul>               
            <li><h2><a href='#'>Post Title</a></h2> <a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW76YfE2BWkWxeSJ-cg9GOz_jIHbtLmY84bkMmaym4lVc7lUckUjc616MYBshevM-Bda7Lpx856KsaCpTp6qqx_BBD0thq2JdRwroUI1WATPb4bdwJXYFuWCZP820OAIqxz_-dNt3i48A/s1600/spray-paint.jpg'/></a></li>
            <li><h2><a href='#'>Post Title 1</a></h2> <a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHWXlkSk82LnQP1WuPDfdN3OK5asuB3hg32SWSldqZWqfzGV4pmtF4T3J536F7XooiSJskFGzdPZIWIXkN34kfcNEbuAaEEJHiC0wTzJ9oSkk8KKzJVpHpTO7-VtrbCWB8wRmB7oiIko/s1600/south-bank-graffiti.jpg'/></a></li>
            <li><h2><a href='#'>Post Title 2</a></h2> <a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwtjNtpMvY40E2iDuhZRXSD8NujfXrrjxOwMLGcTKJDQGvBhna9QHdQzkHGKwMz0aXBLWW4flWmbGjk7I9ce-tPSm5fM6B1khi0mksInaFG8OwxCnc8d3B809b6EgSyEhUNYl5fDEcM4/s1600/skater.jpg'/></a></li>       
        </ul>

Tarih

Temayı yüklediğinizde büyük ihtimalle yazı başlıklarınınn yanında tarih gözükmesi gerekirken undefined gibi bir şey yazacaktır.Bunu düzeltmek için yapmanız gereken ayarlar şöyle:

1. Kumanda Paneline giriş yaptıktan sonra Ayarlar > Biçimlendirme > Tarih Başlığı Biçimini > Cuma, Şubat 10, 2012 olarak ayarlayın.

2. Yine aynı yerdeki Tarih Damgası Biçimini > Cuma, Şubat 10, 2012 olarak ayrlayarak kaydedin.

Yapılması gereken ayarlar bu kadar.Artık Busby teması kullanıma hazır.Her hangi bir sorun yaşrsanız yorum bölümünden iletebilirsiniz.

Custom Blogger Templates sitesinde Blogger temaları yapan Harish, yeni bir Premium Blogger teması yapmış.Bildiğiniz gibi internetten indirdiğimiz temalar Blogger Şablon Tasarımcısı ile uyumlu olmadığından dolayı bu temalarda değişiklik yapamıyoruz.İşte Elite Minima isimli bu temanın en güzel özelliği Blogger Şablon Tasarımcısı ile uyumlu olması.Bu sayede renkleri, yazı tiplerini, boyutlarını kolayca değiştirebilirsiniz.

Temada Türkçeleşmesi gereken birkaç yer vardı.Onları Türkçeleştirip kendi Box hesabıma upload ettim.Temayı Türkçe olarak kullanabilirsiniz.

Yazı başlıklarında kullanılan font Ş karakterini desteklemiyor.İsterseniz Blogger Şablon Tasarımcısı’ndan fontu değiştirebilirsiniz.

Temanın bazı özellikleri şöyle:

• Özelleştirilebilir, temiz, minimal arayüz.
• CSS3 ile oluşturulmuş şık arama kutusu.
• Resimli otomatik “devamını oku” eklentisi.
• 3 sütunlu footer alanı.
• Şeffaf hover efektli sosyal paylaşım butonları.
• Benzer yazılar eklentisi.

Blogger’da nasıl tema değiştirileceğini bilmiyorsanız buraya bakabilir, paylaştığım diğer Blogger temalarını ise buradan görebilirsiniz.