Web Günlüğü

Blogger yazı okunma süresi nasıl gösterilir

Blogger yazı okunma süresi
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'>
//<![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>
Sonucun, sürenin gösterileceği alan (yazı bilgilerinin yer aldığı alana eklenebilir)
<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.

Blogger yazı uzunluğu nasıl gösterilir

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>
$(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>
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.
<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.

Blogger Öne Çıkarılmış Yazı Bileşeni

Blogger öne çıkarılmış yazı eklentisi
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.

Blogger öne çıkan yayın bileşeni (gadgeti) veya blogger öne çıkarılmış yazı eklentisi (featured post plugin)

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.

Blogger öne çıkan yayın bileşeni (gadgeti) veya blogger öne çıkarılmış yazı eklentisi (featured post plugin)

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>

Blogger Responsive Casper Teması

Blogger 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.

Blogger İnstagram Eklentisi

Blogger Instagram Eklentisi
Instagram hesabımızdaki son paylaştığımız fotoğrafları bloğumuzun herhangi bir yerinde göstermek için farklı üçüncü parti araçları kullanmak zorunda kalıyoruz. Fakat işin içine gizlilik ve güvenlik girince bu araçlardan vazgeçmek kaçınılmaz oluyor. Bugün biraz araştırma yaparak Instagram Api sayesinde her ne kadar Access Token oluşturma aşamasında biraz uğraşmış olsam da kısa bir süre içerisinde instagram hesabımdaki son fotoğrafları çekmeyi başardım.

WordPress gibi içerik yönetim sistemlerinde kod kullanmadan eklenti vasıtasıyla diğer php alt yapılı sistemlerde ise php kodları ile instagram eklentisi yapılabiliyor. Ben ise blogger alt yapısından dolayı JavaScript & jQuery yardımıyla bir nevi bir blogger instagram eklentisi oluşturdum.Instagram Api sayesinde bir nevi blogger instagram eklentisi oluşturmuş oldum.

Şimdi bu eklentinin nasıl hazırlanacağını detaylı bir şekilde anlatmak istiyorum. Öncelikle eklentiyi oluşturabilmemiz için yeni bir client Türkçe'yle istemci oluşturmamız ve bu clienti oluşturduktan sonra eklentimizin çalışabilmesi için gerekli olan access token'i oluşturmamız gerekiyor.

instagram.com/developer adresine girip sağ üstte kullanıcı ismimizin solunda yer alan Manage Clients bağlantısına tıklıyoruz. Daha sonra karşımıza gelen yani instagram.com/developer/clients/manage/ sayfasında sağ üstte yer alan Register a New Client butonuna tıklıyoruz.

Blogger Instagram Eklentisi

Açılan bu sayfada Details sekmesinde client detaylarını girmemiz gerekiyor. Valid redirect URIs kısmı access tokeni alabilmemiz için gerekli olan bir bağlantı, resimde olduğu gibi yine kendi blog adresinizi yazabilirsiniz. Yine bu sayfada yer alan Security sekmesinde yer alan onay kutularını ikisini de işaretsiz duruma getirerek Register butonuna tıklayıp client oluşturma işlemini tamamlayabilirsiniz.

Blogger Instagram Eklentisi

Evet işte client bilgilerimiz geldi şimdi buradaki bilgilerimiz aracılığı ve bir url yardımıyla access token oluşturacağız. Bunun için gerekli olan url resimin altında yer alıyor. Bu bağlantıdaki kalın puntoyla belirttiğim bilgi alanlarını alttaki resimde yer alan client bilgilerini girdikten sonra tarayıcı adres satırına yapıştırıp enter tuşuna basıyoruz.

Blogger Instagram Eklentisi
https://instagram.com/oauth/authorize/?client_id=CLIENT_ID_NUMARASI&redirect_uri=REDİRECT URI_ADRESİ&response_type=token

Alttaki resimde görüldüğü gibi bir ekran karşımıza çıktıysa hatasız bir şekilde devam ediyoruz demektir ama henüz işimiz bitmedi. Authorize butonuna tıklayarak Access Token oluşturma işlemini bitiriyoruz.

Blogger Instagram Eklentisi

Vee bitti access token oluşturma işlemimiz tamamlandı. Adres çubuğunda kırmızı çerçeve içine aldığım alan bizim access tokenimizi oluşturuyor.

Blogger Instagram Eklentisi

Eğer temanızda/şablonunuzda jquery kütüphanesi yer almıyorsa aşağıdaki jquery kütüphanesini şablon düzenleyiciyi açıp </head> kod öncesine ekleyin.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi sadece geriye aşağıdaki kodu kendi access token bilginize göre düzenleyip ister şablon içine isterseniz yerleşim sayfasında HTML/JavaScript Gadgeti yardımıyla bloğunuza ekleyebilirsiniz.

Kodlar içierisinde siyahla belirginleştirdiğim URL alanı oluşturduğumuz access tokenimizi kullanacağımız yer. users'den sonra yer alan sayısal alan kullanıcı ID'mizi oluşturuyor daha önce oluşturduğumuz access tokenin ilk nokta öncesinde yer alan 9 basamaklı sayıyı giriyoruz. Yine aynı satırda yer alan access_token'den sonraki uzunca sayı ise access tokenimizin tamamını kapsıyor buraya da access tokenimizin tamamını ekliyoruz ve işlemimiz bitiriyoruz. Son olarak for kısmında yer alan siyah renkle görülen 6 sayısı kaç adet fotoğrafın görüntüleneceğini belirtiyor.
<div class="blogram"><ul></ul></div>
<script>
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/235007959/media/recent/?access_token=235007959.0501200.b466e461209a4de49b06587670d07f6d",
success: function(data) {
for (var i = 0; i < 6; i++) {
$(".blogram ul").append("<li><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></a></li>");
}
}
});
});
</script>

Css kodlarını kendinize göre değiştirebilir, geliştirebilirsiniz.
.blogram {width: 600px; margin: auto;}
.blogram h1{margin:0 auto; text-align:center}
ul li{list-style:none; float:left; margin:5px}
img{
border:5px solid #000;
height:150px; width:150px
}
img:hover{
border:5px solid #fc4f3f;
}

Eklentiyi bloggerinstagrameklentisi.blogspot.com adresinde canlı olarak görüntüleyebilirsiniz.

Not : Bu yazı birden fazlan yabancı kaynaktan yararlanılarak bizzat tarafımca yazılmıştır. Kopyalanması, alıntılanması kesinlikle yasaktır.