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.
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."
Ç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ıtlaSilBende gecirebilirmiyim acaba anlattığın şekilde. Ay korkarım ben güzel tasarimima zarar veririm belki.
YanıtlaSilTeş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 ;)
SilSevgiler :L
Sibel Hanım elinize sağlık faydalı bir yazı olmuş. Ama yazıları kopyalayamıyorum.
YanıtlaSilTeş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 ;)
Silhiç 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ıtlaSilMevcut 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 ;)
SilSevgiler...
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ıtlaSilBu 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 ;)
SilSevgiler :L
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 :)))
SilEmeğine sağlık canım !
YanıtlaSilTeşekkür ederim :)
SilBirebir faydalanmış biri olark yazını ancak tasdik edebilirim. Kendi bloğumun tqsarımıyla aşk yaşıyorum hala :)
YanıtlaSilTeş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Ç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ıtlaSilHer yaptığım blog tasarımında ben de sizin kadar heyecanlanıyorum.Responsive blogger tema tasarım konusunda şanslı 4.kişisiniz ;)
SilSevgiler :L
Tesekkurler :)) benim gibi bu islerden anlamayanlar icin faydali bir yazi olmus ...
YanıtlaSilRica ederim Cizel hanım :O
SilHarika bilgler ama alfabeyi bilmeyene (benim gibi ) zor geliyor.
YanıtlaSilHaklısınız işin teknik kısmı bilmeniz gerekiyor.
SilSevgiler...
Kafamı toparladığım anda bu uygulamayla ilgili bir çalışma yapmak lazım.
YanıtlaSilAyrıntılı bilgi ve anlatım için teşekkürler.
Rica ederim Emel hanım.Mutlaka bunları demo blogda denememlisiniz ve html ve css hakkında bilginizde olması gerekiyor.
SilSevgiler...
teşekkür ederiz verdiğiniz bilgiler için
YanıtlaSilRica ederim :)
SilTeknik bilgilerden hiç anlamıyorum ama biraz da olsa öğrenmek istiyorum bu ara...
YanıtlaSilTeknik bilgi biraz merak işi ;) Merakınız varsa bu konulara başarırsınız ;)
Silanlayabilmeyi ç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ıtlaSilTeşekkür ederim Hatice hanımcım :)
SilSevgiler :L
emeğine sağlık, çok güzel anlatmışssın ;)
YanıtlaSilTeşekkürler :)
SilBen bu kodlarla oynamaya çok korkuyorum. Sevdicanin dediği gibi ya güzel tasarımım bozulursa diye
YanıtlaSilBlog şablonunuzun yedeğini alırsanız sorun olmayacaktır ;)
SilO yedeğe alma işlemini de birgün anlatırsan sevinirim. Nasıl yedeğe alınır? nereye alınır?
SilDaha önce resimli olarak blogger şablon yedekleme anltımı yapmıştım ;) Blogger şablon yedekleme ve şablon yükleme
SilBu konum ise ;
Blog yazı kayıtlarının yedeklenmesi resimli anlatım.
Blog Yazıları Yedekleme
Kolay gelsin :) Sevgiler :L
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
SilRica ederim Nilgün hanım :)Kolay gelsin :A
Silsosyal medya kafe ne kada anlatsanızda sağolun ama ben anlamyorum :D
YanıtlaSilO zaman tasarımınızı uzman ellere teslim edebilirsiniz :D
SilBloglar 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ıtlaSilResponsive blog tasarımları ciddi anlamda bloglar için çok faydalı ;)
SilTeşekkürler :)
Cok guzel anlatmissiniz ama ben de cesaret edemeyenlerdenim sanirim
YanıtlaSilŞablon yedeğinizi alarak denemeler yapabilirsiniz ;)
SilEllerinize sağlık son derece yararlı bir post, ben kafam sakinken tekrar gelip şu işi uzun uzun incelemek istiyorum.
YanıtlaSilsevgiler
tolunay
Tabiiki tekrar inceleyip sakin kafa ile yapmak gerekir ;)
SilSevgiler ...
Güzel bir anlatım sevgiler
YanıtlaSilTeşekkürler :) Sevgiler :)
Silweb siteleri responsive oluyo da bloglar bilmiyodum hımmm yapmalı sanırım o zaman :)
YanıtlaSilHoşgeldin Deep :) Evet web siteleri,blogger bloglar ve wordpress bloglar responsive kodlaması ile tüm ekran boyutlarına uyumlu hale getirilebiliyor ;)
SilSevgiler...
Çok faydalı bir yazı olmuş. Kesinlikle deneyeceğim.
YanıtlaSilŞablon yedeğinizi almayı unutmayın ;) Kolay gelsin :)
SilBilgiler için tşkler (:
YanıtlaSilRica ederim :)
Siliyi 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ıtlaSilHoşgeldiniz :)Blogger tema kodlamısnda hiç bilmeyen biri için çok karışık görünmesi normal ;) Ben de sizin blogunuza ışınlıyorum :)
SilSevgiler :)
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ıtlaSilTeşekkür ederim Zülal hanım :) Darısı sizlerin başınıza ;)
SilResponsive 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
Bende işin teknik kısmından hiç anlamayanlardanım.Blogu alan adına yönlendirdim.Adsense'i mi bile kaybettim :(
YanıtlaSilSon zamanlarda blogger kaynaklı özel alana geçişlerde adsense reklamları yok oluyor malesef :( Tekrar başvuru yapabilirsiniz ;)
SilKolay gelsin :)
Bu yorum yazar tarafından silindi.
YanıtlaSilBlogger 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 ;)
SilHarikasiniz 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ıtlaSilRica ederim.Faydalı olabildiysem ne mutlu bana :)
Silİş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ıtlaSilZaman sıkıntısı herkesin bir şekilde yaşadığı sıkıntı.En kısa zamanda fırsat bulmanız dileğiyle..
SilSevgiler :)
Yapsam mı diye düşündüm ama çokta kurcalamak istemedim, kaleminize sağlık :)
YanıtlaSilResponsive blog tasarım bizler için çok önemli.Farklı bir demo blog açıp orada denemeler yapabilirsiniz.
SilBu konuyu anlatmak gerçekten biraz sabır ve tabi ki bilgi ister. Güzel bir işe kalkışmışsınız. Tebrik ederim.
YanıtlaSilBaşarılı yazı için teşekkürler
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.
SilRica ederim.
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ıtlaSilZehra ablacım ayrı demo blog açarak denemler yapabilirsin.Sevgiler💖
SilAslı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ıtlaSilGenellikle 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.
SilSibel hanım merhaba,
YanıtlaSilMevcut 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.
Merhaba Alper Sağlam
Sil1-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.)
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.
SilTeş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.
Sil1000'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.
SilSizi 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.
SilAaa yok çok büyük bir masraf olur bu tekrar teşekkür ederim.
SilYardı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.
SilRica ederim.
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:
Sil1-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.
Merhaba Alper,
SilBugü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.
Sibel hanım iletişim panelinden iki mesaj gönderdim. İlgi ve alakanız için gerçekten çok teşekkür ederim.
SilSibel 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ıtlaSilMerhaba :)
SilResponsive 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.:)
blogger için değil mi ? blogger içinse mailden size zahmet gönderirmisiniz
YanıtlaSilEvet, 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 :)
Siliyi 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