25 Şubat 2016 Perşembe

Responsive Blogger Tema Tasarım Nasıl Yapılır ?

25 Şubat 2016 Perşembe
responsive blogger tema yapımı
Responsive Blogger Tema Tasarımı ve Yapımı
Responsive tasarımlar(dizaynlar) bu günlerde profesyonel web tasarımının bir parçası haline geldiler. Sahip olduğumuz blog ve web sitelerinde bile kullanıcılar responsive web tasarımı tercih ediyor. Büyük blogların birçoğu artık farklı mobil versiyonlar yerine responsive blog tasarımı kullanıyor. Responsive tasarım ayrıca yükleri azaltıyor ve SEO dostu olarak karşımıza çıkıyor.
Ama temel soru şu: Web site temasını responsive olarak tasarlayabiliyoruz ama Blogger temelli temaları da responsive olarak tasarlayabilir miyiz ? Evet, tasarlayabilirsiniz.
Blogger, blogların geliştirilmesi için büyük bir içerik yönetim sistemi (CMS) platformu haline geldi. Hatta Blogger, WordPress ile kıyaslandığında çok daha fazla güzel özelliklere sahip. Tema tasarımı, Blogger’da WordPress’e göre çok daha kolay yapılabiliyor. Blog temalarının daima WordPress temaları kadar profesyonel olmadığını düşünüyoruz, fakat ben bu görüşe katılmıyorum. Etkileyici ve şık bir tema tasarımı için HTML, CSS, JS, jQuery, Ajax gibi yeterli ve Blogger ile uyumlu birkaç tasarım diline ihtiyacımız var.
Bugün size mevcut tasarımınızı nasıl responsive Blogger temasına çevireceğinizi anlatacağım.

Responsive Tasarım Ne Anlama Geliyor ?
Bir tasarımı responsive yapmak aynı temayı kullanarak bu temayı Desktop, Laptop, Tablet veya Smartphone gibi farklı boyutlardaki cihazlarla uyumlu bir hale getirmenin bir yoludur. Stil şablonu kullanılarak yapılan Responsive tasarım, kodlama yükünün düşürülmesi demektir. Bu günlerde her blog ayrı bir mobil versiyon yerine responsive tasarımı tercih ediyor. Bunun sebebi, mobil versiyonların temel sorununun farklı ekran boyutlarıyla pek kullanışlı olmaması. Mesela; bir web sitesini smartphone için tasarlarsak bu web sitesi tabletlerde aynı şekilde düzgün çalışmayabiliyor. Yani bu sorunu responsive tasarımın cihaza karşı duyarlı olmasıyla çözüyoruz.

Responsive Tasarım mı Yoksa Mobil Versiyon mu ?
  •  Responsive tasarımlar, ayrı bir mobil versiyonla kıyaslandığında SEO dostudur.
  •  Responsive tasarım kendi kendine Tablet, Smartphone ve diğer cihazlardaki farklı ekran boyutlarına uyum sağlar. 
  •  Responsive tasarım, sitenin yüklenme hızını arttırır. Yani sitenin performansını komple arttırmış olur. 
  •  Responsive tasarım ayrıca kazançlarınızı arttırır. Duyarlı Adsense reklam birimini kullanarak kazançlarınızı maksimize edebilirsiniz.
Mevcut Blogger Temanızı Responsive Haline Dönüştürün:

Bu işleme devam etmeden önce HTML5 ve CSS3 hakkında temel bir bilgi birikiminiz olduğundan emin olmalısınız. Çünkü ben sadece size metodla ilgili rehberlik ediyorum. Bunun uygulanması tamamen sizin tema kodunuza bağlıdır, yani bütün class (sınıf) ve ID (kimlik) temadan temaya değişen bir şeydir. Yani bu bilgi her zaman sabit bir yapıda değildir.

•İlk olarak Blogger Blog’unuzu açın ve tema kısmına gidin.

•Edit HTML yazan yere tıklayın ve sonra aşağıda vermiş olduğum meta kodunu <head>  etiketinin altına yapıştırın.
 <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1¨/>

•Şimdi Responsive Stil Şablonunu ekleyin, ]]></b:skin> şeklinde gözüken kodu arayın.

•Altta bulunan resposive CSS kodları yapıştırın.

Burada hemen altta, yapıştırmanız gereken tüm responsive CSS sorgularını bulabilirsiniz. Sonra, kendi mevcut class’larınızı ve CSS kimliğinizi duyarlılık için eklemeye başlayın.

@media screen and (max-width : 1280px) { Ekran Boyutu 1280’den Az Olanlar İçin
MASAÜSTÜ İÇİN CSS KODUNU BURAYA EKLEYİN
}
@media screen and (max-width : 1024px) {
Ekran Boyutu 1024’den Az Olanlar İçin
TABLETLER İÇİN CSS KODUNU BURAYA EKLEYİN
}
@media screen and (max-width : 768px) {
Ekran Boyutu 768’den Az Olanlar İçin
KÜÇÜK TABLETLER İÇİN CSS KODUNU BURAYA EKLEYİN
}
@media screen and (max-width : 640px) {
Ekran Boyutu 640’dan Az Olanlar İçin
IPHONE İÇİN CSS KODUNU BURAYA EKLEYİN
}
@media screen and (max-width : 480px) {
Ekran Boyutu 480’den Az Olanlar İçin
AKILLI TELEFONLAR İÇİN CSS KODUNU BURAYA EKLEYİN
}
@media screen and (max-width : 320px) {
Ekran Boyutu 320’den Az Olanlar İçin
KÜÇÜK MOBİL CİHAZLAR İÇİN CSS KODUNU BURAYA EKLEYİN
}

Yukardaki formatı kopyala yapıştır yapın ve /* CSS KODUNU BURAYA EKLEYİN —*/ yazan yeri tüm cihazlara göre sizin blogunuzun Header, Post Body, Sidebar, Footer ve diğer kısımlarının class’ları ve ID’lerinin CSS kodlarıyla değiştirin.
@media screen etiketi CSS’yi farklı ekran boyutlarında responsive yapmaya yarıyor.
(max-width : **px) olarak gözüken yer maksimum genişliği gösteriyor. Eğer kodu 320 kısmına yerleştirirseniz, bu ekran boyutunun 320’den küçük olduğu zamanlarda kodun çalışacağını gösterir. Ekran boyutunun 320’den büyük olduğu durumda bu çalışmaz. Şunu bilmek lazım eğer 480’e CSS’nizi koyup 320’ye herhangi bir şey koymazsanız, 480’de bulunan kod 0-480 arası bir aralıkta çalışır. Ama 320’ye herhangi bir CSS kodu koyarsanız, 480’de bulunan kodlar sadece 320-480 aralığında çalışacaktır. Sadece aynı class ve ID’ler için iki ekran boyutunda da kullanabilirsiniz.

Bir örneğe göz atalım:
@media screen and (max-width: ****px){
#main-wrapper { width:100%; margin:0px auto; }
.header-wrapper { width:100%; } 
#content {margin-right:0; width:100%; float: left;}
#sidebar {display: none; }
#footer-wrapper { display: none; }} 

NOT: Lütfen örnektekinin aynı class’ları, ID’leri ve CSS’leri kullanmayın. Çünkü bu sadece her bir görüntü ekranına karşılık gelen formatı açıklamak içindi. Aynı yolla siz bunu uyarlayabilirsiniz zaten kendi ihtiyaçlarınıza göre. Main Wrapper, Header section, Content, Sidebar, Footer ve diğer küçük kısımlar için mevcut olarak Blogger temanızda kullanılan class’ları ve ID’leri kullanın. Ve sonra CSS kodlarını ekleyin.

Duyarlılık İçin Bazı Önemli CSS Sorguları:

1.Daima width (genişlik) kavramını % sembolüyle kullanın pixels yerine. Mesela, Width:50%; şeklinde veya yüzde değerini kendi ihtiyacınıza göre ayarlayın.
2. Daima px yerine em terimini kullanın boyut için. Mesela, 10px yerine 10em kullanın.
3. Merkezde hizalama yapmak için Margin: auto; kullanın. Burda sağda ve soldaki boşluklar için % olarak değerler kullanmaya çalışın.
4. Display: none; kullanımı belli bir kısmın gizlenebilmesi için kullanılır.

Temanızın responsive olup olmadığını burayı tıklayıp test edebilirsiniz. ;)

Önemli Not: Bazen responsive tema tasarlarken sanki kodlarımız çalışmıyor gibi hissedebilirsiniz.Aslında responsive kod tüm kısımlarınızdaki width (genişlik) değerinin % şeklinde olması halinde çalışacaktır. Çünkü, herhangi bir kısmın width değerinin (genişliğinin) yüzde yerine sabit bir değere göre ayarlandığı durumda kodun duyarlılığının çalıştığını göremeyiz. Umarım responsive tasarım için hazırladığım bu blogger  yardım dersini sevmişsinizdir. Bu makale sadece responsive kodların nasıl çalıştığını açıklamak için hazırladım. Eğer ki HTML ve CSS hakkında çok da bilgi sahibi değilseniz,Sosyal Medya Kafe kişiye özel responsive Blogger tema tasarımı yapmaya başladı ;)
Çok yakında Sosyal Medya Kafe'nin yeni responsive Blogger teması ve kişiye özel yaptığım responsive Blogger temalarını sizlere paylaşacağım ;)
Blogger yardım dersleri ve Blogger eklentileri için Sosyal Medya Kafe'yi  GFC hesabını takibe alarak yakından takip edebilirsiniz.
Sağlıklı,mutlu günler dilerim :) Sevgiyle kalın :L

Sibel Ordueri 

"Bu makalede kullanılan tüm ekran görüntü resimleri ve yazılar Sosyal Medya Kafe'ye aittir.Yazıların ve ekran görüntü resimlerinin yayın hakkı sadece www.sosyalmedyakafe.com'a aittir.İzin alınmadan ve kaynak gösterilmeden bir başka blogda veya web sitesinde yayınlanması 5846 sayılı Fikir ve Sanat Eserleri Yasası`na aykırıdır. Aksi taktirde 5846 Sayılı Fikir ve Sanat serleri Yasası gereği suç duyurusunda bulunulacaktır. Yasal yükümlülüğü vardır."

65 yorum:

  1. Çok güzel gerçekten. Seni kutluyorum. Google da ilk sıraya çıkmış bu yazın aynı zamanda. Yenilikler guze.aGunumuzde hemen hemen herkes mobilden bağlanıyor zaten. Deryanın spor günlüğü tasarımını çok beğendim. Süpersin maşallah

    YanıtlaSil
  2. Bende gecirebilirmiyim acaba anlattığın şekilde. Ay korkarım ben güzel tasarimima zarar veririm belki.

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim :) Üzerinde 2-3 yıldır çalıştığım bir uygulama.Google amcamın bana jesti büyük oldu :) Bu verdiğim kodlar anlattığım şekilde temaya kopyaladım responsive oldu olayı değildir.Yazımın içinde de anlattığım gibi her temanın içinde Id ve Class isimleri vardır.Bunların eklenmesinden ,ayarlanmasından sonra responsive görünüme kavuşur tema.O yüzden hiç bozma temanı veya uğraşmak istiyorsan blog temanın mutlaka yedeğini alıp demo blog üzerinde yapmalısın ;)
      Sevgiler :L

      Sil
  3. Sibel Hanım elinize sağlık faydalı bir yazı olmuş. Ama yazıları kopyalayamıyorum.

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim :) Malesef yazılarım kopyalanmıyor ve verdiğim kodların kopyalanması için tablo da çalışmadığı için bu şekilde çıkıyor.En kısa zamanda kodların kopyalanmasını sağlayacağım.Aksaklık için kusura bakmayın :O Mail adresinize kodları gönderebilirim ;)

      Sil
  4. hiç hiç ama hiç anlamadığım şeyler o kodlar falan bana çince gibi geliyor :-(( şimdi yapmaya çalışırken başka bir şeyi bozarım o yüzden hiç denemiyorum bile..

    YanıtlaSil
    Yanıtlar
    1. Mevcut blogger temanızı responsive yapmak isterseniz mutlaka temanızın yedeğini almanız gerekir.Ve verdiğim bilgiler işin mantık kısmı yani bunlara eklenen bir çok kod yapısı var ;)
      Sevgiler...

      Sil
  5. Harika böyle bir tasarım yaptırsam süper olacak, blogun başına öyle çok şey geldi ki kendim oynamaya korkuyorum artık :)

    YanıtlaSil
    Yanıtlar
    1. Bu verdiğim bilgiler işin mantık kısmı ;) Responsive tasarımı çalıştıracak kodlar ama daha önemlisi temanın içindeki kodlarla bağlamak ;) O yüzden mutlaka css ve html bilgisi gerekiyor ;)
      Sevgiler :L

      Sil
    2. Müsait olduğunda bana böyle bir tasarım yaparsan çok mutlu olurum valla :)) Çünkü biliyorsun Sinan bana ders veriyordu ama yarım kaldı bilgimin sizin bilgileriniz yanında lafı bile olmaz yok denecek derecede az :)))

      Sil
  6. Birebir faydalanmış biri olark yazını ancak tasdik edebilirim. Kendi bloğumun tqsarımıyla aşk yaşıyorum hala :)

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim Derya abla :) Yeni responsive blog tasarımının içine sinmesi beni de çok mutlu ediyor.Yaşadığın o aşk uzun yıllar sürer inşallah :A

      Sil
  7. Çok açıklayıcı bir yazı olmuş gerçekten bilmeyenlere herşeyiyle anlatım yapmışsınız. Bende merakla yeni uygulama bloğumun tasarımını bekliyorum. Sevgiler..

    YanıtlaSil
    Yanıtlar
    1. Her yaptığım blog tasarımında ben de sizin kadar heyecanlanıyorum.Responsive blogger tema tasarım konusunda şanslı 4.kişisiniz ;)
      Sevgiler :L

      Sil
  8. Tesekkurler :)) benim gibi bu islerden anlamayanlar icin faydali bir yazi olmus ...

    YanıtlaSil
  9. Harika bilgler ama alfabeyi bilmeyene (benim gibi ) zor geliyor.

    YanıtlaSil
    Yanıtlar
    1. Haklısınız işin teknik kısmı bilmeniz gerekiyor.
      Sevgiler...

      Sil
  10. Kafamı toparladığım anda bu uygulamayla ilgili bir çalışma yapmak lazım.
    Ayrıntılı bilgi ve anlatım için teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Rica ederim Emel hanım.Mutlaka bunları demo blogda denememlisiniz ve html ve css hakkında bilginizde olması gerekiyor.
      Sevgiler...

      Sil
  11. teşekkür ederiz verdiğiniz bilgiler için

    YanıtlaSil
  12. Teknik bilgilerden hiç anlamıyorum ama biraz da olsa öğrenmek istiyorum bu ara...

    YanıtlaSil
    Yanıtlar
    1. Teknik bilgi biraz merak işi ;) Merakınız varsa bu konulara başarırsınız ;)

      Sil
  13. anlayabilmeyi çok isterdim çok güzel bilgiler paylaşıyorsun canım emeğine sağlık ayrıca tebrik ediyorum google da bizlerle aynı fikirde demek ki:)) sevgiler.

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim Hatice hanımcım :)
      Sevgiler :L

      Sil
  14. emeğine sağlık, çok güzel anlatmışssın ;)

    YanıtlaSil
  15. Ben bu kodlarla oynamaya çok korkuyorum. Sevdicanin dediği gibi ya güzel tasarımım bozulursa diye

    YanıtlaSil
    Yanıtlar
    1. Blog şablonunuzun yedeğini alırsanız sorun olmayacaktır ;)

      Sil
    2. O yedeğe alma işlemini de birgün anlatırsan sevinirim. Nasıl yedeğe alınır? nereye alınır?

      Sil
    3. Daha önce resimli olarak blogger şablon yedekleme anltımı yapmıştım ;) Blogger şablon yedekleme ve şablon yükleme
      Bu konum ise ;
      Blog yazı kayıtlarının yedeklenmesi resimli anlatım.
      Blog Yazıları Yedekleme
      Kolay gelsin :) Sevgiler :L

      Sil
    4. Yavaş yavaş ben de kodlarla oynamaya başladım. O yazınızı yani yedekleme yazınızı da hemen okuycam. Çok teşekkürler

      Sil
    5. Rica ederim Nilgün hanım :)Kolay gelsin :A

      Sil
  16. sosyal medya kafe ne kada anlatsanızda sağolun ama ben anlamyorum :D

    YanıtlaSil
    Yanıtlar
    1. O zaman tasarımınızı uzman ellere teslim edebilirsiniz :D

      Sil
  17. Bloglar için çok kıymetli bilgiler bunlar.. Responsive tasarımın önemini tüm detaylarıyla anlatmışsın.. Emeğine sağlık...

    YanıtlaSil
    Yanıtlar
    1. Responsive blog tasarımları ciddi anlamda bloglar için çok faydalı ;)
      Teşekkürler :)

      Sil
  18. Cok guzel anlatmissiniz ama ben de cesaret edemeyenlerdenim sanirim

    YanıtlaSil
    Yanıtlar
    1. Şablon yedeğinizi alarak denemeler yapabilirsiniz ;)

      Sil
  19. Ellerinize sağlık son derece yararlı bir post, ben kafam sakinken tekrar gelip şu işi uzun uzun incelemek istiyorum.

    sevgiler

    tolunay

    YanıtlaSil
    Yanıtlar
    1. Tabiiki tekrar inceleyip sakin kafa ile yapmak gerekir ;)
      Sevgiler ...

      Sil
  20. web siteleri responsive oluyo da bloglar bilmiyodum hımmm yapmalı sanırım o zaman :)

    YanıtlaSil
    Yanıtlar
    1. Hoşgeldin Deep :) Evet web siteleri,blogger bloglar ve wordpress bloglar responsive kodlaması ile tüm ekran boyutlarına uyumlu hale getirilebiliyor ;)
      Sevgiler...

      Sil
  21. Çok faydalı bir yazı olmuş. Kesinlikle deneyeceğim.

    YanıtlaSil
    Yanıtlar
    1. Şablon yedeğinizi almayı unutmayın ;) Kolay gelsin :)

      Sil
  22. iyi günler. sitenize sevdicanın blogundan geliyorum. çok karmaşık geldi birden gözüm korktu kodlar vs :) maşallah size diyorum;) çok memnun oldum blogunuzu tanıdıgım için. sevgiler.

    YanıtlaSil
    Yanıtlar
    1. Hoşgeldiniz :)Blogger tema kodlamısnda hiç bilmeyen biri için çok karışık görünmesi normal ;) Ben de sizin blogunuza ışınlıyorum :)
      Sevgiler :)

      Sil
  23. Merak edip Google'da, Responsive blog tasarımı diye arattım... İlk sıralarda görmek heyecan verici. Tebrik ediyorum Sibel Hanım, responsive blog tasarım örneklerini merakla bekliyorum. Sevgiler :)

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim Zülal hanım :) Darısı sizlerin başınıza ;)
      Responsive blog tasarımlarımı birer birer teslim ediyorum.Yayınlamakta biraz geçiksemde en kısa zamanda yeni responsive tasarımları görmeniz dileğiyle...
      Sevgiler :L

      Sil
  24. Bende işin teknik kısmından hiç anlamayanlardanım.Blogu alan adına yönlendirdim.Adsense'i mi bile kaybettim :(

    YanıtlaSil
    Yanıtlar
    1. Son zamanlarda blogger kaynaklı özel alana geçişlerde adsense reklamları yok oluyor malesef :( Tekrar başvuru yapabilirsiniz ;)
      Kolay gelsin :)

      Sil
  25. Bu yorum yazar tarafından silindi.

    YanıtlaSil
    Yanıtlar
    1. Blogger tasarımları yazımda da belirttiğim gibi temadan temaya değişiyor.İşin teknik kısmına blogumda yazdıklarım kadarıyla yardımcı olabilirim.Başka tema üzerinde prensip gereği kodlama yapmıyorum.Sadece kendimin yaptığı tasarımlar üzerinde çalışıyorum.Hazır responsive tema tasarımı indirip blogunuza 3-4 dakika da yükleyebilirsiniz ;)

      Sil
  26. Harikasiniz tum yazilari sirayla okuyorum cok yardim ediyor. Sanırım bir kadin eli diyelim ziea bubune kadar okudugum hic bir blog tasarım yazilarini anlayamiyordum. Cok aciklayici ve kolay tesekkurler.

    YanıtlaSil
    Yanıtlar
    1. Rica ederim.Faydalı olabildiysem ne mutlu bana :)

      Sil
  27. İşin içine yani en derinine inebilmek için fırsatım hiç olmadı. Zaman yetmiyor. En kısa zamanda en fazlasıyla yaralanmayı diliyorum yazılarınızdan. Hüdaydalı selamlarımla :)

    YanıtlaSil
    Yanıtlar
    1. Zaman sıkıntısı herkesin bir şekilde yaşadığı sıkıntı.En kısa zamanda fırsat bulmanız dileğiyle..
      Sevgiler :)

      Sil
  28. Yapsam mı diye düşündüm ama çokta kurcalamak istemedim, kaleminize sağlık :)

    YanıtlaSil

İnstagram

Sosyal Medya Kafe Copyright © 2014 Tüm Hakları Saklıdır...