11.08.2016
Goo.gl, bit.ly, ow.ly gibi bir çok popüler bağlantı kısaltma (url shortener) servisi bulunmakta. Sosyal paylaşım sitelerinde yapılan paylaşımlarda kullanılan bu bağlantı kısaltma servisleri genellikle uzun bağlantılarla görüntü kirliliği yapmamak, merak uyandırmak veya karakter kısıtlamalarını aşmamak için kullanılıyor. Fakat site içerisinde yer alan dış bağlantı sayısını az tutmak için farklı site alt yapılarına, kodlamalarına göre site üzerinden bağlantı kısaltma işleminde çeşitli kodlar veya eklentiler kullanılıyor.
Blogger'da da çeşitli bağlantı kısaltma (url shortener) yöntemleri bulunuyor. Bunlardan biri de paylaşmış olduğum bağlantı kısaltma kodları. Bu kodlar sayesinde ister site dışı bağlantıları (site dışı link) , site içi bağlantılara (site içi link) dönüştürebilir, isterseniz bloğuzda hazırlamış olduğunuz yazılara ait uzun bağlantıları kısaltarak sosyal ağlarda paylaşabilirsiniz.
Kullanımı : Aşağıdaki kodları şablonunzda yer alan </head> kodu öncesine yapıştırın. Daha sonrasında kısaltmak istediğiniz bağlantıları manuel olarak alt alta ekleyebilirsiniz.
Notlar :
Kodlar içerisinde yer alan belirgin yerler git blog adresinizden sonra gelen kısım yani blogadresi.com/git gibi (Bu kısmı isteğinize göre değiştirebilirsiniz).
fb ve tw gibi yerler ise git kısmından sonra gelen bağlantının alacağı değer, kelime yani blogadresi.com/git/fb(uzun bağlantının kısaltılmış hali).
fb ve tw gibi değerlerin sağ tarafında yer alan adresler de görüleceği gibi yönlendirilecek olan bağlantılar. İsteğe ve kullanıma bağlı olarak bu kısaltma işlemleri artırabilir fakat son eklenen kısaltma işleminden sonra ', kullanılmamalıdır.
Sonuç :
Örneğin şuan bloğumda kullandığım haliyle zaferzent.com/git/fb bağlantısına tıklanıldığında bana ait facebook profilime gidilecektir.
Kodları kullanmadan önce her blogger eklentisinde olduğu gibi bu eklentinin de artı ve eksi yönleri bulunmakta, bunları göze alarak kullanmakta fayda var.
+ Artı yönleri:
Site dışı bağlantıları bir nevi site içi bağlantılara dönüştürerek site dışı bağlantı sayısını azaltması,
Uzun yazı bağlantılarını kısaltarak twitter gibi karakter kısıtlamalı sitelerde paylaşmaya olanak sağlaması,
- Eksi Yönleri
Bağlantıları manuel olarak oluşturmak,
Çok sayıda bağlantı oluşturma sonucunda kodlarda uzamaya ve bunun sonucunda karmaşıklığa neden olması,
Kısaltılan bağlantılar daha sonra kodlar arasından silindiğinde bu bağlantılara ait sosyal paylaşım sitelerindeki palaşımlardan gelen ziyaretçilerin hata sayfası ile karşılaşmasına neden olup bunun sonucunda ziyaretçi kaybına yol açması.
Blogger Bağlantı Kısaltma (Url Shortener) Eklentisi
Goo.gl, bit.ly, ow.ly gibi bir çok popüler bağlantı kısaltma (url shortener) servisi bulunmakta. Sosyal paylaşım sitelerinde yapılan paylaşımlarda kullanılan bu bağlantı kısaltma servisleri genellikle uzun bağlantılarla görüntü kirliliği yapmamak, merak uyandırmak veya karakter kısıtlamalarını aşmamak için kullanılıyor. Fakat site içerisinde yer alan dış bağlantı sayısını az tutmak için farklı site alt yapılarına, kodlamalarına göre site üzerinden bağlantı kısaltma işleminde çeşitli kodlar veya eklentiler kullanılıyor.
Blogger'da da çeşitli bağlantı kısaltma (url shortener) yöntemleri bulunuyor. Bunlardan biri de paylaşmış olduğum bağlantı kısaltma kodları. Bu kodlar sayesinde ister site dışı bağlantıları (site dışı link) , site içi bağlantılara (site içi link) dönüştürebilir, isterseniz bloğuzda hazırlamış olduğunuz yazılara ait uzun bağlantıları kısaltarak sosyal ağlarda paylaşabilirsiniz.
Kullanımı : Aşağıdaki kodları şablonunzda yer alan </head> kodu öncesine yapıştırın. Daha sonrasında kısaltmak istediğiniz bağlantıları manuel olarak alt alta ekleyebilirsiniz.
Notlar :
Kodlar içerisinde yer alan belirgin yerler git blog adresinizden sonra gelen kısım yani blogadresi.com/git gibi (Bu kısmı isteğinize göre değiştirebilirsiniz).
fb ve tw gibi yerler ise git kısmından sonra gelen bağlantının alacağı değer, kelime yani blogadresi.com/git/fb(uzun bağlantının kısaltılmış hali).
fb ve tw gibi değerlerin sağ tarafında yer alan adresler de görüleceği gibi yönlendirilecek olan bağlantılar. İsteğe ve kullanıma bağlı olarak bu kısaltma işlemleri artırabilir fakat son eklenen kısaltma işleminden sonra ', kullanılmamalıdır.
Sonuç :
Örneğin şuan bloğumda kullandığım haliyle zaferzent.com/git/fb bağlantısına tıklanıldığında bana ait facebook profilime gidilecektir.
<script language='javascript'>
//<![CDATA[
var key = window.location.href.split("git/")[1].replace("/","")
var urls={
'fb':'http://www.facebook.com/fbkullanıcıadı',
'tw':'http://www.twitter.com/twkullanıcıadı
}
if(key){
if(urls[key]){
window.location.href=urls[key]
}else{
document.write("'"+key+"' bulunamadı :(");
}
}
//]]>
</script>
Kodları kullanmadan önce her blogger eklentisinde olduğu gibi bu eklentinin de artı ve eksi yönleri bulunmakta, bunları göze alarak kullanmakta fayda var.
+ Artı yönleri:
Site dışı bağlantıları bir nevi site içi bağlantılara dönüştürerek site dışı bağlantı sayısını azaltması,
Uzun yazı bağlantılarını kısaltarak twitter gibi karakter kısıtlamalı sitelerde paylaşmaya olanak sağlaması,
- Eksi Yönleri
Bağlantıları manuel olarak oluşturmak,
Çok sayıda bağlantı oluşturma sonucunda kodlarda uzamaya ve bunun sonucunda karmaşıklığa neden olması,
Kısaltılan bağlantılar daha sonra kodlar arasından silindiğinde bu bağlantılara ait sosyal paylaşım sitelerindeki palaşımlardan gelen ziyaretçilerin hata sayfası ile karşılaşmasına neden olup bunun sonucunda ziyaretçi kaybına yol açması.
19.05.2016
Fırsat buldukça blogger ile ilgili ipucu, eklenti ve geliştirmeler hakkında paylaşımlar yapmaya devam ediyorum. Fakat bunu yaparken önceliğim daha çok henüz keşfedilmemiş, paylaşılmamış olan konular. Bugün de bu düşünceyle devam ederek başka blog plaftormlarında gördüğüm yazı okunma süresi özelliği oldu. Uygulaması oldukça kolay, bloggerda yazıların okunma süresini göstermeye yarayan bir kod parçasını paylaşmak istedim. Yazı bilgi alanlarına eklenerek kullanılabilecek bu kod parçası temelinde yazı uzunluğuna göre ortalama olarak yazının ne kadar sürede okunabileceğini gösteriyor.
Blogger yazı okunma süresi nasıl gösterilir
Fırsat buldukça blogger ile ilgili ipucu, eklenti ve geliştirmeler hakkında paylaşımlar yapmaya devam ediyorum. Fakat bunu yaparken önceliğim daha çok henüz keşfedilmemiş, paylaşılmamış olan konular. Bugün de bu düşünceyle devam ederek başka blog plaftormlarında gördüğüm yazı okunma süresi özelliği oldu. Uygulaması oldukça kolay, bloggerda yazıların okunma süresini göstermeye yarayan bir kod parçasını paylaşmak istedim. Yazı bilgi alanlarına eklenerek kullanılabilecek bu kod parçası temelinde yazı uzunluğuna göre ortalama olarak yazının ne kadar sürede okunabileceğini gösteriyor.
Blogger yazı okunma süresi özelliği için gerekli javascript kodları
(<body></body> etiketleri arasında bir yere eklenebilir)<script type='text/javascript'>Sonucun, sürenin gösterileceği alan (yazı bilgilerinin yer aldığı alana eklenebilir)
//<![CDATA[
$(document).ready(function() {
var txt = $('.entry-content')[0].textContent,
wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
var readingTimeInMinutes = Math.floor(wordCount / 250) + 1;
var readingTimeAsString = readingTimeInMinutes + " dakika";
$('.reading-time').html(readingTimeAsString);
});
//]]>
</script>
<span class="reading-time"></span>Yukarıda görüldüğü gibi turuncu renkte belirtilmiş 2 alan var. Birincisi yani .entry-content yazı içeriğinin yer aldığı div'e ait class'ı belirtiyor. Bu class ya da id değişkenlik gösterebilir .post-body, .post-content, .entry-content gibi.(Tarayıcıların Öğeyi denetle özelliği kullanılarak kolayca bulunabilir.) İkinci belirgin alan .reading-time ise sürenin nerede, yani hangi elementte gösterilmesi gerektiğini belirtiyor.
25.03.2016
jQuery öğretici sitelerinde gezinirken bir div içerisinde bulunan yazıya ait kelime ve karakter sayısını (yazı uzunluğunu) göstermeye yarayan yazı bilgi alanlarında geliştirilerek kullanılabilecek aşağıdaki (yazının devamındaki) kodlara denk geldim.
*Şu an bloğumda yazı başlıklarının hemen altında bu kodun çalıştığını görebilirsiniz.
Blogger yazı uzunluğu nasıl gösterilir
jQuery öğretici sitelerinde gezinirken bir div içerisinde bulunan yazıya ait kelime ve karakter sayısını (yazı uzunluğunu) göstermeye yarayan yazı bilgi alanlarında geliştirilerek kullanılabilecek aşağıdaki (yazının devamındaki) kodlara denk geldim.
Blogger yazı uzunluğu özelliği için gerekli kodlar
</head> öncesine,<script>Kodun nerede çalışması, gözükmesi isteniyorsa oraya da aşağıdaki kod eklenecek. Sadece kelime sayısını göstermek için words, sadece karakter sayısını göstermek için chars id'lerine sahip span kullanılabilir.
$(function() {
var text = $('.post-excerpt').text(); // .post-excerpt yerine yazının bulunduğu div id - class ismi çoğunluk olarak .post-body olabilir
var charsLength = text.length;
var wordsCount = text.split(' ').length;
$('#words').html(' ' + wordsCount + ' kelime'); // kelime sayısını göstermek için
$('#chars').html(' ' + charsLength + ' karakter'); // karakter sayısını göstermek için
});
</script>
<span id="words"></span>
<span id="chars"></span>
*Şu an bloğumda yazı başlıklarının hemen altında bu kodun çalıştığını görebilirsiniz.
13.12.2015
Gün geçmiyor ki yeni bir blogger güncellemesi geliştirmesi yapılmasın. Blogger geliştiricileri tarafından son olarak hazırlanan bu son geliştirme yeni bir bileşen blogger söylemiyle gadget sayesinde istediğimiz yazıları öne çıkararak ziyaretçiler tarafından fark edilmesini sağlıyoruz. Geliştiriciler tarafından Türkçeye Öne Çıkan Yayın olarak çevrilerek isimlendirilmiş olan bu bileşene blogger öne çıkarılmış yazı eklentisi veya blogger featured post plugin olarak da isimlendirebiliriz.
Kullanımı ve ayarlaması oldukça kolay olan bu bileşende tam da olması gereken ayarlar mevcut kılınmış, özellikle istediğimiz etikete sahip istediğimiz yazıyı da belirlemenin bize bırakılmış olması da oldukça güzel düşünülmüş bir özellik.
Bileşeni Blogger Kumanda Paneli » Yerleşim » Gadget Ekle aracılığı ile ekleyebilir Sürükle + Bırak işlemiyle ister sidebarda ister yazılarınızın hemen üstünde kısacası bloğunuzda görünmesini istediğiniz yere ekleyebilirsiniz. Gadget ekleme işlemi yaparken istediğiniz yazıyı seçebilir ve yazıya ait görseli veya başlığı gösterme gizleme ayarını yapabilirsiniz.
Ayrıca bileşenin sadece anasayfada görünmesini istiyorsanız </head> kod öncesine alttaki kodu ekleyerek kullanabilirsiniz.
Blogger Öne Çıkarılmış Yazı Bileşeni
Kullanımı ve ayarlaması oldukça kolay olan bu bileşende tam da olması gereken ayarlar mevcut kılınmış, özellikle istediğimiz etikete sahip istediğimiz yazıyı da belirlemenin bize bırakılmış olması da oldukça güzel düşünülmüş bir özellik.
Bileşeni Blogger Kumanda Paneli » Yerleşim » Gadget Ekle aracılığı ile ekleyebilir Sürükle + Bırak işlemiyle ister sidebarda ister yazılarınızın hemen üstünde kısacası bloğunuzda görünmesini istediğiniz yere ekleyebilirsiniz. Gadget ekleme işlemi yaparken istediğiniz yazıyı seçebilir ve yazıya ait görseli veya başlığı gösterme gizleme ayarını yapabilirsiniz.
Ayrıca bileşenin sadece anasayfada görünmesini istiyorsanız </head> kod öncesine alttaki kodu ekleyerek kullanabilirsiniz.
<b:if cond='data:blog.pageType !="index"'>
<style>
#FeaturedPost1{display:none}
</style>
</b:if>
31.10.2015
Geçen yıl blogger'a uyarladığım temalardan biri olan Casper'ı sade, farklı ve sadece blog yazmaya odaklı kullanmak isteyenler için, çürüyüp gitmeden paylaşıyım istedim.
Temada ekstra çaba sardedilecek veya ayarlanması zor alanlar bulunmamakta. Yazıların altında bulunan hakkında kısmını ve diğer metinsel olarak değiştirilecek alanları arama yaparak bulabilir, düzenleyebilirsiniz.
Resimlerin demodaki gibi büyük gözükmesi için resimlere full-img class'ı eklemek gerekiyor. Ayrıca otomatik yazı kesme eklentisi bulunmamaktadır. Yazıları istediğiniz yerden kesmek için <!--more--> kodunu kullanabilirsiniz veya yazı editöründe bulunan Atma aralığı ekleme simgesi ile bu işlemi yapabilirsiniz. Entegre ettiğim ve edeceğim temalarda yapmacık gelmesinden dolayı otomatik kesme eklentisi kullanmamaya özen gösteriyorum.
Son olarak temada bulunan css ve js dosyalarını kendi hesabınızın bulunduğu bir depolama sitesine upload etmeyi unutmayın.
Demo Adresi - İndirme Adresi
Not : Bu temanın forumlarda veya bloglarda izinsiz olarak paylaşılması yasaktır.
Blogger Responsive Casper Teması
Geçen yıl blogger'a uyarladığım temalardan biri olan Casper'ı sade, farklı ve sadece blog yazmaya odaklı kullanmak isteyenler için, çürüyüp gitmeden paylaşıyım istedim.Temada ekstra çaba sardedilecek veya ayarlanması zor alanlar bulunmamakta. Yazıların altında bulunan hakkında kısmını ve diğer metinsel olarak değiştirilecek alanları arama yaparak bulabilir, düzenleyebilirsiniz.
Resimlerin demodaki gibi büyük gözükmesi için resimlere full-img class'ı eklemek gerekiyor. Ayrıca otomatik yazı kesme eklentisi bulunmamaktadır. Yazıları istediğiniz yerden kesmek için <!--more--> kodunu kullanabilirsiniz veya yazı editöründe bulunan Atma aralığı ekleme simgesi ile bu işlemi yapabilirsiniz. Entegre ettiğim ve edeceğim temalarda yapmacık gelmesinden dolayı otomatik kesme eklentisi kullanmamaya özen gösteriyorum.
Son olarak temada bulunan css ve js dosyalarını kendi hesabınızın bulunduğu bir depolama sitesine upload etmeyi unutmayın.
Demo Adresi - İndirme Adresi
Not : Bu temanın forumlarda veya bloglarda izinsiz olarak paylaşılması yasaktır.