Değerli Blog Geliştiricim takipçileri, bugün sizlere AdGuard'da herhangi bir Web Sitesini Beyaz Listeye nasıl ekleyebiliriz ondan bahsedeceğim.

Sizlerde biliyorsunuz ki günümüzde kullanılan bir çok Web Siteleri veya Blog Sayfaları gelirlerini sayfada yayınlanan reklamlardan sağlamakta. Bu yüzden kullanıcıların kişisel bilgisayarlarında kullandıkları Reklam Engelleyici programlar tüketici için avantaj olsa da üretici için dezavantaja dönüşüyor. Bu yüzden severek ve yakından takip ettiğiniz bir Web Sitesi ve ya Blog Sayfasının devamlılığına sizlerde katkı sağlamak istiyorsanız reklam engelleyici programı olan AdGuard'da Beyaz Listeye eklemelisiniz.

AdGuard'da Beyaz Listeye Ekelme Nasıl Yapılır?

AdGuard Reklam Engelleyici uygulaması veya eklentisi kullanıyorsanız öncelikle yapmanız gereken AdGuard Ayarlarına giriş yapmanız. Bunun için AdGuard ikonuna ardından Ayarlar butonuna tıklayın.


Ayarlara girdikten sonra yapmanız gereken sol kısımda yer alan menülerden Beyaz Liste'yi seçerek eklemek istediğiniz Web Sitesi veya Blog Sayfasını başında "http//www" ya da "https//www" olmadan ekleyin. Eklediğiniz link otomatik olarak kaydedilecektir. Son olarak eklemiş olduğunuz sayfaya gittiğinizde AdGuard o sayfa için kapalı konuma geçmiş olacaktır.


AdGuard Beyaz Listeye Ekleme ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.

Bu yazımız bir önceki yazımızın devamı olup çok fazla kafa karışıklığına sebebiyet vermemek için ayrıca yazmayı tercih ettim. Böylece hem kafanız karışmayacak hem de istediğiniz eklentiyi ekleyip eklememek tercihinize kalacak.

Blog Yayınları İçin İzleme Sayacı Eklentisi ile ilgili makale paylaşacağım. Bu eklentinin amacı sayfanızda bulunan Metin, Yazı ve Makalelerin ziyaretçiler tarafından ne kadar okunduğu, tıklandığı ya da görüntülendiği  hakkında blog yöneticileri başta olmak üzere ziyaretçilere de bilgi vermesidir.

Blogger Yayınları İçin İzleme Sayacı Eklentisi Nasıl Çalışır?
Blog sayfanızda bulunan sabit sayfalar ve yayınların her birini tek tek görüntülenmelerini veya tıklanmalarını izleme sayacı ile takip edebileceksiniz. Blogger yayın izleme sayacı Google Firebase ile oluşturulan bir uygulamadır.

Blogger Yayınları İçin İzleme Sayacı Nasıl Eklenir?
Blogger hesabınıza giriş yapın ve bloğunuzun kontrol panelinden "Tema > HTML'yi Düzenle" alanına tıklayarak Kod Editörü sayfasını açın. Şimdi izleme sayacını eklemek için aşağıdaki adımları takip edin.

1. Adım - Blog sayfanızda yer alan Metin, Yazı veya Makalelere Tahmini Okuma Süresi ve Toplam Kelime Sayısı görüntülüme HTML Kodunu bloğunuzun <data:post.body/> kodunun bir satır üzerine ekleyin.

NOT: Blogunuzda <data:post.body/> kodu birden fazla bulunabilir, bu yüzden bu kodların üzerine tek tek ekleyerek deneme yanılma yöntemi ile doğru koda ulaşabilirsiniz.

HTML Kodu
<span><a expr:name='data:post.id'/>
    <span class='postviews'>
        <span class='eye'/> 
        <span id='postviews'/> Görüntüleme
    </span>
</span>

2. Adım - Aşağıda vermiş olduğum CSS Kodunu kontrol panelinden "Tema > HTML'yi Düzenle" kısmına girerek ]]></b:skin> tagını ya da </style> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz  ]]></b:skin> tagının ya da </style>  tagının bir satır üzerine ekleyin.

CSS Kodu
.postviews {
    float: right;
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 12px;
    color: gray;
    border-radius: 2px
}
.postviews .eye {
    top: 1px;
    display: inline-grid;
    opacity: .54;
    background: gray;
    margin: 0 3px 0 0;
    width: 13px;
    height: 13px;
    border: solid 1px #666;
    border-radius: 75% 15%;
    position: relative;
    transform: rotate(45deg)
}
.postviews .eye:before {
    background: #555;
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    border: solid 1px #fff;
    border-radius: 50%;
    left: 3px;
    top: 3px
}

3. Adım - Aşağıdaki Java Script Kodunu yine kontrol panelinden "Tema > HTML'yi Düzenle" kısmına girerek </body> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz </body> tagının bir satır üzerine ekleyin ve Şablonu Kaydet butona basın.

Java Script Kodu
<script src = 'https://cdn.firebase.com/v0/firebase.js' type = 'text/javascript'/>

<script> $.each($(&#39;a[name]&#39;), function (i, e) {
    var elem = $(e).parent().find(&#39;#postviews&#39;); 
    var blogStats = new Firebase(&quot;https://bloggereklentileri-b87be.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
    blogStats.once(&#39;value&#39;, function (snapshot) {
        var data = snapshot.val();
        var isnew = false;
        if (data == null) {
            data = {};
            data.value = 0;
            data.url = window.location.href;
            data.id = $(e).attr(&#39;name&#39;);
            isnew = true;
        }
        elem.text(data.value);
        data.value++;
        if (window.location.pathname != &#39;/&#39;) {
            if (isnew) blogStats.set(data);
            else blogStats.child(&#39;value&#39;).set(data.value);
        }
    });
}); 
< /script>

Şablon kaydedildikten sonra eklentiyi test etmek için Bloğunuzun herhangi bir sayfasını kontrol edebilirsiniz.

Blogger İçin Firebase Hesabınızı Oluşturun
https://firebase.google.com adresini ziyaret ederek bir tane Firebase hesabı oluşturun veya var olan Google hesabınız ile giriş yapın.

Sonrasında şu adımları izleyin.
  • Hesabınıza giriş yaptıktan sonra açılan sayfada "Get Started" butonuna tıklayın.
  • Ardından açılan ekrandan "Proje Oluştur"’u seçin.
  • Proje Adınızı girin ve Firebase Kullanım Şartlarını kabul edin ve "Devam" butonuna basın.
  • Google Analytics’i etkinleştirin ve  "Devam" butonuna basın.
  • Hesap Seçin alanına tıklayarak Google Analytics’i yapılandırmak için Google Hesabınızı seçin ve "Proje Oluştur" butonuna tıklayın.
  • Projenin hazırlanmasını bekleyin. Proje hazırlandıktan sonra "Devam" butonuna basın.
  • Sol kısımda "Geliştirme > Database" yolunu takip edin ve "Veritabanı Oluştur" butonuna basın.
  • Üretim modunda başlatma seçili olacak şekilde "Sonraki" butonuna tıklayın.
  • Son olarak "Bitti" butonuna basın.
Veritabanını kurduktan sonra Üst kısımda Cloud Firestore yazan yere tıklayın Realtime Database alanını seçin. Sonrasında Kurallara tıklayın. Kod aynasında aşağıdaki gibi bir kod görünecektir.

Örnek Kodlama
{
// Visit https://firebase.google.com/docs/database/security to learn more about security rules
    "rules": {
        ".read": false,
        ".write": false
    }
}

Yukarıdaki kodu aşağıdaki kod ile değiştirin ve Yayınla butonuna tıklayın.

Java Script Kodu
{
// These rules give anyone, even people who are not users of your app,
// read and write access to your database
    "rules": {
        ".read": true,
        ".write": true
    }
}

Sol menüde üst tarafta bulunan "Ayarlar > Proje Ayarlarına" tıklayın, orada oluşturmuş olduğunuz Proje Kimliğinizi göreceksiniz. Oluşturduğunuz Proje Kimliğini yukarıdaki Java Script kodu içerisinde mavi renk ile işaretlenmiş olan yere ekleyin. Böylece bloğunuzun izleme sayacı için kendi Proje Kimliğinizi oluşturmuş oldunuz.

Blog Yayın İzleme Sayacı İle İlgili Kısa Bilgiler
Blog yayın izleme sayacını bloğunuza eklediğinizde sayaç sıfırdan başlayacaktır, bunun bloğunuza herhangi zararı yoktur.

Kurulumu yaptıktan sonra Proje kimliği değişikliği veya yapacağınız diğer değişiklikler sayacı sıfırlayacaktır.

Blog Yayınları İçin İzleme Sayacı Eklentisi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.

Değerli takipçilerimiz bu yazımızda sizlere Web Sitelerinde ve Blog Sayfalarında bulunan Metin, Yazı veya Makalelerin Kelime Sayısını ve Tahmini Okuma süresini sayfanızda nasıl gösterebileceğiniz ile ilgili basit bir Java Script kod eklentisi ile anlatmaya çalışacağım.
Takipçilerinize, sayfanızda  yayınladığınız Metin, Yazı veya Makalelerde toplam kaç kelime olduğunu belirtilen, bu kelimelerin ne kadar sürede okunabileceğini tahmini olarak takipçileriniz ile paylaşabileceğiniz bilgisini vermiş olursunuz. Bu tarz eklentiler ile gösterilen bilgiler ziyaretçilerin ilgisini çekecektir.

Blog Yazıları Okuma Süresi ve Kelime Sayısı Gösterme Eklentisi Nasıl Kurulur?
Öncelikle Blogger hesabınıza giriş yaparak Blogger Kontrol Panelinden "Tema > HTML’yi Düzenle" kısmına giderek bloğunuzun Kod Editör panelini açın ve aşağıda yer alan adımları uygulayın. Kod Editör Panelindeki kodlara hızlı erişebilmek için CTRL + F Tuş kombinasyonunu kullanabilirsiniz.

1. Adım - Blog sayfanızda yer alan Metin, Yazı veya Makalelere Tahmini Okuma Süresi ve Toplam Kelime Sayısı görüntülüme HTML Kodunu bloğunuzun <data:post.body/> kodunun bir satır üzerine ekleyin.

NOT: Bloğunuzda <data:post.body/> kodu birden fazla bulunabilir. Kodu yanlış yere eklememek adına aşağıdaki Örnek Kodlama kısmını inceleyin.

HTML Kodu
<div class='content-reading-time'>
<span>
<p>
<small class='reading-time'>
<span class="eta"></span> (<span class="words"></span> Kelime)
</small>
</p>
</span>
</div>

Örnek Kodlama
<b:if cond='data:view.isSingleItem'>
.....
.....

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<div class='content-reading-time'>
<span>
<p>
<small class='reading-time'>
<span class="eta"></span> (<span class="words"></span> kelime)
</small>
</p>
</span>
</div>
<data:post.body/>
.....
.....

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</b:if>

2. Adım - Aşağıda vermiş olduğum CSS Kodunu kontrol panelinden "Tema > HTML'yi Düzenle" kımsına girerek ]]></b:skin> tagını ya da </style> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz  ]]></b:skin> tagının ya da </style>  tagının bir satır üzerine ekleyin.

CSS Kodu
.content-reading-time {
padding: 0 0 20px 0;
margin: 0 0 20px 0;
}
.reading-time {
background: #adb3b9;
color: #fff;
text-transform: capitalize;
padding: 0 8px;
float: left;
font-size: 12px;
border-radius: 2px;
}

3. Adım - Aşağıdaki Java Script Kodunu yine kontrol panelinden Tema > HTML'yi Düzenle1 kımsına girerek </body> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz </body> tagının bir satır üzerine ekleyin ve Şablonu Kaydet Butonuna basın.

Java Script Kodu
<script type = 'text/javascript'>
//<![CDATA[
// Reading Time
;(function ($) {
var totalReadingTimeSeconds;
$.fn.readingTime = function (options) {
var defaults = {
readingTimeTarget: '.eta',
readingTimeAsNumber: false,
wordCountTarget: null,
wordsPerMinute: 270,
round: true,
lang: 'tr',
lessThanAMinuteString: '',
prependTimeString: '',
prependWordString: '',
remotePath: null,
remoteTarget: null,
success: function () {},
error: function () {}
},
plugin = this,
el = $(this);
plugin.settings = $.extend({}, defaults, options);
var s = plugin.settings;
if (!this.length) {
s.error.call(this);
return this;
}
if (s.lang == 'it') {
var lessThanAMinute = s.lessThanAMinuteString || "Meno di un minuto";
var minShortForm = 'min';
} else if (s.lang == 'fr') {
var lessThanAMinute = s.lessThanAMinuteString || "Moins d'une minute";
var minShortForm = 'min';
} else if (s.lang == 'de') {
var lessThanAMinute = s.lessThanAMinuteString || "Weniger als eine Minute";
var minShortForm = 'min';
} else if (s.lang == 'es') {
var lessThanAMinute = s.lessThanAMinuteString || "Menos de un minuto";
var minShortForm = 'min';
} else if (s.lang == 'nl') {
var lessThanAMinute = s.lessThanAMinuteString || "Minder dan een minuut";
var minShortForm = 'min';
} else if (s.lang == 'sk') {
var lessThanAMinute = s.lessThanAMinuteString || "Menej než minútu";
var minShortForm = 'min';
} else if (s.lang == 'cz') {
var lessThanAMinute = s.lessThanAMinuteString || "Méně než minutu";
var minShortForm = 'min';
} else if (s.lang == 'hu') {
var lessThanAMinute = s.lessThanAMinuteString || "Kevesebb mint egy perc";
var minShortForm = 'perc';
} else if (s.lang == 'ru') {
var lessThanAMinute = s.lessThanAMinuteString || "Меньше минуты";
var minShortForm = 'мин';
} else if (s.lang == 'ar') {
var lessThanAMinute = s.lessThanAMinuteString || "أقل من دقيقة";
var minShortForm = 'دقيقة';
} else if (s.lang == 'da') {
var lessThanAMinute = s.lessThanAMinuteString || "Mindre end et minut";
var minShortForm = 'min';
} else if (s.lang == 'is') {
var lessThanAMinute = s.lessThanAMinuteString || "Minna en eina mínútu";
var minShortForm = 'min';
} else if (s.lang == 'no') {
var lessThanAMinute = s.lessThanAMinuteString || "Mindre enn ett minutt";
var minShortForm = 'min';
} else if (s.lang == 'pl') {
var lessThanAMinute = s.lessThanAMinuteString || "Mniej niż minutę";
var minShortForm = 'min';
} else if (s.lang == 'ru') {
var lessThanAMinute = s.lessThanAMinuteString || "Меньше минуты";
var minShortForm = 'мой';
} else if (s.lang == 'sv') {
var lessThanAMinute = s.lessThanAMinuteString || "Mindre än en minut";
var minShortForm = 'min';
} else if (s.lang == 'tr') {
var lessThanAMinute = s.lessThanAMinuteString || "Bir dakikadan az";
var minShortForm = 'dk';
} else {
var lessThanAMinute = s.lessThanAMinuteString || 'Less than a minute';
var minShortForm = 'min';
}
var setTime = function (text) {
if (text !== '') {
var totalWords = text.trim().split(/\s+/g).length;
var wordsPerSecond = s.wordsPerMinute / 60;
totalReadingTimeSeconds = totalWords / wordsPerSecond;
if (s.round === true) {
var readingTimeMinutes = Math.round(totalReadingTimeSeconds / 60);
} else {
var readingTimeMinutes = Math.floor(totalReadingTimeSeconds / 60);
}
var readingTimeSeconds = Math.round(totalReadingTimeSeconds - readingTimeMinutes * 60);
if (s.round === true) {
if (readingTimeMinutes > 0) {
$(s.readingTimeTarget).text(s.prependTimeString + readingTimeMinutes + ((!s.readingTimeAsNumber) ? ' ' + minShortForm : ''));
} else {
$(s.readingTimeTarget).text((!s.readingTimeAsNumber) ? s.prependTimeString + lessThanAMinute : readingTimeMinutes);
}
} else {
var readingTime = readingTimeMinutes + ':' + readingTimeSeconds;
$(s.readingTimeTarget).text(s.prependTimeString + readingTime);
}
if (s.wordCountTarget !== '' && s.wordCountTarget !== undefined) {
$(s.wordCountTarget).text(s.prependWordString + totalWords);
}
s.success.call(this);
} else {
s.error.call(this, 'The element is empty.');
}
};
el.each(function () {
if (s.remotePath != null && s.remoteTarget != null) {
$.get(s.remotePath, function (data) {
setTime($('<div>').html(data).find(s.remoteTarget).text());
});
} else {
setTime(el.text());
}
});
return totalReadingTimeSeconds;
}
})(jQuery);
//]]>
$(function () {
$('.post-body').each(function () {
$(this).readingTime({
readingTimeTarget: $(this).find('.eta'),
wordCountTarget: $(this).find('.words'),
remotePath: $(this).attr('data-file'),
remoteTarget: $(this).attr('data-target')
});
});
});
</script>

Detaylı Bilgiler ve Değiştirilebilir Seçenekler
1- ReadingTimeTarget: "id / class / element" - Tahmini okuma süresini depolama kimliğini, sınıfını veya öğesini tanımlayan dize (varsayılan: 'eta') olarak belirlenmiştir. Sayfanızda okuma süresinin görüntülenmesini istemiyorsanız, aşağıda belirtilen kodu kaldırmanız yeterli olacaktır.

ReadingTimeTarget
<span class="eta"></span>

2- WordCountTarget: "id / class / element" - Toplam kelime sayısını depolama kimliğini, sınıfını veya öğesini tanımlayan dize (varsayılan: ''). Kelime sayısının görüntülenmesini istemiyorsanız, aşağıda belirtilen kodu kaldırmanız yeterli olacaktır..

WordCountTarget
(<span class="words"></span> Kelime)

3- WordsPerMinute: Tahmini okuma süresini hesaplamak için dakikada bir kelime tanımlayan bir tam sayı (varsayılan: 270). Tahmini okuma süresini hesaplamak için, dakikada 270 kelime okunabileceğini göstermektedir. Aşağıdaki kodu Java Script kodu içerinde bularak değiştirebilirsiniz.

WordsPerMinute
wordsPerMinute:270

4- Lang: "en / fr / de / es / nl / sk / cz / ru" - Kullanılacak dili gösteren iki harfli bir dize (varsayılan:"tr"). Java Script kodunu birden fazla dilde kullanabilirsiniz. aşağıdaki kodu Java Script kodu içerisinde bularak belirtilen dil seçenekleri ile değiştirebilirsiniz.

Lang
lang:'tr'

Blog Yazılarının Kelime Sayısı ve Tahmini Okuma Süresi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.

Değerli takipçilerimiz bildiğiniz üzere Google, Blogger da büyük bir adım atarak Blogger'ı artık Mobil'e duyarı hale getirmeye başladı. Önümüzdeki aylarda Google, Blogger Kontrol Panelinde büyük değişiklikler yaprak Blogger'ı artık Mobil cihazlarda da kullanılmaya başlar hale getirecek.

Blogger yazılım mühendisleri Blogger Kontrol Panelinin daha ergonomik bir görünüme sahip olması için adım adım tasarlamaya devam ediyor.  Geçtiğimiz günlerde "Yorumlar, İstatistikler ve Tema" başlıkları altında yer alan sayfalar değişime uğradı.

Google, son günlerde değişimin en büyüğünü "Kayıtlar" başlığına yapmak için büyük çaba sarfediyor. Blogger da yazılarınızı artık "Güncelleme, Oluşturma ve Yayınlama" tarihlerine göre sıralayabilieceğiniz ve kayıtların ön izlemesini ızgara modunda görüntüleyebileceğiniz bir tasarım ile karşınıza gelmek için hazırlanıyor. Enteresan bir değişiklik de şurdan geliyor. Filtreleme özelliği. Evet yanlış duymadınız Filtreleme özlliği ile Kontrol Panelindeki yazılarınızı bir kaç farklı biçimde filtreleyebileceksiniz.

Bilgi geldikçe detaylar burada paylaşılacak. Bizi takip etmeye devam edin.

Yoğun istek üzerine ekibimizce aldığımız karar doğrultusunda orjinal temamızı siz değerli takipçilerimiz ve blog kullanıcıları ile paylaşıyoruz. Blog temamızın bir çok özelliğini geliştirerek daha da güçlü duruma getirdik. Blog Geliştiricim teması diğer blog temalarından çok farklıdır. Gerek kodlaması gerek eklentileri için kısa kodlaması ile blog ziyaretçilerini kendine hayran bırakıyor.

Orjinal Blog Geliştiricim Teması ve Özellikleri
1- Teknik Bilgiler : Tema üzerinde tüm kodlamaları tek tek inceleyerek yeniden oluşturduk. Özellikle sayfa navigasyonunu tüm cihazlara duyarlı hale getirdik. Ve bunun yanında daha çok üzerinde durduğumuz SEO çalışmasını başarılı bir şekilde blog temasına entegre ettik, Google'ın tam istediği sayfa özellikleri ve sayfa etiketleme özelliğini bloga uyguladık. Bu sayede blogun tüm sayfalarını ve sayfa içeriklerini çok rahat Google tarafından indexlemesini sağladık.
Tema eklentilerine ek olarak, özel iletişim ve özel arşiv eklentisi de temaya dahildir.
2- İçerik Özellikleri : Blog teması özellikle yayınların ön planda olmasını sağmak üzere tasarlandığından blog içeriklerini zengin gösterebilecek bir çok özelliğe sahip;
  • Yayınlarda kullanılmak üzere dinamik H etiketlerinin farklı görünmesi için özel kodlama yapıldı.
  • Özel olarak tasarlanmış olan butonlar ile yazıların ilgi çekmesini sağladık.
  • Zaten bu temada uygulanmaya başlayan Spoiler ile yine yayınlarınıza güç katacaksınız.
  • Kod paylaşımlarını 4 farklı kategoriye ayırmak üzere ve ziyaretçilerin daha iyi anlaması için, CSS, HTML, jOuery ve javaScript gibi kodları ayrı ayrı paylaşmak için özel kod tasarımı eklenmiştir.
  • Farklı bir paylaşım navigasyonu ile blogunuzun paylaşılır durumunu artırmayı ve kod fazlalığını azaltmak için, orjinal blogger teması paylaşım butonlarına özel tasarım ekleyerek blog temasına entegre ettik.
  • Fonksiyonel yorum sistemini geliştirekek temaya uygun hale getirdik ve kod kullanımını kolaylaştırmak için, kod dönüştürücü eklentisini entegre ettik.
3- Özellikleri ve Eklentileri; 

ÖZELLİKLERİ KULLANILABİLİRLİK
Mobil Uyumluluk Testi Var Kontrol
Google Mobil Uyumluluk Testi Var Kontrol
Google Yapısal Veri Test Aracı Var Kontrol
SEO Dostu Var
Dinamik Başlıklar Var
Adsense Uyumlu Var
Schema.org Var
Yüksek CTR Var
Blogger Eklentileri Orjinal Teması Var
2 Sütun Var
Otomatik Devamı Var
Duyarlı Reklam Alanı Var
Breadcrumbs Var
Oto. Etiket Duyarlı (Blogger) Slider Var
Rastgele İçerik Widget'i Var
Google Özel Arama Kutusu Var
Özel Sosyal Paylaşım Butonları Var
Özel Sitemap Widget'i Var
Özel İletişim Widget'i Var
Duyarlı Navigasyon Var
Başa Dön Butonu Var
Kısa Kodlama Var
Youtube Embed Var
Sınırsız Sayfa Numaralandırma Var
Son Yayınlar Widget'i Var
Özel Reklam Widget'i Var
Spoiler Var
Özel Butonlar Var
Özel SEO Uygulaması Var

Blog Geliştiricim temasının bütün özelliklerini görüntülemek için Ön İzleme butonuna tıklayabilir ya da Satın al butonuna tıklayarak temayı satın alabilirsiniz.
Temayı satın almak için "Satın Al" butonuna tıklayarak iletişim sayfasından bize yazabilirsiniz yada bloggelistiricim@gmail.com adresine mail atabilirsiniz.

Bu yazımın amacı Disqus’da ki yorumların yüklenme sorunlarını ortan kaldırma ile ilgili olmasının yanı sıra, sayfanın yüklenme sırasındaki hızını arttırabilmek için hangi teknikleri uygulayabileceğimizden bahsedeceğim.

Bunun için Disqus bize iki farklı seçenek sunmaktadır.
1.si bir butona tıklayarak Disqus yorumlarının yüklenmesini sağlamak.
2.si ise sayfayı aşağıya doğru kaydırarak Disqus yorumlarının yüklenmesini sağlamak.

Disqus vb gibi yorum yazabilmek adına tasarlanmış hazır platformlar son günlerde oldukça revaçtadır. Bu ve bunun gibi platformlar insanların hayatını kolaylaştırarak ve  kullanıcılara dezavantajın yanında büyük avantajlarda sağlamaktadır.

Bu avantajların bir kaçı;
  1. Disqus yorum yapmak için birçok özelliği bünyesinde barındırmaktadır.
  2. Disqus’da yapılan yorumları harici bir Veri Tabanın’da (Database) barındırmanız gerekmez.
  3. Disqus’da yorum denetleme sayesinde spam konusunda da endişe edeceğiz bir durum söz konusu değil.
Tembel  yükleme eklentileri kullanarak da Web sitenizin veya Blog Sayfanızın yükleme hızını etkilemeden Disqus Yorum Formunun yüklenmesini sağlayabilir, Disqus Veritabanının (Database) sorgulama sürecini minimalize edebilirsiniz. Ancak Disqus gibi hali hazırda kusursuz  bir yorum yazma platformu ile bunları yapmak oldukça kolay ve zahmetsizdir. Disqus Java Script ve API dosyası avantajlarından nasıl yararlanacağımızı öğreneceğiz.

Açıklamalar
Bu yöntemlerle, kullanıcı sitenizde bir sayfa veya yayına tıkladığında yorum bölümü yüklenmez. Bu, sitenizin biraz daha hızlı yükleneceği anlamına gelir.

Disqus Java Script Embed kodu, Yorum Formunu yüklemek için Web Sayfanızda ya da Blog Sayfanızda "#disqus_thread" kodunu arar. Disqus Java Script Embed Kodu sayesinde "#disqus_thread" bölümünü bulduğunda bölüm içerisindeki sayfaya ait bütün yorumlar yüklenir. Mantık olarak Disqus java Script Embed kodu yorumların varlığını kontrol etmektedir.

Siz değerli takipçilerim ile paylaşacağım bu kodlar, Disqus Java Script Embed dosyasını kullanıcıların istekleri doğrultusunda yükleneceğini belirtmek isterim.

1. Adım - Disqus’u bir butona tıklayarak yükleme
Disqus yorumlarını bir butona tıklama yardımı ile yüklemek istiyorsanız aşağıdaki paylaştığım kodu Web Sayfanıza veya Blog Sayfanıza eklemelisiniz. Bu kodu kullanmanın iki şartı Google API veya buna muadil olacak JQuery dosyası olması gerekmektedir. JQuery dosyası kullanmıyorsanız bir sonraki adıma bakabilirsiniz.

Disqus Komut Butonu HTML Kodu
<div id="disqus_thread"></div>
<a id="disqus_loader" onclick="load_disqus('bloggelistiricim')">
<h4><data:messages.postAComment/></h4>
</a>
</div>

Aşağıdaki Disqus Java Script Kodunu Web Sitenizin </body> tagının bir satır üzerine ekleyin.

Disqus Java Script Kodu
<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
var disqus_trigger = jQuery('#disqus_trigger'),
disqus_target = jQuery('#disqus_thread');
if (disqus_target && disqus_trigger) {
jQuery.ajaxSetup({
cache: true
});
jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
jQuery.ajaxSetup({
cache: false
});
disqus_trigger.remove();
console.log('Disqus loaded.');
}
}
//]]>
</script>

Aşağıda yer alan Java Script kodlarının özellikleri;
"disqus_load()" Tembel yükleme olarak aşağıda yazılı görevleri yerine getiren bir fonksiyondur.
  1. Web sitenizde kullandığınız Disqus kısa adınızı sorgular. 
  2. Disqus kısa adınızı kullanarak sitenize ait olan Disqus JS Embed dosyasını yükler.
  3. #disqus_loaded Disqus yorumlarını yüklemek için komut butonu işlevselliğini oluşturur.
2. Adım - Disqus'u JavaScript komut dosyası ile yükleme
Web Sitenizde veya Blog Sayfanızda jQuery kullanmıyorsanız, Disqus'u yüklemek için sade bir JavaScript komut dosyası ile de bu işlemleri gerçekleştirebilirsiniz.

Disqus Java Script Kodu
<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
var disqus_trigger = document.getElementById('disqus_trigger'),
disqus_target = document.getElementById('disqus_thread'),
disqus_embed = document.createElement('script'),
disqus_hook = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);
if (disqus_target && disqus_trigger) {
disqus_embed.type = 'text/javascript';
disqus_embed.async = true;
disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
disqus_hook.appendChild(disqus_embed);
disqus_trigger.remove();
console.log('Disqus loaded.');
}
}
//]]>
</script>

Kod içerisinde belirtilmiş olan yere "bloggelistiricim" Disqus kısa adınızı eklemeyi unutmayın.

4. Adım - Disqus'u Tembel-Yükleme ile sayfayı aşağı kaydırarak yükleme
Buradaki yöntem butona tıklayarak yüklemeden biraz daha farklı çalışmakta olup Kullanıcılar sayfanın alt kısmına inmeye başladıkça Disqus yorumları yüklenmeye başlayacak.

Aşağıdaki Java Script kodunun özellikleri:
  1. "#disqus_thread" yorum formunun yükleneceği alanı tanımlar.
  2. "#disqus_thread" içeriğindeki değişikliği saptamak için "#disqus_empty" kontrol eder. Bu, verilerin tekrar tekrar yüklenmesini önlemeye yardımcı olacaktır.
  3. Disqus JavaScript Embed dosyasını hazır hale getirir ve "#disqus_thread" bağlanmasını sağlar.
  4. Kullanıcının yorum bölümüne kadar sayfayı kaydırıp kaydırmadığını kontrol eder ve yorumları yükler.
Disqus Konum HTML Kodu
<div id="disqus_thread">
<div id="disqus_empty"/>
</div>

Aşağıdaki Disqus Java Script Kodunu Web Sitenizin </body> tagının bir satır üzerine ekleyin.

Disqus Java Script Kodu
<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
var is_disqus_empty = jQuery('disqus_empty'),
disqus_target = jQuery('disqus_thread'),
disqus_hook = (jQuery('head')[0] || jQuery('body')[0]);
if (disqus_target && is_disqus_empty) {
jQuery.ajaxSetup({
cache: true
});
jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
jQuery.ajaxSetup({
cache: false
});
is_disqus_empty.remove();
}
}
jQuery(document).scroll(function(e) {
var currentScroll = $(window).scrollTop;
var disqus_target = jQuery('#disqus_thread');
if (currentScroll > disqus_target.getBoundingClientRect().top - 150) {
load_disqus('bloggelistiricim');
console.log('Disqus loaded.');
}
}, false);
//]]>
</script>

Disqus jQuery versiyonu
Web sitenizde jQuery doyası kullanıyorsanız, yukarıda açıkladığımız gibi bu web siteniz için daha kullanışlı olabilir.

Disqus Java Script Kodu
<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
var is_disqus_empty = jQuery('disqus_empty'),
disqus_target = jQuery('disqus_thread'),
disqus_hook = (jQuery('head')[0] || jQuery('body')[0]);
if (disqus_target && is_disqus_empty) {
jQuery.ajaxSetup({
cache: true
});
jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
jQuery.ajaxSetup({
cache: false
});
is_disqus_empty.remove();
}
}
jQuery(document).scroll(function(e) {
var currentScroll = $(window).scrollTop;
var disqus_target = jQuery('#disqus_thread');
if (currentScroll > disqus_target.getBoundingClientRect().top - 150) {
load_disqus('bloggelistiricim');
console.log('Disqus loaded.');
}
}, false);
//]]>
</script>

NOTLAR : Disqus ile ilgili yukarıda paylamış olduğumuz bilgiler ve kodlar Blogger, Wordpress ve diğer tüm platformlar için geçerlidir.
  • Yukarıdaki kodlarda "bloggelistiricim" belirtilen yeri Disqus kısa adınız ile değiştirin.
  • Disqus kısa adınız, genellikle Disqus hesabınıza giriş yapmak için kullandığınız kullanıcı adınızdır.
  • "disqus_thread" kimliğine sahip bölüm, yorumların yukarıdaki iki yoldan herhangi birini kullanarak yüklendiği yerdir.
  • Web sitenizde jQuery kullanmıyorsanız, jQuery yöntemine kullanmaya gitmeyin. Çünkü sadece Disqus'ı yüklemek için jQuery kullanmak iyi bir fikir değil. Bunun yerine ham JavaScript komut dosyasını paylaştık.
Disqus'u Tıklama ve Kaydırma Yöntemi ile Yükleme ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.

Bu yazımızda Disqus Yorum Sayısı bağlantısının ana sayfa ve içerik sayfalarına nasıl ekleneceği ile ilgili sorularınıza cevap vermeye çalışacağız.

Blog ve Web sitelerinde kullanımı her geçen gün daha çok artan ve bu zaman içerisinde popülerliğini koruyan Disqus, kullanıcılarına hem güvenlik hem de kullanılabilirlik açısından önemli hizmetler sunmakta. Bu sebepten dolayı Disqus’u kullanmakta olan bizler Disqus’un bazı özelliklerinden de faydalanmak isteriz. Sizlerde Disqus’a Yorum Sayısı Bağlantısını eklemek isterseniz aşağıdaki adımları takip edebilirsiniz.

1. Adım - Disqus Yorum Sayısı Bağlantısı ekleme
Öncelikle Blog sitenize Giriş yapın. Daha sonra "Tema > HTML’yi Düzenle" kısmına giriş yaparak CRTL + F Tuş Kombinasyonları ile </body> tagını bulun. Aşağıdaki Disqus Yorum Sayısı JavaScript kodunu blog sitenizin </body> tagının bir satır üzerine ekleyin.

JavaScript kodu içerisinde işaretlenmiş olan "http://bloggelistiricim.disqus.com/count.js" yerine Disqus form kullanıcı adınızı ekleyin.

Java Script Kodu
<script id='dsq-count-scr' src='https://bloggelistiricim.disqus.com/count.js' async='true'/>

Aşağı kısımda sizlere vermiş olduğum Disqus Yorum Sayısı Bağlantısını göstermek için işinize yarayacak bağlantı kodunu sayfanızın neresinde görüntülemek istiyorsanız oradaki HTML kod aralığına ekleyin.

NOT: Her tema tasarımsal farklılıklar gösterdiği için kodu eklemeniz gereken yer hakkında kesin olarak bir kod aralığı vermemiz sizleri yanlış yönlendirmekten başka bir işe yaramaz.

HTML Kodu
<a class='disqus-comment-count' expr:href='data:post.url + &quot;#disqus_thread&quot;'/>

2. Adım - Blogger Yorum Sayısı yerine Disqus Yorum Sayısını gösterme
Aşağıda vermiş olduğum açılır pencere içerisindeki kod Blogger Yorum Sayısı gösterme kodudur. Bu kodu bulup yukarıda vermiş olduğum Disqus Yorum Sayısı Bağlantı HTML kodu ile değiştirmeniz yeterlidir.

Blogger Yorum Sayısı Kodu
<b:if cond='data:post.allowComments'>
<span class='comment-info'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>
<data:messages.postAComment/>
</b:if>
<b:if cond='data:post.numComments == 1'>
<data:post.commentLabelFull/>
</b:if>
<b:if cond='data:post.numComments &gt; 1'>
<data:post.numComments/>
<data:post.commentLabelFull/>
</b:if>
</a>
</span>
</b:if>

Bu kodu bulmak için "Tema > HTML’yi Düzenle" kısmına giriş yaparak CTRL + F Tuş kombinasyonu ile kodun herhangi bir yerini aratarak bulmanız mümkündür.

Örneğin; <b:if cond='data:post.allowComments'> 

NOT: Dikkatli olmanız gereken önemli bir husus da bulduğunuz kod tema içerisinde birkaç tane olabilir. O yüzden doğru kodu bulduğunuza emin olun ve değişiklik yapmadan önce temanızın yedeğini almayı unutmayın.

3. Adım - Disqus yorum sayısını gösterme bağlantısını Türkçe yapma
Yukarıdaki adımları doğru bir şekilde Blog sayfanıza ekledikten sonra bağlantıda görünen metin Türkçe değilse önce Disqus’a giriş yapın. Daha sonra "Admin > Setting > Community" alanına gelerek aşağıdaki resimde gösterilen alanları Türkçe olarak değiştirin.

NOT: Blog sayfanızı Türkçe dışında farklı bir dilde kullanıyorsanız o dilde yazmanız yeterlidir.


Bu yazımızda siz değerli takipçilerimize Disqus Yorum Sayısı Bağlantısını Web sitelerine ve Blog Sayfalarına nasıl eklendiğini ayrıca Eklediğimiz bu bağlantıyı nasıl Türkçe ve diğer dillere çevirebileceğinizi anlattık. Disqus’un bu özelliği sadece Blogger da değil Wordpress ve diğer platformlara da aynı şekilde ekleneceğini bilmenizi isteriz.

Disqus'a Yorum Sayısı Bağlantısı Ekleme ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.

Bu yazımızda siz değerli takipçilerimizin Disqus Yorum Formunu kurduktan sonra ayar yapmanız gereken birkaç bilgiden bahsedeceğiz. Bunun için ilk yapılması gereken ayar ise Topluluk Ayarlarını yapılandırmak.

1. Topluluk Ayarlarını Yapılandırma
Topluluk ayarlarında kullanıcıların yorum yazdıktan sonra yazılan yorumun denetlenmesi en önemli unsurlardan biridir.

Peki nedir yorum denetlemesi? 
Web Sitenizde veya Blog Sayfanızda paylaşmış olduğunuz herhangi bir konu, makale vs. gibi yazılara kullanıcılar tarafından tebrik, takdir, teşekkür veya eleştirel yorumların yanı sıra bazen argo (küfür, taciz, vb.) içeren yorumlarda eklenmesi mümkün olabiliyor. Bu tarz yorumların önüne geçebilmek ve engellenmesi sağlamak için yorum denetlemesi yapabilirsiniz. Yapmış olduğunuz bu denetleme sayesinde yapılan uygunsuz yorumlar formda görünmeden otomatik olarak silinir. Bu ayarı 3 veya 5 bayrak olarak ayarlamanızı öneririz, ancak bu takipçi kitlenize göre değişkenlik gösterebilir. Belirli bir süre sonra yorumları otomatik olarak da kapatabilirsiniz. Bu, yorumların öncelik düzeyini yönetmenize yardımcı olur ve ekibinizin daha yeni, daha aktif yorumları seçmesine öncelik verir. Ayrıca bir süre belirleyerek, onaylanmamış yorumları bu süre sonunda otomatik olarak da kaldırabilirsiniz.

Disqus Topluluk Ayarları yapılandırılması için aşağıdaki resmi inceleyebilirsiniz.


2. Denetim Ekibini Oluşturma
Disqus Yorum Denetimi için Moderatörler ekleyin. Unutmayın, iyi yönetilen bir Disqus Yorum Denetleme sistemi sayfanızda daha fazla ziyaretçinin yorum yapmasını sağlayacaktır.

Peki moderatörler neler yapabilir ?
  1. İncelenmek üzere işaretlenmiş yorumları onaylar.
  2. Yorum politikası ihlali yapan kullanıcıların yorumlarını siler.
  3. Yorum yaparken argo (küfür, taciz, vb.) içerik paylaşan kişi / kişileri engeller.
Disqus Moderatör Ayarları sayfasından sizde kendinize bir Moderatör ekleyin. Bunun için aşağıdaki resmi inceleyebilirsiniz.


Birden fazla siteyi yönetiyorsanız, Disqus panelinize yönetici ekleyin; böylece birileri ekibinizden ayrılırsa erişiminizi kaybetmezsiniz. Bunun için ortak bir ekip hesabı belirlemenizi önerilir.


Yeni yazılmış veya onay bekleyen yorumlar için denetleme e-posta bildirimlerini de açmanız size fayda sağlayacaktır. Bunun sebebi iste yapılan yorumlar anında tarafınıza bildirim olarak gelecek ve hiç vakit kaybetmeden yorumun durumuna bağlı olarak onay verecek ve ya reddedeceksiniz. Belirlemiş olduğunuz her Moderatörün kendi Disqus hesabı için Moderasyon ayarlarından bu bildirimleri etkinleştirmesi gerekmektedir.

Herhangi bir yorumu spam (istenmeyen) olarak işaretlemek, onaylamak veya silmek için anahtar kelime komutlarını kullanarak yorumları doğrudan e-postayla bile denetlenmeniz mümkün. E-posta bildirimlerini yanıtlamak sizi takip eden kullanıcının yorumuna cevap vermenizi sağlar. Yapılan yorumlara yanıt verirken denetleyicilerin adlarının yanında gözüken bir rozet mevcut, bu rozetler kullanıcılar kim tarafından yanıt verildiğini bilmelerine yardımcı olur. Bu rozeti Topluluk ayarlarından özelleştirmeniz de mümkün. Bir diğer konu ise takipçilerinizin sizi tanıyabilmesi için rozetinizi ve kısa bir açıklama ekleyerek profilinizi güncelleyin.

3. Yorum Politikası Oluşturma
Yorum Politikanız, sitenizde yorum yapma kuralları hakkında kullanıcıları bilgilendirir ve kullanıcıların davranışlarını etkileyebilirsiniz.


Disqus'ta, doğrudan yorum formu üzerinde görünen bir Yorum Politikası oluşturabilirsiniz. Bu, tüm kullanıcılara uyarı ve bilgilendirme kolaylığı sağlar.

5. Disqus Yorum Sisteminizi Tanıtın
Sitenize Disqus eklediniz ancak takipçilerinize bunu duyurmadınız! Bunun için bir tanıtım yazısı, kullanıcıların bir hesap oluşturma ya da ilk yorumları yayınlama konusunda yardımcı olacak basit bir eğitim sağlar.
Bu önemlidir, ziyaretçiler yeni bir sistemde yorum yapma ve cevap verme ile farklı özellikleri test etme imkanı bulurlar.

6. Yorumları Yanıtlayın
Son olarak, sitenizde yapılmış olan yorumlara katılın. Öncelikle yorumları yanıtlayarak kullanıcılar ile iletişim kurun. Soruları cevaplayabilir, ilk kez yorum yapanları memnuniyetle karşılayabilir ya da katkılarından dolayı birisine teşekkür edebilirsiniz.
Bu, değerli yorumların sayısını artırmak aynı zamanda kaliteli bir kullanıcı topluluğuna sahip olmanın basit bir yoludur ve kullanıcılara verilen cevaplar memnuniyetle karşılandığını bildirir.

Disqus'u Kurduktan Sonra Yapılması Gereken Ayarlar ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.