26 Şubat 2016 Cuma

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

26 Şubat 2016 Cuma
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.

•HTML'yi Düzenle 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">

•Ş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 tasarımını ve kişiye özel yaptığım responsive Blogger tasarımları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."


"Responsive Blogger Tema Tasarım Nasıl Yapılır ?" için 88 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
    Yanıtlar
    1. Responsive blog tasarım bizler için çok önemli.Farklı bir demo blog açıp orada denemeler yapabilirsiniz.

      Sil
  29. Bu konuyu anlatmak gerçekten biraz sabır ve tabi ki bilgi ister. Güzel bir işe kalkışmışsınız. Tebrik ederim.
    Başarılı yazı için teşekkürler

    YanıtlaSil
    Yanıtlar
    1. Responsive tema kodlaması oldukça zahmetli olsada sonuç ortaya çıkınca mutlu oluyor insan.Sosyal Medya Kafe'nin tasarımında birebir anlattıklarımı uyguladım.
      Rica ederim.

      Sil
  30. Bu çok karışık geldi bana Sibel 🙃. Bu tema düzenlemekten daha zor sanırım buna cesaret edemem herhalde. Bloğum responsive mi diye dediğin yere tıkladım ama onu da çözemedim 😊. Ben en iyisi hiç karıştırmayayım. Emeklerine sağlık yine çok güzel ve faydalı bilgiler vermişsin çok çok teşekkür ederim sevgilerimle ❤

    YanıtlaSil
    Yanıtlar
    1. Zehra ablacım ayrı demo blog açarak denemler yapabilirsin.Sevgiler💖

      Sil
  31. Aslında tasarım konusuna meraklı arkadaşlar için altın değerinde bilgiler vermişsiniz ama yorumlardan gördüğüm kadarıyla insanlar temalarını kodlarıyla oynamaktan korkuyor. Bence zamanları varsa yedek bir blog açıp temalarını orada kurcalayabilirler

    YanıtlaSil
    Yanıtlar
    1. Genellikle tema kodlarına dokunmada bir korku var.Dediğiniz gibi farklı bir demo blog üzerinde istediğimiz herşeyi yapabiliyoruz.Responsive tema kodlamasını kendimiz yaptığımızda daha güvenilir bir blog tasarımı ortaya çıkıyor.

      Sil
  32. Sibel hanım merhaba,
    Mevcut temamız eski olduğundan responsive uyumlu değil fakat temamızın responsive uyumlu güncel versiyonunu indirip deneme blogumuzda test ettik sonuç başarılı. Şimdi bu durumda size bir iki sorum olacak izninizle.
    1-Aynı temanın güncel versiyonunu yeni tema yüklermiş gibi şablonumuza yüklemek indexlerimizde ve tıklanma oranlarımızda bir sıkıntı yaratır mı? Normal tema değişikliğinde yaşanan sorunlar başımıza gelir mi?
    2-Biz bu temayı 2013 yılında blogumuza yükledik ve o tarihten itibaren yerleşim kısmında; izin verilmeyen yerlerde gadget alanları açmak, footer kısmına hiçbir şey eklemeye izin yokken oraya sil baştan bir alan yaratıp bazı şeyler yükleyebilmek, dropdown menü kısmında yeni alanlar yaratmak, blog yazılarının google de yayınlanırken görünümündeki düzenlemeler vs. sayısız değişiklik yaptık üzerinde yine aynı şekilde analytics, adsense gibi alanların bloga eklenen kodları falan aynı temanın güncel versiyonunu yüklemek tüm bunlarda bir sıkıntı yaratır mı? Yoksa yaptığımız tüm değişiklikler baki kalır sadece temanın eksik ya da sorunlu görülen kısımları mı var olanın üzerine eklenir. Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Merhaba Alper Sağlam
      1-Eski temanızda kullandığınız eski temanın HTML bölümünde meta tag kodlarınız ve alexa,google v.b doğrulama kodlarınız varsa bunları demo blog üzerinde deneme bloguna aktarıp öyle yüklerseniz daha sağlıklı olur.Aynı temanın responsive halinden memnun kaldıysanız ,responsive güncel halinde sorun yaşamazsınız diye düşünüyorum.
      2-Eski tema üzerinde yaptığınız tüm değişikler eski tema üzerinde kalır.Yeni versiyonunu yüklediğiniz de bunlar kaybolur.Yani sıfırdan bir tema yüklüyorsunuz.Deneme blogunuzda değişim yaptığınız ayarları,kodları tekrar güncel versiyonuna eklemeniz gerekir.Daha sonra blogunuza yüklemelisiniz.
      (Geç cevap yazdığım için kusura bakmayın,dün hastane işlerim vardı blogla ilgilenemedim.)

      Sil
    2. Geçmiş olsun. Çok teşekkürler cevaplar için bu durumda temayı güncellemek pek de sağlıklı olmayacak diye düşünüyorum bu güncel versiyonundan responsive kodlarını nasıl alabilirim de mevcut olan temaya yükleyebilirim onun bir yolunu bulmam gerekiyor artık sanırım. İyi günler dilerim.

      Sil
    3. Teşekkür ederim.Responsive kodları da almanız çok zor Alper.Çünkü her Class ve ID etikeletirine atanmış responsive kodlar bunlar.Tek bir yerde sabit olan bir kod yapısı değil.Ben deneme blogunda tüm ayarlarınızı yaptıktan sonra blogunuza yüklediğinizde bir zararı olacağını düşünmüyorum.

      Sil
    4. 1000'in üzerinde yayın var Sibel hanım 5 yıldır yayın hayatındayız o kadar çok değişiklik yaptık ki blogun dört bir yanında artık nerede yapmıştık onu dahi hatırlayabilmek zor. Bir de sıfırdan bir tema yüklüyorsunuz dediniz indexlerimizde tıklanma oranlarımızda bir sıkıntı olursa bu şu an için alabileceğimiz bir risk değil malum Oscar ödülleri aklaşıyor bir yıl içerisinde en yoğun olduğumuz en çok okunduğumuz ay bu iki ay işte zaten sırf bu nedenle takipçilerimizin çoğu mobil giriş yaptığından yeni gelen kimseleri kaybetmemek adına responsive temaya geçi yapmayı düşünmüştük. Hal böyleyken şimdilik mümkün gözükmüyor. Çok teşekkür ederim yardımlarınız için.

      Sil
    5. Sizi anlıyorum Alper Sağlam.İsterseniz yabancı bir blog tasarımcı var, kullandığınız temayı direkt responsive kodlamasını yapıyor.2 yıl önce 100$ istiyordu.Diğer tasarımcılar kendi tasarımları dışında responsive kodlama yapmıyor.O kişiye yönlendirebilirim sizi.

      Sil
    6. Aaa yok çok büyük bir masraf olur bu tekrar teşekkür ederim.

      Sil
    7. Yardımcı olabileceğim bir konu olursa her zaman buralardayım.Blogger'ın maalesef eksik yönlerinden biri bu.Her güncellenmiş temayı eklediğinizde sıfırdan eklemiş gibi oluyorsunuz.Keşke var olan kodların üzerine yenileri ile değiştirebilseydik.
      Rica ederim.

      Sil
    8. Sibel hanım tekrar merhaba, daha önce bahsettiğim mevcut temayı güncelleme olayını yaptım. Blogumuz artık responsive uyumlu olarak gözüküyor fakat bir kaç şey de takıldım izninizle size bunları sormak istiyorum:
      1-Bloga mobilden giriş yaptığımda yazı içindeki YouTube videoları ekrana sığmıyor. Aynı şekilde ''esnek'' olarak sidebar kısmına yüklediğim üç reklam var biri 300x250 diğer ikisi ise otomatik boyut ama onlar da gösterilen reklamlar içinde yer alması gereken kutucuğun dışına reklamdan reklama değişerek taşabiliyor. Yine ''esnek'' olarak yazı içinde en alta yerleştirdiğim Eşleştirilen İçerik Birimi kısmı da taşma yapıyor.
      2-Hareketli Slider menü deki resimler de mobil de yarım görünüyor.
      3-Adsense reklamları olsun widgetlar olsun bunların tamamı için istediğimizi istediğimiz yerde yani sadece masaüstünde göster mobil de gösterme ya da mobilde göster masaüstünde gösterme şeklinde nasıl ayarlıyoruz?
      4-Bu sorum biraz bunlardan farklı olacak ama H1,H2,H3,H4 vs. etiketleri gibi Heading etiketlerinin blogu güncelledikten sonra yapısı biraz değişti. H2 başlıklarım H3 başlıklarından büyük görünüyor ve bunların boyutlarını, renklerini nereden değiştirebiliriz çünkü hepsi yazıya verdiğim başlıkla yani direk url olarak gözükecek H1 başlıklarıyla aynı renkte. Teşekkürler.

      Sil
    9. Merhaba Alper,
      Bugün blogunuzu cep telefonum üzerinden ziyaret ettiğimde Adsense reklamları dışında taşan bir şey yoktu.Youtube videoları için özel kodlar var buraya yazarsam,blogda sağ tık engeli olduğu için kopyalayama yapamıyacaksınız o yüzden özelden iletişime geçebilirsiniz.Baktığınız mobil boyutları ve ekran görüntüsü ile daha sağlıklı bakabilirim.Bugün İphone 7 plus ile baktığımda sorun yoktu Youtube videolarınızda.

      1.Adsense reklamlarının hepsini "Duyarlı" olarak seçmeniz sorunu çözecektir.Otomatik olarak reklamlar boyutlanıyor.Hiç birinde 300x250 vb. boyutlandırma seçmemelisiniz.Hepsi aynı "duyarlı" özellikte olmalı.Sorun 1 tane boyutlandırılmış reklam eklemiş olmanız ile ilgili gibi görünüyor.Denedikten sonra sonucu yazarsanız tekrar bakarız.

      2.Slider baktığınız mobil üzerinde kodlaması düzgün yapılmamışsa bu şekilde görünebilir.Mobil boyutlarını bilmek gerekiyor.Özelden baktığınız mobil'in ekran boyutlarını yazarak,ekran görüntü resimlerini gönderebilirseniz daha iyi yardımcı olabilirim.

      3.Yine bazı CSS kodları ile mobil 'de göster göstermeme yapabiliyoruz.Bu kodları verebilmem için de yapmak istediklerinizin ID ve Class etikelerini bilmem gerekiyor.Tüm ekran çözünürlükleri için ayrı ayrı eklemeniz gerekiyor.

      4.Blogunuzun Tema "HTML'yi düzenle bölümünden "Ctrl+F" yaparak değiştirmek istediğiniz H etiketlerini aratın sıra ile CSS alanında px veya % olarak bir değer girilmiştir.Bu değerleri çoğaltıp,azaltarak istediğiniz boyuta getirebilirsiniz.Renk kodları ise "color:#6699ff; " gibidir.Yanındaki # işaretinden sonra gelen harf ve rakamlar renk kodudur.

      Bunları yapmadan önce temanızın yedeğini almayı unutmazsanız iyi olur.
      Blogger Tema Yedekleme -Blogger Tema Yükleme
      Buradaki anlatımdan yararlanabilirsiniz.



      Sil
    10. Sibel hanım iletişim panelinden iki mesaj gönderdim. İlgi ve alakanız için gerçekten çok teşekkür ederim.

      Sil
  33. Sibel hanım tam bununla ilgili bir yazı yazayım mı diyordum az araştırma yapalım dedim bir de baktım siz turnayı gözünden vurmuşsunuz bravo ama muhtemelen kopyalanmasın diye ayarlamışsınız blogu şimdi nasıl olacak bu kodları alamayacaklar :)

    YanıtlaSil
    Yanıtlar
    1. Merhaba :)
      Responsive blog tasarım kodlarında verdiğim kod örnekleri her Blogger tema yapısına uygun olan kodlar değil. Sadece örnek olarak verdim. Ama isterseniz E-Mail olarak gönderebilirim. Responsive Blogger Tasarım konusunu anlatan ilk kişi olduğum için sıralaması da güzel yerde oldu.:)

      Sil
  34. blogger için değil mi ? blogger içinse mailden size zahmet gönderirmisiniz

    YanıtlaSil
    Yanıtlar
    1. Evet, Blogger için ama kendi tema kodlarınız içerisinde bulunan ID VE CLASS etiketlerini bulup her ekran boyutuna göre kodlamanız gerekiyor. Sadece örnek yolu gösterdim. Mailinizi bulabilirsem göndereyim hemen :)

      Sil
  35. iyi günler yazınızı okudum ama kodlar konusunda eksik olduğumdan galiba bir şey anlamadım.Hangi çizünürlükte hangi css leri ekleyeceğiz hiç anlamadım.Aslında blog temalarını düzenleyebiliyorum ama responsive yapamadım

    YanıtlaSil

"Sosyal Medya Kafe'de kullanılan ekran görüntüleri, fotoğraflar ve yazılar Sosyal Medya Kafe'ye aittir. Yazıların ve fotoğrafların 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ı, tariflerin veya yazıların ekran görüntüsü alınarak sosyal ağlarda paylaşılması 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."
Sosyal Medya Kafe Copyright © 2021 Tüm Hakları Saklıdır...