31 Ekim 2016 Pazartesi

Sosyal Medya Kafe Responsive Blog Tasarımı ile Yenilendi!

31 Ekim 2016 Pazartesi

mobil uyumlu blog tasarımı sosyal medya kafe
Uzunca bir aradan sonra tüm okurlarımıza merhaba :)
Blog tasarımı denilince en önemli unsur ; blogun kolay gezilir olması ve mobil kullanımının artması ile birlikte mobil uyumlu (responsive tasarım)  olması en başta gelen özelliklerden.Daha önce kullandığımız blogger tasarımı da çok keyifle ve severek kullanıyordum.Mobil uyum özelliği olmamasından rahatsızdım.

Blogumuzda tüm yazar arkadaşlarımın fikrini de alarak ortak kararımızla yapmış olduğum bu logoyu uygun bulduk.Blog tasarımımızda yine sevdiğim renkler olarak mavi ve yeşil kullandım.Mavi ve yeşil rengin ayrı bir huzuru olduğuna inanıyorum.Artık istediğiniz boyuttaki cihazlardan yazılarımızı rahatlıkla okuyabileceksiniz.Sizlere her zaman daha kaliteli içerik ve kolay gezilebilirlik sağlamaya devam edeceğim.

Sizler yeni tasarımımızı nasıl buldunuz ?

Yeni tasarmımızın tüm okurlara ve bizlere hayırlı, uğurlu olmasını diliyorum. :A
Hayatta en kıymetli hediye "zaman" ve en önemli ihtiyaç "sağlık" diyerek diğer yazılarımda görüşmek dileğiyle...
Sevgiyle kalın :L

Sibel Ordueri


Devamını Oku »

31 Mart 2016 Perşembe

Responsive Blogger Tasarım Asimetrik Blog Tasarım

31 Mart 2016 Perşembe
Responsive blogger tasarım hiç şüphesiz ki günümüz şartlarını düşündüğümüzde en iyi blog tasarımlarıdır.Farklı ekran boyutlarına göre şekillenen blog tasarımı ile okuyucularınıza görsel ve kullanım açısından kolaylık sağlanıyor.
Daha önce responsive tasarım nedir ? Blogger teması responsive hale nasıl dönüşür ?  teknik anlamda sizlere bu linkte anlamıştım.

Hüzün Sarısı blogun yazarı Nihal hanım tavsiyesi ile gelen sevgili Asimetrik Blog'un yeni  temasını responsive olarak tasarladım.
responsive blogger tasarım asimetrik blog tasarım
Asimetrik blogun isteği üzerine oldukça sade bir blog teması oldu.Bayanların vazgeçilmez rengi pembe, asimetrik blogun da tercihi oldu.Diğer blog tasarımlarımı kişiye özel çalışıyordum.Responsive blog tasarımlarını da yine kişiye özel çalışmaya devam edeceğim.

Buradan bir noktaya parmak basmak istiyorum.Yaptığım tasarımlar hazır responsive blog teması değildir.Başka hazır tema satan sitelerden tema satın alıp veya ücretsiz indirip, karşımdaki kişinin bloguna yüklemiyorum.Bunu yapan bir çok kişinin  şuan mahkemelik olduğunu duyuyorum.Bu anlamda ne kendimi ne de karşımdaki kişiyi riske atmam söz konusu dahi olamaz...

Tamamen karşımdaki kişinin isteği doğrultusunda şekillenen,kendimin yaptığı blog tasarımlarıdır.
Responsive tasarımları hazırlık aşamasında karşılıklı iletişim sayesinde karşımdaki kişinin isteğine en uygun temayı yapmaya çalışıyorum.Bu hazırlık aşamaları bir tema için 7-15 gün sürebiliyor.

Asimetrik Blog'un Eski Blog Tasarımı Ekran Görüntüsü;
eski blog tasarım asimetrik blog


Asimetrik Blog kozmetik ve güzellik üzerine deneyimlerini paylaşıyor.Sizler de takip etmek ve responsive blog tasarımını yakından görmek isterseniz ;

Asimetrik Blog 'u ziyaret edebilir tema hakkındaki düşüncelerinizi yorum olarak yazabilirsiniz.

Asimetrik Blog'a yeni responsive blogger teması hayırlı uğurlu olsun :) Uzun yıllar yazılarını okumak dileğiyle :A

Sizler de kendinize ve blogunuza özel,seo destekli,responsive blog tasarımına (duyarlı blog tasarım) sahip olmak isterseniz;
İletişim sayfamdaki formu doldurarak detaylı bilgi alabilirsiniz.
Siz hayal edin ben gerçeğe dönüştereyim :V
Herkese sağlıklı,mutlu günler dilerim :A
Sibel Ordueri 
Devamını Oku »

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."
Devamını Oku »
"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 © 2019 Tüm Hakları Saklıdır...