English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Yazılarımız Hakkında Yorum Yazmayı Unutmayın:)!!!

21 Ağustos 2015 Cuma

Etkileyici Blog Yazısı Nasıl Olmalı ?


Blogunuz için yaptığınız çabalar hep sonuçsuz mu kalıyor ya da okuyucularınızla yeterli etkileşimi kuramıyor musunuz ?Üzülmeyin. Bu duygular aslında yeni – eski tüm blog yazarlarının yaşadığı ortak problem.

Blog açmak, cesaret gerektiren önemli bir adım. Bu adımın tamamladıktan sonraki ilk amacımız onu binlerce kişinin okuyacağı populer hale getirmek.Bu da reklam yapmanın yanında yayınlayacağınız yazılarınızın kalitesiyle mümkündür.Peki etkileyici blog yazısı nasıl olmalı ?Bu yazımda sizlere biraz yardımcı olmak adına blog yazılarınızı popüler hale getirecek ve okuyucularınızla etkileşiminizi artıracak etkili yollardan bahsetmek istiyorum.

Okul yıllarınızda sanırım edebiyat derslerinde kompozisyon çalışmaları yapmışsınızdır. Aslında her bir yazımız da bir kompozisyon çalışması. Hocalarımızın dikkat ettiği şeye arama botları ve okuyucularımız da dikkat ediyor. Peki nedir bunlar ?

1-Etkileyici başlık


İnsanlar yazıyı okumaya kendilerini ikna etmeleri için ilk olarak başlıktaki havayı yakalamak isterler. Başlık hem yazınızı özetlemeli, hem anahtar kelimenizi içermeli, hem de sıradan olmamalı.

Sizin iki müşteriniz var, birisi sitenizi tarayan botlar, diğeri de bir şekilde yazı başlığınıza ulaşan gerçek ziyaretçiler. Yazılarınızın arama sonuçlarında öne çıkabilmesi için anahtar kelimeyi içeren bir başlık ve sosyal medya vs yerlerde yazınızla karşılaşan okuyucular için de çekici bir başlık olmalı.

İnsanlar aradıkları şeye çabuk ulaşmak istedikleri için listeli yazılar ve başlıkla daha ilgi çekicidir.

Örnek : Kilo verdiren yiyecekler – Kilo verdiren 5 yiyecek gibi..

2-Giriş açıklaması


Okuyucuların başlık bölümünü geçtikten sonra dikkat ettikleri şey giriş kısmıdır. Şöyle düşünün, bir şekilde okuyucu başlıktan etkilendi ve yazınızın linkine tıkladı. Hemen başlık altındaki açıklamaya odaklanacaktır. Çünkü gerçekten aradığı şey bu yazı içerisinde mi onu öğrenmek isteyecek. Bunu kısa meta açıklama olarak da düşünebilirsiniz.

3-İçerik


Tebrikler! Etkileyici başlıkla okuyucunun yazıya tıklamasını sağladınız, giriş açıklamasıyla okumaya ikna ettiniz. Ve şimdi sıra ona aradığı şeyi vermekte. Bu kısımda yararlı bilgileri, çözümleri olabildiğince açıklamalı, görsel destekli bir şekilde vermelisiniz. Okuyucu bunu gördüğü takdirde harekete geçerek yazınızı paylaşacaktır.

4-Gramer ve formata dikkat !


Yazının biraz daha detayını incelemek istiyorum. Özellikle yazdığınız kelimelerde anlamsız cümle, kelime hatası vs olmasına müsaade etmeyin. Çok uzun bir yazı yazmış olabilirsiniz. Bu yüzden büyük paragraflarla okuyucuyu sıkılmayın. Okuyucunuz kitap okumuyor, ekrana bakıyor. Bu yüzden çabuk sıkılabilir. Numaralandırma işareti, arka planı farklı ifadeler yazıda okuyucuyu tutacaktır.

5-Sonuç kısmı


Aslında çoğu zaman atladığımız ama bize önemli bir değer katacak kısımdır yazı sonu. Çünkü okuyucu buraya kadar gelmişse ve sorumlu bir okuyucu ise ya yorum bırakacaktır ya da sosyal medyada paylaşım yapacaktır. Evet yazıyı buraya kadar getirene kadar çok emek sarf ettiniz ama son adımı atlamayın. Onu yorum yapma ve paylaşma konusunda cesaretlendirin. Örneğin yazıyı soruyla bitirmek, yazıda sizin görmediğiniz şeylerin olabileceğinin hatırlatılması ya da bu şekilde yaptıysanız yorumunuzu öğrenmek isterim şeklindeki ifadeler okuyucunun yorum yapma ihtimalini artıracaktır.

Son Sözler


Başarılı bir yazının temel olarak sahip olması gereken özelliklerini sizlerle paylaştım.Yukarıda yer alan 5 madde elbette kaliteli yazı için yeterli şartlar değildir.Bunların yanında teknik anlamda anahtar kelime ve aranma durumu analizini içeren seo desteğini de ilave özellikler olarak sayabiliriz.

Sizce bir yazının kaliteli olması için ilaveten hangi şartları sağlamış olması gerekir? Yukarıdakilere göre etkileyici yazılar yazdığınızı düşünüyor musunuz ?

Yazar:Ehliblog

6 Ağustos 2015 Perşembe

Akıcı İngilizce Konuşturan Sistem; konusarakogren.com

Akıcı bir İngilizce ile konuşabilmek için önceliğinizi dilbilgisine değil pratik yapmaya vermelisiniz. İngilizce konuşmak için cümle kurarken kuralları düşünmek sizi yavaşlatacaktır. İngilizce konuşanların küçük bir bölümü dilbilgisi kurallarına dikkat eder. Kalıp ifadelerin ve kelime dağarcığının eş zamanlı olarak geliştirilmesi büyük avantajlar sağlayacaktır. İngilizce bir cümle kurmak için kelime sıralamasını kendi dilindeki gibi düşünmeyin. Her dilin yapısı birbirinden farklıdır. Duyduğunuz şeyler hakkında alıştırmalar yapmak pratiğinizi artırmaya yarar. Dili doğal olarak öğrenme sıralaması okuma, dinleme, konuşma ve yazma şeklindedir. Akıcı bir İngilizce konuşabilmeniz için tüm ilgi alanlarınızı İngilizceye çevirin. Müzik dinleyin, dizi ve filmleri orijinal dilinde seyredin, İngilizce hikâyeler ve ilginizi çeken konu başlıklarında yazılmış makaleleri okuyun. İngilizce çalışırken güvenebileceğiniz, genel kullanıma uygun ve doğru İngilizce bilgileri içeren kaliteli materyaller kullanın. İngilizce öğrenirken yaş, eğitim düzeyi ve kararlık eğitim sürecini etkileyen faktörler arasında yer alır. İngilizceyi akıcı olarak konuşabilmek için kendi telaffuzunuza güvenmelisiniz. Öğrendiğiniz her kelime ile sürekli yeni cümleler kurarak pratiğinizi ve düşünce yapınızı hızlandırmalısınız.

Dilbilgisi kuralları oldukça karışıktır. Yabancı dilde tam olarak öğrenilebilmesi ve uygulanabilmesi için pratik yapılması gerekir. İngilizcede sık kullanılan edatlar yer ve yön için kullanılanlardır. İngilizce Edatlar arasında zaman için en çok kullanılanlar at/in/on/by dır. At tam bir zaman kullanılmak istendiğinde kullanılır. At ten/saat onda, at Chirstmas/yılbaşında cümlelerinde kullanıldığı gibi örneklendirilebilir. In edatı aylar, yıllar ve mevsimlerle kullanılır. In winter/kışın, in october/ekimde, in the moring/sabahleyin gibi örneklendirilebilir. On günlerde ve tarihlerde kullanılır. On saturday/Cumartesi günü gibi örneklendirilebilir. Edatlarla ilgili olarak prepositions of movements/hareket bildiren edatlardan bahsedilebilir. Bu edatlar bir kişi veya bir şeyin nerede olduğunu gösterir. Between, across, by, down, from, up, under, on, off, out of, over, past and round sayılabilir. With/ile, without/-sız,-siz, by/yolu ile in/içinde, -de, -da en çok kullanılan edatlardır. Zaman için kullanılan edatların dışında yer ve yön gösteren edatlar, düzey gösteren edatlar, bulunma ve duruş yeri gösteren edatlar ve diğer edatlar bulunur. Önünde bir edat olan soru sözcükleriyle yapılmış edatlar cümle sonuna alınabilir. Who did yor write to?/Kime yazdın? Who are you calling to?/Kime seslendin? Şeklinde örneklendirilebilir. Under/altında, in front of/önünde, behind/arkasında, next to/yanında, between/arasında, near/yanında, over/üzerinde sık kullanılan edatlardandır.

Dilin öğrenilmesinden ziyade edinilmesi gerekliliği bu sebeplerle zorunludur. Zira bilgileri öğrenmek veya ezberlemek yerine kişinin içine sindirerek algılaması gereklidir. Örneğin bir çocuğa konuştuğu dil öğretilmez. Çocuk dilin konuşulduğu ve yaşandığı yerde büyürken dili de edinir. Bulunduğunuz çevrede kendi seviyenize yakın konuşma grupları ayarlamalı, bu sınıflara gidecek vakit bulamasanız da online olarak katılmalısınız. İngilizce konusunda kendinize ne kadar çok güvenirseniz o kadar iyi ve güzel konuşursunuz. Bu hiçbir zaman unutmamanız gereken bir kuraldır.

Not:Bu bir reklamdır.

1 Ağustos 2015 Cumartesi

Blogger Resim Efekti ~ CSS image hover effect

CSS ile hazırlanmış resim efektlerinden blogunuza uygulaması oldukça basit olan toplam onbir adet blogger image hover effectini blogunuza uygulamayı anlatacağız. Kodlama CSS ile yapıldığından site açılış hızında negatif yönde etki kesinlikle yok. Görsellik olarak blogunuza yada sitenize uyguladığınızda farklı ve güzel bir görünüm kazandıracak blogger resim efekti eklentisi ile blogunuz daha hoş bir görünüme kavuşacak.Blogger resim efekti kodları için aşağıda verdiğimiz kodlardan istediğinizi blogunuza ekleyerek daha önce eklediğiniz bütün resimler dahil olmak üzere bundan sonra ekliyeceğiniz resimlerde blogger resim efekti ile görünecektir.İşlem çok basit bir kaç satırlık kodu blogunuza ekliyorsunuz ve resimlerinizbundan sonra efektli oluyor.
Blogger CSS Resim Efektini Blogunuza eklemek için;
1-Blogger Hesabınızla giriş yapın.
2-Şablon>HTML'yi Düzenle yolunu takip edip,HTML kodları içerisinde ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve aşağıda uygulamak istediğiniz efekte ait kodları bulduğunuz ]]></b:skin> kodunun hemen üst satırına yapıştırmanız gerekiyor.

1-Blogger CSS Resim Efekti Ekleme (Grow)
Grow css resim efektinini demo görünümü için maus ile resmin üzerine geliniz.
Blogger sayfanızdaki bütün resimlerde bu efekti kullnmak isterseniz, aşağıdaki kodu kopyalayıp 2. maddede bahsettiğimiz yere yapıştırın.


.post-body img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 400px;
height: 400px;
} 




2-Blogger CSS Resim Efekti Ekleme (Shrink)
shrink için css kodları:
.post-body img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  width: 300px;
  height: 300px;
}




3-Blogger CSS Resim Efekti Ekleme (Sidepan)

sidepan için css kodları:
.post-body img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-left: -200px;
}





4-Blogger CSS Resim Efekti Ekleme (Vertical pan)
Vertical Pan için css kodları:
.post-body img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-top: -200px;
}





5-Blogger CSS Resim Efekti Ekleme (Tilt)
Tilt Pan için css kodları:
.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}





6-Blogger CSS Resim Efekti Ekleme (Morph)
Morph için css kodları:
.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}





7-Blogger CSS Resim Efekti Ekleme (Focus)
Focus için css kodları:
.post-body img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  border: 70px solid #000;
  border-radius: 50%;
}





8-Blogger CSS Resim Efekti Ekleme (Grayscale)


Grayscale için css kodları:
.post-body img{
filter: url("data:image/svg+xml;utf8,grayscale"); /* Firefox 3.5+ */filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}
.post-body img:hover {filter: none;-webkit-filter: grayscale(0%);} 










Blogger için hazırlanmış CSS Resim Efektlerinden istediğinizi blogunuza uygulayın ve güle güle kullanın.


4 Temmuz 2015 Cumartesi

Satış Ortaklığı Forum Siteleri

Satış ortaklığı bir çok kişinin merak ettiği internette para kazanmanın en etkili yöntemidir.
Bir çok konuda oluşturulan ve fikir alışverişinin gerçekleştiği konun uzmanlarının bulunduğu ve yeni başlayanlarından
bu kişilere sorular yönelterek kendilerini her anlamda geliştirdiği forumlar bulunmakta iken satış ortaklarının bir arada
bulunduğu sadece satış ortaklarına hitap eden bir forum bulunmamaktaydı.

Bu eksik görülmüş olacakki çok yakın zamanda satış ortaklığı forum sitesi açıldı.Şu an yeni olması dolayısıyla fazla bir üyesi bulunmasada
ilerleyen günlerde Türkiye de satış ortaklığına yön veren insanların bu forumda toplanacağından şüpheniz olmasın.
Sizde gerçekten bu işte yeniyseniz yada öğrenecek çok şeyim var diyorsanız mutlaka bu forumda yerinizi almasınız.

Affiliate forum u açan kişilerde gerek reklam gerek site tasarımı konusunda uzmanlaşmış bir ekip.Verdikleri bilgiler
mutlaka sizinde işinize yarayacaktır.Bunun yanında sormak istediğiniz tüm konularda sizlere yardımcı olmaktan mutluluk duyacak bir ekip sizleri beklemekte.

Bunun yanında gerçekten satış ortaklığı konusunda uzman olan kişileride yeni açılması dolayısıyla forum yöneticisi olarak almaktalar.Bizde blogokulu ekibi olarak
geleceğin en büyük Türkiye satış oratklığı forumunda yerimizi almış bulunmaktayız.Site yöneticilerine uzun zamandır eksikliğini hissettiğimiz bu hizmeti
bize sağladıkları için teşekkür ediyor yayın hayatlarında başarılar diliyoruz.

Not:Bu bir tanıtım yazısıdır.

6 Haziran 2015 Cumartesi

Bloggerde bir yazıyı en üstte gösterme ~ Blogger Ana sayfaya yazı sabitleme

Bloggerde yayınladığınız yazılar bildiğiniz gibi tarih sıralamasına göre dizilmekte ve en son yazdığınız yazı en üstte çıkmaktadır.Bazı blogger arkadaşlar yazdıkları bir yazınının sürekli en üstte kalmasını ve diğerlerinin alta dizilerek gitmesini istiyorlar.Blogger de bir yazıyı sürekli en üstte tutmak istiyorsanız ufak bir hamle ile bunu başarmak mümkün.
Normalda yayınladığınız yazılarınızın dizilimi aşağıdaki gibidir;

Eğer siz üçüncü sıradaki yazınızın sürekli birinci sırada çıkmasını istiyorsanız, yada blogunuzda geçen senelerde yayınladığınız bir yazıyı yine ana sayfada çıkarmak istiyorsanız;
1-Kumanda Panelinde blog kayıtlarınızın olduğu kısmı açın ve öne almak istediğiniz yazının üzerine gelip Düzenle linkine tıklayın.Aşağıdaki şekilde olduğu gibi.

2-Daha sonra açılan ekranda blogumuzda yazının yayınlandığı tarihi değiştirip, yazımızı blogda en üste yada istediğimiz bir yere alabiliriz.
Blogunuzda yayınladığınız yazıları bir tarih şerinde dizilmiş birer nokta olarak düşünün biz tarihlerle oynayıp bu tarih şeridindeki noktaların yerini değiştiriyoruz sadece.

Yukarıda resimde gördüğünüz Tarih ve saati ayarlayın kutucuğunu işaretleyin ve ileri bir tarihi seçip aşağıdaki Tamam kutucuğunu tıklayın.
Örnekte incelediğimiz yazı 6 Haziran 2015 te yayınlanmış ben buradaki tarihi değiştirip 10 Mayıs 2017 yaparsam, 10 Mayıs 2017 tarihine kadar blogumda ne kadar yazı yayınlarsam yayınlayayım en üstte hep bu yazım kalacak.Yada bu yazının tarihini 10 Mayıs 2014 yaparsam yazı yeni olmasına rağmen en üstte çıkmayacak ve 10 Mayıs 2014 tarih aralığındaki yazılarımın olduğu sıralamay gidecek.
Blogger yazılarınızdan istediğiniz yazının sürekli ana sayfada kalmasını veya bloggerde istediğiniz yazıyı en üstte göstermek gördüğünüz gibi çok basit.Takıldığınız yer olursa yazı altındaki yorum kısmından sorabilirsiniz.

Not:Bu yazı Blogger sabit sayfa oluşturma yazımızın altına yorum yapan Personal Trainer isimli ziyaretçimizin sorusu üzerine kaleme alınmıştır.

31 Mayıs 2015 Pazar

Blogger Resimlerinize Animasyon ve Başlık Efekti Ekleme

Java kodlarına gerek duymadan tamamen CSS kodlarını kullanarak Blogger Resimlerinize Animasyon ve Başlık Efekti Ekleme yöntemini silerle payaaşacağız. Bahsettiğimiz eklenti sayesinde ziyaretçiler maus ile resimlerinizin üzerine geldiğinde resimde hafif bir kararma olacak ve soldan bir şerit çıkacak bu şeritte de resim başlığınız yazacak, bu sayede ziyaretçi resminizin başlığını güzel bir efektle görmüş olacak. Üstelik kod olarak sadece CSS kullanılması sitenizde hız bakımından ve kod yoğunluğu olarak hiçbir yük getirmeyecek, sitenize açılırken yüklenen resimler herzamanki hızında yüklenecek, bu yönüyle eklenti gerçekten çok kullanışlı geldi bana.

Sizde Blogger Resimlerinize Animasyon ve Başlık Efekti Eklemek istiyorsanız aşağıdaki resmin üzerine maus ile gelip efektin nasıl olduğuna bir göz atın derim.

Blogger Resimlerinize Animasyon ve Başlık Efekti Ekleme


Nasıl? Blogger Resimlerinize Animasyon ve Başlık Efektini beğendiniz mi? Eğer beğendiyseniz çok basit bir kaç işlem ile bunu sizde sitenize veya blogunuza uygulayabilirsiniz.

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp  4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.

/*---- Blog Okulu Blogger Bildirim Kutusu Ekleme ---*/
.blogokuluzoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none}
.blogokuluzoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2}
.blogokuluzoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%}
.blogokuluzoom img{border:none;display:block;z-index:1}
.blogokuluzoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.blogokuluzoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.blogokuluzoom:hover:before{opacity:0.3}
.blogokuluzoom:hover:after{left:0}


6-Normalde blogunuza eklediğiniz bir resmin html kodları aşağıdaki gibidir:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-NSCxWPC_2Oo/VWroDsbwNDI/AAAAAAAALVk/Nzq8xlEWqI0/s540/blogger-resimlere-animasyon-ekleme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-NSCxWPC_2Oo/VWroDsbwNDI/AAAAAAAALVk/Nzq8xlEWqI0/s540/blogger-resimlere-animasyon-ekleme.png" /></a></div>

Blogger Resimlerinize Animasyon ve Başlık Efekti Eklemek istediğiniz resmin kodu içerisine sadece class="blogokuluzoom" kısmını değiştireceğiz.
Eklediğiniz zaman, resim html kodumuz aşağıdaki gibi olacak.Ayrıca başlık için aşağıda yeşil renkle verdiğimiz title="Resimde Çıkan Başlık Kısmı için Buraya" kısmını eklemeniz gerekiyor.

<div class="seperator" style="clear: both; text-align: center;">
<a  class="blogokuluzoom" title="Resimde Çıkan Başlık Kısmı için Buraya"  href="http://2.bp.blogspot.com/-NSCxWPC_2Oo/VWroDsbwNDI/AAAAAAAALVk/Nzq8xlEWqI0/s540/blogger-resimlere-animasyon-ekleme.png" 
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" 
src="http://2.bp.blogspot.com/-NSCxWPC_2Oo/VWroDsbwNDI/AAAAAAAALVk/Nzq8xlEWqI0/s540/blogger-resimlere-animasyon-ekleme.png" /></a></div>

3 Mayıs 2015 Pazar

CSS3 ile Blogger Bildirim Kutuları (Uyarı,Dikkat,Hatırlatma,Bilgi) Oluşturma


Blogunuzda Hatırlatma,Uyarı,Dikkat,Bilgi, Sonuç,Güncelleme vb. genel bir bildirim yapmada kullanabileceğiniz ve CSS3 ile hazırlanmış renga renk, işlevine göre renklendirilmiş kutucukları blogunuza eklemeyi anlatacağız.Blogger bildirim kutuları, mesaj kutularını kullanarak ziyaretçilerinize, satır aralarında istediğiniz mesajı en iyi şekilde verebilirsiniz.Blogger bildirim kutularını ölçeklendirme gibi bir derdiniz yok, yazdığınız alanın boyutunu otomatik olarak kendisi alır, başlık kısmını da istediğniz gibi kendiniz ayarlayabilirsiniz.Kullanıcının kendine göre rahatça tasarlayabileceği bir şekilde dizayn edilmiş. Örneğin; "dikkat" yazan kutucuğun başlığını isterseniz "Çok Önemli Uyarı" gibi değiştirebilirsiniz.
DEMO GÖRÜNÜM

Blogger Bİldirim Kutularını BLogunuza Eklemek İçin

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp  4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.
/*---- Blog Okulu Blogger Bildirim Kutusu Ekleme ---*/ 
.sc-notification{color:#fff;line-height:1.4em;margin:10px 0 1em;padding:.7em 1.2em;background-color:#ffffe0;border:1px solid #e1db8b;font-size:15px;font-family:helvetica;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}
.sc-notification .headline{font-size:17px;font-family:oswald,arial;padding-bottom:10px}.sc-notification.sc-warning{background-color:#fc402c;border:1px solid #C91704}
.sc-notification.sc-alert{background-color:#FF8377;border:1px solid #F15C4C}.sc-success.sc-notification{background-color:#2ec23e;border:1px solid #039D14}
.sc-info.sc-notification{background-color:#fdce09;border:1px solid #DFB400}.sc-update.sc-notification{background-color:#29b7ff;border:1px solid #069DE9}
.sc-info.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f05a';font-size:20px;padding-right:10px}
.sc-update.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f0a1';font-size:20px;padding-right:10px}
.sc-alert.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f06a';font-size:20px;padding-right:10px}
.sc-success.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f058';font-size:20px;padding-right:10px}
.sc-warning.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f071';font-size:20px;padding-right:10px}

6-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp bulun.
7-Aşağıdaki kodu kopylayın ve 6. adımda bulduğunuz </head> kodunun üst satırına yapıştırın.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/blogokulu-kisa-kod.js' type='text/javascript'/>

Not:Eğer daha önce yayınladığımız blogger jquery tab menu ekleme isimli konuda 7.adımda verdiğimiz kodun aynısını vermiştik eğer bu kodu daha önce eklediyseniz tekrar eklemenize gerek yoktur.

8- Son olarak da, CSS3 ile Blogger bildirim kutularını yazı içerisinde ekllemek istediğiniz yere aşağıdaki kodları yazmanız gerekiyor.Blogunuza ekleme için eklemek istediğiniz yere aşağıdaki kodu yapıştırıp ilgili kısımları doldurun.


Blogger Dikkat Kutusu Eklemek için;


[warning headline="Dikkat!"]Mesajınızı Buraya Yazabilirsiniz.[/warning]
Burada Dikkat! yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.


Blogger Bilgi Kutusu Eklemek için;


[info headline="Bilgi"]Mesajınızı Buraya Yazabilirsiniz.[/info]
Burada Bilgi yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.


Blogger Hatırlatma Kutusu Eklemek için;


[update headline="Hatırlatma"]Mesajınızı Buraya Yazabilirsiniz.[/update]
Burada Hatırlatma yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Sonuç Kutusu Eklemek için;


[success headline="Sonuç"]Mesajınızı Buraya Yazabilirsiniz.[/success]
Burada Sonuç yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Blogger Uyarı! Kutusu Eklemek için;


[alert headline="Uyarı!"]Mesajınızı Buraya Yazabilirsiniz.[/alert]
Burada Uyarı! yazan ksımı istediğiniz şekilde değiştirererk başlığı değiştirebilirsiniz.

Bütün bu işlemleri doğru yaptığınnızda CSS3 ile Blogger Bildirim Kutularını blogunuzda istediğiniz her yere ekleyebilirsiniz.

11 Nisan 2015 Cumartesi

Blogger jQuery Tab Menu Ekleme

Blogger jQuery tab menu ekleme yöntemlerinden en basitini ve yazı içerisinde kullanımı en kolay olanı blogunuza uygulama yöntemini sizlerle paylaşacağız.Blogger tab menu ne işime yarayacak diyenleriniz olabilir, aslında blogger tab menuyu her yerde kullanabilirsiniz, sizin hayal gücünüze ve yaratıcılığınıza kalmış bir durum yine de bir örnekle açıklamaya çalışayım;

Örnek:Yemek tarifleri yayınladığınız bir blogunuz olsun, bu blogunuzda herşeyi alt alta çarşaf liste şeklinde yayınlamaktansa tab menuyu kullanarak birinci taba kullanılacak malzemeler, ikinci tab kısmına hazırlanışı,üçüncü tab kısmına videolu anlatım, dördüncü taba da resimleri koyarak ziyaretçinizin bir tıkla istediği tarif içerisinde istediği bilgilere kısa yoldan ulaşmasına ve sayfanızda ziyaretçi 1.tab kısmına göz atarken diğer tabdaki yazılarınızında bir yandan yüklenmesi için zaman kazanarak sayfa boyutunuz büyük olsa bile hızlıca yüklenmesini sağlamış olursunuz, yani ziyaretçi hiç beklemeden bütün veriler yüklenmiş olur.Bu sadece basit bir örnekti, siz bunu kendinize göre istediğiniz şekilde uyarlayabilirsiniz.
DEMO GÖRÜNÜM

Bloguma Blogger Tab Menu nasıl ekleyebilirim?

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp  4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.

/*-----Shortcode Tabs--------*/
.sc-tab ul.tabset.tabs li a.active{
border-bottom: 1px solid #70CF0A;
border-top: 3px solid #70CF0A;
padding: 8px 10px 10px 10px;
background: #70CF0A;
color: #fff;
border-left: 1px solid #70CF0A;
border-right: 1px solid #70CF0A;
}
.sc-tab ul.tabset.tabs li a:hover {
background: #70CF0A;
color: white;
border-color: #70CF0A;
}

.sc-tab ul.tabset.tabs {
margin: 0;
padding: 0;
list-style: none;
}
.sc-tab ul.tabset.tabs li {
float: left;
margin: 0px 4px 0px 0px;
border-right: 1px solid #EEE;list-style: none !important;
}
.sc-tab ul.tabset.tabs li a {
color: #666;
text-decoration: none;
    font-family: oswald, arial;font-size: 14px;
}
.sc-tab .tab-box {
clear: both;
position: relative;
z-index: 50;
top: 3px;
}
.sc-tab .tab_content {
display: none;
border: 1px solid #EEE;
padding: 1em;
border-bottom: 3px solid #70CF0A;
box-shadow: 2px 4px 6px #EEE;
font-family: arial;
font-size: 14px;
}
.sc-tab ul.tabset.tabs li a {
padding: 10px;
display: block;
border: 1px solid #EEE;
background: #fbfbfb;
position: relative;
z-index: 100;
} 
6-Yukarıdaki kodlar içeriisnde (5.adım) #70CF0A   kodunu değiştirip html renk kodlarını kullanarak istediğimiz renkte blogger tab menu oluşturabilirsiniz.
7-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp bulun.
8.Aşağıdaki kodu kopylayın ve 7. adımda bulduğunuz </head> kodunun üst satırına yapıştırın.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/blogokulu-kisa-kod.js' type='text/javascript'/>

9- Tab menu eklemek istediğiniz yere aşağıdaki kodu yapıştırıp ilgili kısımları doldurun.
[tab]
[content title="Tab 1"] Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin.[/content]
[content title="Tab 2"] Tab2 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[content title="Tab 3"] Tab3 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[/tab]

Tab1, Tab2,Tab3 yerine tab başlıklarını yazın.
Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. yazan yere içeriğinizi ekleyin.
Bütün bu işlemleri doğru yaptığınnızda blogger tab menu eklentisini artık istediğiniz her yere ekleyebilirsiniz.

Blogger Mobil Reklam Aktivasyonu ~ Blogger için Adsense Mobil Uyumu

Mobil kullanımın ne kadar yaygınlaştığını blogunuza gelen ziyaretçilerin istatistiklerini incelediğinizde farkına varmışsınızdır.Blogger kullanıcıları için bu işi fırsata çevirmek amacıyla, blogunuza gelen ziyaretçi mobil yada masaüstü kullanım, hangisi ile gelirse gelsin, reklamlarınızı gösterip bunu fırsata çevirmek istiyorsanız blogger mobil reklam aktivasyonu yapmanız grekir.Aslında anlatacağımız işlem tam da blogger mobil reklam uygulaması değil, blogger içerisinde var olan bir reklam gösterimi, sadece bunu aktif hale getirdiğinizde mobil kullanıcılar için kendisi otomatikmen reklamlarınızı gösteriyor.

Blogger mobil reklamları aktif hale getirmek için aşağıdaki resmi inceliyelim.


1-Blogger kumanda panelinden giriş yapın, ve yukarıdaki resimde 1 numaralı kısımdaki Kazançlar Adsense linkine tıkladığınızda resimdeki sayfaya geleceksiniz.
2-Yukarıda 2 numara ile gösterdiğimiz Burada Reklam Göster kısmında Evet yazan yeri tıklayın.
3-Yukarıda 3 numara ile gösterdiğimiz kısımda açılır pencere de reklamlarınızın blogunuzda nerede görüntülenmesini istiyorsanız onu seçin.Üç seçenekten birini seçin.
4-Yukarıda 4 numara ile gösterdiğimiz Ayarları Kaydet kısmına tıklayın ve çıkış yapın.Blogger reklamlarınız mobil görümü mobil cihazlarda da giriş yaptığınız cihaza uygun olarak görüntülenecektir.

Blogger reklam aktivasyonu için dikkat emeniz gereken blogger hesabınız da adsense nin aktif olması gerekiyor.Eğer blogger hesabınızın dışında ayrı bir adsense hesabınız var ise bura da o hesabı da kullanabilirsiniz.Eğer hiç yok ise blogunuda kazançlar kısmından başvuru yapabilirsiniz.


1 ve 2 nolu okları takip ederek adsense kayıt işelmlerinizi açılan sayfalardaki direktifleri uygulayarak kayıt olabilirsiniz.Yukarıda anlattığımız gibi blogger mobil reklam görünmesi için buradan reklamlarınızı aktive etmeniz gerekiyor.Blogger mobil reklam uygulamsı ile daha çok kazanacağınıza emin olabilirsiniz.Her zamanki gibi sorunuz olursa yorumlar kısmını kullanabilirisiniz.Bol kazançlar.

20 Şubat 2015 Cuma

Bloggere Powerpoint Ekleme ~ Blogger Sunu Ekleme

Ziyaretçilerimizden fatmanur yorumlar kısmında bloggere sunu ekleme konusunu anlatmamızı istemiş.Bizde onu kırmayarak en basit ve kolay bir yolla bloggera power point sunusu eklemeyi kısaca anlatalım.Blogger kullanıyorsanız mutlaka bir google hesabınız vardır, bizde başka sitelere üye olmadan ve basit bir şekilde bloggere power point ekleme~bloggere sunum ekleme işini de yine bir google ürünü olan google drive üzerinden size anlatmaya çalışalım.

Bloggere power point ekleme~blogger sunu nasıl eklenir ?

1-Google drive google hesabımızla giriş yapıyoruz.
2-Daha önceden hazırladığımız powerpoint sunusunu aşağıdaki resimde gördüğümüz numaraları takip ederek, power point sunusunu bloggera ekliyoruz.


3-Google drive da Dosyalar kısmına tıkladığımızda bir pencere açılacak ve bilgisayarımızdaki power point sunusunu burada seçip butonuna tıklayacağız.

4-Daha sonra ekranın sağ tarafında aşağıdaki gibi bir pencere çıkacak, bu pencerede yüklendi-yükleme tamamlandı yazısını görene kadar bekleyin.

Yükleme işlemi tamamlanınca yukarıdaki şekilde çerçeve içerisine aldığımız linki tıklayın.
5-Linki tıkladığınızda aşağıdaki resimde gördüğünüz gibi web ortamında google drive yüklemiş olduğunuz slayt açılacak.

Açılan slaytta yukarıdaki şekilde gördüğünüz 1 numaralı kısmı ardından 2 numara ile gösterdiğimiz Öğeyi Yerleştir Linkine tıklayın.
6-Öğeyi yerleştir linkine tıkladığınızda aşağıdaki gibi bir pencere açılacak ve bu pencerede power point sununuza ait iframe kodunu göreceksiniz.

Yukarıda 1 numara ile belirttiğimiz iframe kodunu kopyalayın ve tamam butonuna tıklayın.
7-Bloggere Powerpoint eklemek için blogger hesabınıza giriş yapın ve yeni bir yazı yayınlar gibi Yeni Yayın butonuna tıklayın.Açılan yeni yazı alanının HTML modunda olmasına dikkat edin ve HTML modundayken 6. adımda kopyaladığımız iframe kodunu buraya yapıştırın.

Gerekli açıklamaları,etiketleri ve başlığınızı yazdıktan sonra yazınızı yayınlayın.Artık power point sunumuzunu bloggere başarılı bir şekilde eklemiş oldunuz.


Bir sonraki yazımızda görüşmek üzere...

2 Şubat 2015 Pazartesi

Blogger İnstagram Eklentisi ~ Blogger İnstagram Resimleri

Son zamanlarda etkin kullanılan ve kullanımı bir hayli yaygınlaşan instagram ile paylaştığınız resimleri blogunuzda da görüntüleyebilmek için bloggere özel üretilen blogger instagram eklentisi ile instagram hesabınızda paylaştığınız bir resmi aynı zmanda blogunuzda da yayınlama imkanını bulabilirsiniz.Eğer ilgi çekici resimler paylaşırsanız blogunuzu takip eden kişiler bir süre blogger instagram eklentisi sayesinde instagram hesabınızı da takip etmeye başlayacaktır böylelikle instagramda takipçilerinizi arttırmak için blogunuzu da kullanmış olursunuz ve blogunuzu yeni bir eklenti (blogger instagram eklentisi) kazandırmış olursunuz.
Demo Görünüm
Blogger İnstagram Eklentisini Bloguma Nasıl Eklerim?
1-Buraya tıklayarak siteye giriş yapıyoruz.
2-Açılan Sayfadaki formu aşağıdaki gibi dolduruyoruz.
3-Oluşturduğumuz blogger instagram eklentisinin nasıl göründüğüne bakmak isterseniz, yukarıdaki resimde görünen mavi renkli Preview butonuna basın.
4-Kod Oluşturmak için de yeşil renkli Generate code butonuna basın.Butona bastığınızda aşağıdaki gibi bir kod sayfası açılacak.
5-Yukarıdaki resimde gördüğünüz pencerede açılan ve sizin ayarlarınızı barından kodu kopyalıyoruz.
6-Blogger hesabımızla giriş yapıyoruz.
7-Kumanda Paneli>Yerleşim modunu açıyoruz ve buradan Gadget Ekle>HTML/JavaScript gadgetini seçiyoruz.
8-Açılan Gadget penceresine 4.adımda resimde gördüğümüz ve kopyaladığımız kodu yapıştırıyoruz.
9-Kaydet butonuna basıp çıkıyoruz.
10-Blogger İnstagram eklentisi blogunuza eklenmiş oldu.
Dilerseniz eklediğiniz Blogger İnstagram eklentisini yerleşim modundayken sürükle bırak yöntemi ile blogunuzda istediğiniz bir alana sürükleyip bırakabilirsiniz.
İnstagram hesabımızı burdan takip edebilirsiniz. @blogokulu

28 Kasım 2014 Cuma

Blogger Dikey Menü Eklentisi (Navigasyonlu)

Blogger gadget ekleme yöntemiyle bir kaç tık sonunda blogunuzda navigasyonlu bir dikey menü olmasını istermisiniz ? Blogger dikey menü ile blogunuzun kenar çubuğunda, footer (alt alanlara) menüler ekleyebilir istediğiniz şekilde linkler verebilirsiniz. Blogger dikey menü eklentisini gadget olarak blogunuza eklemek için yapmanız gerekenleri maddeler halinde sıralyacağız. Bu maddeleri sırası ile okuduğunuzda ve uyguladığınızda sizde blogger dikey menü eklentisini blogunuza eklemiş olacaksınız.


Blogger Dikey Menü Eklentisini bloguma nasıl eklerim?

1-Blogger Hesabınızla giriş yapın.
2-Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip, açılan pencereye aşağıdaki kodu kopyalayıp yapıştırıyoruz.



<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ --> 
<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight:bold;
    font-variant: inherit;
    padding: 0px;
    color:#CCC;
    display: block;
    padding: 13px 50px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background:#333 url(http://1.bp.blogspot.com/-ajlWgyGZgjk/UiX0wp6VUaI/AAAAAAAADSI/R4DmpDf5onc/s1600/menu-bg.png) no-repeat;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#v-menu a:hover {
    background: #5e5e5e url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
   
}
#v-menu a:visited {
    background:url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;   
}
#v-menu a:active {
    background:url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;   
}
</style>
<div id='v-menu'>
<ul>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
</ul>
</div>
<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ -->
Kod içerisinde mavi renkle belirttiğimiz "URL ADRESİNİZ" kısmına adresimizi yazıyoruz, kırmızı yere ise menudeki ismi yazıyoruz.
Örnek:
<li><a href="http://www.blogokulu.org/2014/11/blogger-dikey-menu-eklentisi-navigasyonlu.html">Blogger Dikey Menü</a></li>
gibi.

9 Kasım 2014 Pazar

Blogger Devamını Oku ~ Otomatik Yazı Kısaltma Eklentisi (Resimli)

Bloggerin eklenti ve özellik yönünden sınır tanımadığını defalarca yazmışımdır, aslında çoğu hazır temada var olan ama blogger özel şablonlarda farklı bir yöntemle kullanaılabilen bir eklenti; ana sayfada yayınladığınız yazının tamamını göstermek istemiyorsanız "devamını oku" yada ingilizcesi "read more" olarak bilinen özelliği kullanmanız gerekir.Normalde bloggerde bu özellik mevcut, ama her yazıya devamını oku özelliğini manuel olarak tek tek uygulamanız gerekiyor.Daha önceden manuel olarak blogger devamını oku yada atlama aralaığı olarak bilinen özelliği sizlere anlatmıştık.Şimdi ise ana sayfada yayınladığınız yazıların bir resim ve bir miktar metinle birlikte kısaltıp özet şeklinde ana sayfada görünmesini sağlayacak ve altına devamını okumak isteyenler için "devamını oku" diye link atıp, bu linke tıklayanlara yazının tamamını gösterecek bir eklentiyi bütün yazılarınıza tek kodla eklemeyi anlatacağız.

Blogger Devamını Oku Eklentisinin Faydaları ?

1-Yazılarınız ve blogunuza bir yazıda eklediğiniz resim sayısı fazla ise çarşaf liste gibi aşşağa uzayıp gitmeden, yazı başlığı ve resim kullanıcının ilgisini çekerse tıklayıp okuyacak, aksi halde maus tekerini bayağı bir yuvarlayıp aşşağı doru inmesi gerekecek.Aşşağı-yukarı hareketler kullanıcıyı sıkabilir.
2-Ana sayfada bir bakışta birden fazla yazıyı kolayca ziyaretçiler görebilecek.
3-Ana sayfa daha hızlı yüklenir ve siteniz biraz daha hızlı açılabilir.
4-Sayfa numaralandırma kullanıyorsaznı yazılarınız arası geçişler daha çabuk olacak.
5-Ziyaretçi aradığını daha çabuk bulabilir.
6-Görüntü olarak daha şık ve daha profesyonel bir bloga sahip olursunuz.

Blogger Devamını Oku özelliğini bloguma nasıl eklerim?


1-Blogger Hesabınızla giriş yapın.( kodlar içerisinde oynama yapacağımızdan her ihtimale karşı blog şablonumuzun yedeğini almanızı tavsiye ederiz (blogger yedek alma))
2-Kumanda Paneline>Şablon>Htmlyi Düzenle yolunu takip ediyoruz.

3-Açılan Kod sayfasında Ctrl+F yardımı ile aşşağıdaki kodu aratıp bulalım.

<data:post.body/>

Not:Bu koddan gnellikle üç tane oluyor.Arama yaptığınız da siz üçüncüyü bulacaksınız ve kodu oraya yerleştireceksiniz.Bazen farklılıklar olabiliyor o yüzden bütün işlemleri yaptığınızda eğer olmaz ise yaptığınız işlemleri geri alıp 2. nin yerine yapıştırıp baştan yapmanız gerekebilir.

4-Bulduğumuz kodun yerine aşağıdaki kodu kopyalayıp yapıştıralım.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Devamını Oku &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

5-şimdi de kodlar içerisinde yine Ctrl+F yardımı ile </head> kodunu aratıp bulalım ve aşağıdaki kodu kopyalayıp bulduğumuz </head> kodunun hemen üst satırına yapıştıralım.

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Yukarıda mavi renkli olarak belirttiğimiz 160 ve 180 değerleri devamını oku özelliğinde özet olarak çıkacak olan resmin boyutunu ayarlamaya yarıyor, kırmızı renkli 400 ve 490 değerler ise özet olarak gösterilecek yazının karakter sayısını belirtiyor.İstediğiniz şekilde bu değerleri değiştirebilirsiniz.

6-Bütün bu işlemleri yaptıktan sonra Şablonu Kaydedip çıkıyoruz ve Blogger Devamını Oku özelliğinin başarılı bir şekilde yüklenip yüklenmediğini test etmek için ana sayfaya bir göz atıyoruz.

Blogger Devamını oku özelliği ile ilgili sorularınız olursa yorum kısmından sorabilirsiniz.

26 Ekim 2014 Pazar

Blogger Breadcrumb Eklentisi ~ Blogger Seo Ayarları

İnternet kullanımının bayağı yaygınlaşması ve hayatın bir parçası haline gelmesi sonucunda herkesin internettte site açıp blog yazdığı bir ortamda insanlar aramalarda sıralamaya girmek ve sitesine-bloguna ziyaretçi çekmek için kıyasıya yarışır oldular.Ben bu olayı şuna benzetiyorum; Gideceğiniz istikametteki yola bir çok kişi girmiş ve trafik sıkışmış vaziyette, ilerlemeniz çok zor görünüyor fakat yeni açılan ara yollar ise bomboş ve kimsenin bu yoldan haberi yok, işte bu breadcrumb eklentisi google sıralamalarındaki sıkışık trafikten sizi kurtarıp ara yoldan sizi hedefe götürecek googlenin de tavsiye ettiği bir eklenti.

Peki breadcrumb eklentisi nedir ?

Google aramalarında başlığın alt tarafında görünen yazı linkinizi anlaşılabilir hale getiren ve hiyerarşik bir yapıya dönüştüren eklentiye breadcrumb navigasyon eklentisi denir.Normal şartlarda blogunuzda yada sitenizde google breadcrumb navigasyon eklentisi yok ise google aramalarında başlık altında yazı linkiniz http://www.blogokulu.org/2012/10/blogger-blog-nasil-acilir-blog-ac.html şeklinde görünür.Bununla ilgili olarak aşşağıdaki resmi inceleyelim;


Google breadcrumb eklentisini blogunuza eklediğinizde ise google aramalarında başlık altında yazı linkiniz Ana sayfa » Etiket Linki » Başlık şeklinde hiyerarşik bir yapıda ve daha anlaşılabilir bir şekilde görünecektir.Blogger breadcrumb eklentisini sitesine uygalamış bir bloggerin aramalarda nasıl göründüğünü tam olarak anlamak için aşşağıdakidemo görünüm butonuna tıklayın ve aramalarda breadcrumb eklentisinin etkisini canlı olarak görün.

DEMO GÖRÜNÜM

Blogger Breadcrumb eklentisini blogunuza uygulamak için;

1-Blogger Hesabınızla giriş yapın.( kodlar içerisinde oynama yapacağımızdan her ihtimale karşı blog şablonumuzun yedeğini almanızı tavsiye ederiz (blogger yedek alma))
2-Kumanda Paneline>Şablon>Htmlyi Düzenle yolunu takip ediyoruz.

3-Açılan Kod sayfasında Ctrl+F yardımı ile aşşağıdaki kodu aratıp bulalım.

<b:includable id='main' var='top'>

4-Bulduğumuz kodun yerine aşağıdaki kodu kopyalayıp yapıştıralım.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Anasayfa</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span>Etiketi yok</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span>Arşiv <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span>Tüm Yazılar</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

5-Buraya kadar olan kısmı kaydedelim bir hata uyarısı almıyorsak 6. adıma geçelim, ama hata uyarısı alırsak Ctrl+Z ile yaptığımız işlemi geri alalım ve 3. maddeden başlayarak işlem basamaklarını daha dikkatli tekrardan uygulayalım.

6-Ctrl+F yardımı ile kodlar içerisinde aşşağıdaki kodu aratıp bulalım.

]]></b:skin>

7-Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştıralım.

.breadcrumbs {
font-size :13px;
font-style :italic;
border : 1px solid #d1d1d1;
border-radius : 5px;
margin-bottom :5px;
padding : 8px 6px 10px 6px;
}

8-Şablonu Kaydet butonuna basalım ve çıkış yapalım.

Blogger breadcrumb eklentisini 8 basamakta blogumuza uygulayarak, blogumuza  faydalı olacak bir blogger seo ayarı yapmış olduk.Eklenti etkisini hemen göstermeyebilir, bir müddet bekliyelim ve sitemizdeki bir linki kopyalayıp google aramalarında nasıl göründüğünü kontrol edelim.Eğer bir sorun yaşarsanız yazı altındaki yorum kısmına yada iletişim kısmından bizimle irtibata geçebilirsiniz.

Blogger seo ile ilgili diğer yazımızımızı okudunuz mu? : Blogger Seo