2014/12/23

Blogger Dikey Açılır Menü Çubuğu Eklentisi

Blogger, Ana sayfanızda statik sayfalar, açılır dikey menü ve sosyal paylaşım site linklerini kullanıp istediğiniz gibi özelleştirme yapabileceğiniz sabit ve dikey açılır menü çubuk eklentisi. Yakın bir zamana kadar yeni bir blog açmadı iseniz şu anda açılan yeni bloglarda açılır menü çubuğunun çalışmadığını fark edebilirsiniz. Bir test blogunuz varsa hemen deneme yaparak bu durumu inceleyin. Eski kurulan bloglarda sorun olmayan bu durum, yeni bloglar için maalesef çalışmıyor. Birkaç gündür yeni açtığım bloglarda yaptığım araçtırma sonuçları bunlar ilede sınırlı kalmıyor. 

Blogger şablon kodlarında henüz araştırmasını yapamadığım, blogger geliştiriciler tarafından bazı farklı kodlarında eklendiğini gördüm. Ayrıca sidebar başlık ismi ve alt bağlantı ismi altında eskiden yatay kesme renkli sekme çizgisi yoktu. Ancak artık bu eklentide temalar arasında farklılık göstersede şu anda var. Şablon özelleştir → Yayın arka planı → çerçeve rengi temanızda varsa kontrol edin. İstediğiniz herhangi bir rengi sidebar, footer alt bilgi gadget isimlerinin altında düz ince bir çizgi olarak gösterebiliyorsunuz. Biraz sonra demo olarak vereceğim test blogu bu anlatılanlar için güzel bir örnek olabilir.

Durum böyle olunca, ne yapılabilir düşüncesi ile açılır menü çubuğunu bende farklı şekilde çalıştırmayı düşündüm. Blog temanızı değiştirdiğinizde sizde aynı sorunu yaşayacağınızı hatırlatmak isterim. Yapacağımız işlem sonucu blog yerleşim görüntüsünde birkaç nokta görülüyor. Ancak sorun yapılacak bir işlem değil. Bizim için önemli olan, eklentinin duyarlı ve çalışır olması önemlidir. Blogunuza açılır menü çubuğu eklemeye hazırsanız aşağıda anlatılanları takip edebilirsiniz... Yazının Devamını Oku

2014/12/19

Blogger İçin Özel İlgili Mesajlar Eklentisi

Blogger yazılarınız altında istediğiniz gibi özelleştirebileceğiniz, nRelate, Linkwithin benzer yazılar, ilgili mesajlar benzeri Related Posts gadget eklentisi. Eklentinin en güzel özelliği hiçbir yere kayıt olmadan, dış sunuculardan yazı çekmeden kendi blog alt yapınızı kullanarak yazılarınızın altında istediğiniz ebatlarda resimlerinizi düzenleyip, alt yazı uzunluğunu kendinizin tasarlaması.

İlgili mesajlar eklenti özellikleri :

1. Hiçbir yere kayıt olmanıza gerek yok.
2. Herhangi bir marka ismini göstermeniz gerekmiyor. Tamamen özgürsünüz.
3. Blog ana sayfanızda Devamı Oku eklentinizi etkilememesi için yazı ana sayfanızda görülmez. ilgili yazı açıldığında mevcut yazı altında ilgili mesajlar görülür.
4. Blog ana sayfanızda yazınızın genişliğine göre resimler sığmıyorsa küçültün büyültün temanıza uyumlu hale getirin.
5. Resim altında mesaj ismini uzun veya kısa tutabilirsiniz.

İlgili mesajlar ile ilgili teknik özellikler :

1. ilgili mesajlar dinamik blog da çalışmaz.
2. Kategorize ettiğiniz etiketlerin gizlenmemiş açık olması gerekir.
3. Yazılarınızda mutlaka etiket olması gerekir. Etiket yoksa ilgili içerik görülmez.
4. Blogger resim galeriniz Google Plus fotoğraflarda yüklü olduğundan en iyi şekilde çalışmasına demektir.
4. Resim olmayan yazılarınız için bir resim linki ekleyebilirsiniz. Bu boşluğu eklediğiniz resim linki tamamlayacaktır.
5. Tüm veriler blog date bilgilerinizden alındığından hızlı ve blog’unuzu kasmaz.

İlgili mesajlar eklentisinin kullanılması :

1. İlgili mesajlar eklentisini iki şekilde de blogunuza ekleyebilirsiniz.
  1. Gadget olarak
  2. Şablon kodlarına ekleyerek

İlgili mesajlar eklentisinin blog’a eklenmesi :

1. Blog’unuzu önce yedekleyin.Kendinize güveniyor iseniz yedek almanıza gerek yok.
2. Gadget olarak ekle :
⇒ Blogger kumanda paneli → Yerleşim → Gadget ekle ⇒ Html/Javascrip gadget’ine ekleyin.
3. Şablon kodlarına ekle :
⇒ Blogger kumanda paneli → Şablon ⇒ Bu etiketi bulun </body> , CTRL+F ile aratın.
İlgili mesajlar kodu : Aşağıda verilen kodu kopyalayın, seçiminize bağlı olarak gadget veya şablon kodlarınıza ekleyin.
Ayrıca okuyun ⇒  Özel Kategori Widgetini Bloguna Ekle
<!-- BEGIN CODE IT PRETTY RELATED POSTS GALLERY CODE AG -->
<style>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
}
 
.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
}
.related-posts h5 {
font-size: 1.1em;
}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
 
//<![CDATA[
$(document).ready(function() {
    
    
    
    //CODE OPTIONS
    
    
    var maxSearched = 500; 
    var minimum = 3; 
    var maximum = 4; 
    var imageSize = 125; 
    var roundImages = false; 
    var relatedTitle = true; 
    var labelInTitle = true;
    var relatedTitleText = "Bunlarda ilginizi çekebilir:"; 
    var defaultImage = ""; 
    var campaignTracking = true; 
    var campaignSource = "gallery"; 
    var campaignMedium = "postFooter"; 
    var campaignName = "relatedposts"; 
    var insertBefore = $('.post-footer'); 
    
    
    //END CODE OPTIONS - DO NOT EDIT BELOW THIS LINE
 
var labels=[];var label;var alternateLabel;var minposts=minimum-1;var postlabels=$(".post-labels a");if(postlabels.length===1){label=postlabels.text().trim()}else if(postlabels.length>1){$(postlabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css("max-width",imageSize);$(".related-posts ul li img").css({"max-width":imageSize,height:imageSize});if(roundImages===true){$(".related-posts ul li img").css("border-radius","50%")}}})}
});
//]]>
</script>
<!-- END CODE IT PRETTY RELATED POSTS GALLERY CODE AG-->
4. Kod için açıklamalar :
→ var maxSearched = 500 : Mevcut her etiketiniz için 500 yazı görüntüler. Yazınız az ise değeri düşürebilirsiniz.
var minimum = 3 :  Yazınızdaki etiket içinde bulunan yazı sayısını gösterir. Aynı etikete sahip 3 ad yazınız varsa görülmeye başlar. Yazınız ve etiket sayınız az ise değeri düşürün.
var maximum = 4 : İlgili yazı altında görülecek resim ve açıklama sayısını gösterir. Tema genişliğine göre 5, 6 veya 3 olarak belirleyebilirsiniz.
 var imageSize = 125 : Resim ebatlarınızı, 125 px. değeri ile oynayarak ayarlayın.
5. Tüm ayarları ; //CODE OPTIONS kısmında özelleştirebilirsiniz.

↳↳NOT: Kodlama alt satırda  bir virgül dahi oynatırsanız kod çalışmayacaktır. !!

2014/12/18

Pagespeed Insights ile Site Temanızı Tanıyın

Pagespeed Insights, Google Chrome açık kaynak kodlu geliştirici (Developers) aracı olup, web sayfa performansı haricinde, site temanızı ( resim ölçüsü, sidebar genişlik, Css kod, renkler vs.) düzenleyebileceğiniz araçlar ile donatılmıştır. Google Chrome tarayıcı Pagespeed Insights geliştirici aracını kullanarak blog’unuzun başlık (header) ebatlarını öğrenerek başlık resmi düzenleyebilirsiniz.

Bloggerda yeni kurulan blog ayarları nasıl yapılır

Blogger ayarlar
Blogunuzu yeni kurdunuz ve yazılarınızı yazdınız. Ya ayarlarınızı nasıl yapacaksınız?
Blogger ile blog oluşturmak, kullanmak hem kolay hemde çok zevkilidir.Blogger blogspot da blog oluşturduktan sonra yazılarınızı hazırlamadan önce blog ayarlarını yapmanız gerekir. Bu ayarları yapmazsanız blogunuz çerçevesiz bir tablo görünümüne girer.Google gmail ile bir hesap açtıysanız zaten blogunuza da giriş yapabiliyorsunuz demektir.Gmail hesabınız yoksa google hesabı nasıl açılır başlıklı yazımızı inceleyebilirsiniz. Adımları takip ederek blogunuzun ayarlarını yapın.

Blogger Sayfa Navigasyonu

Blogger Sayfa Navigasyon numaralama bildiğiniz gibi standart Blogger şablonlarında kayıt sayfaları arasında geçiş yapmak için daha eski kayıtlar, daha yeni kayıtlar gibi linkler vardır. Ziyaretçilerinizin blogunuzdaki kayıt sayfaları arasında daha rahat dolaşmaları için numaralı sayfa navigasyonu eklemeniz faydalı olabilir. Blogunuza resimdeki örnekte olduğu gibi numaralı sayfa navigasyonu eklemek için tek yapmanız gereken HTML/JavaScrip gadget kodunu açıp aşağıdaki kodları eklemenizdir.Sayfaların numaralandırıp sıralandırması varsayılan olarak gelmediğinden temaya uyumlu kod düzenlemesi yapılmıştır.