Blogger Resimli Benzer yazılar eklentisi

● Blogger Resimli Benzer yazılar eklentisi.
● Bunlarda ilginizi çekebilir eklentisi.
● Reklamsız,tüm resim formatlarına uyumlu.

Bloğunuza eklediğiniz her yazının sonunda "bunlarda ilginizi çekebilir" başlığı altında diğer içeriklerinizin görüntülenmesini sağlayan Bu eklenti sayesinde yazınızı okuyan bir ziyaretçi yazının sonunda dikkatini çekebilecek diğer içerikleri de görüp onları tıklayacak.Dolayısıyla yazılarınız daha fazla okunacak.Benim de sitemde kullandığım çok önemli bir eklenti.
Şimdi "bunlarda ilginizi çekebilir" eklentisini bloğunuza nasıl ekliyeceğinizi anlatmaya başlayalım...

1.Adım
Kumanda Paneli → Şablon → HTML’yi Düzenleye tıklıyoruz. Ctrl + F tuşlarına aynı anda basarak, açılan arama formunda </head> kodunu buluyoruz.
Bulduğunuz bu kodun hemen üstüne gelecek şekilde aşağıdaki kodları ekliyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css"> 
#related-posts{text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{background:transparent;font-size:1.4em;font-weight:700;color:#000;font-family:Georgia,"margin-bottom:.75em;margin-top:0;padding-top:0;}
#related-posts a{color:#000;}
#related-posts a:hover{color:#000;background-color:#ddd;}
</style> 
<script src='http://meftun-mede.googlecode.com/svn/trunk/Benzer_yazilar.js' type='text/javascript'/>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Bunlarda ilginizi çekebilir&quot;;
</script>
</b:if>

2.Adım
<data:post.body/> kodunu buluyoruz.
Bulduğunuz bu kodun hemen altına gelecek şekilde aşağıdaki kodları ekliyoruz. Bu kod şablonlarda iki adet olabiliyor, sonuçlarda çıkan ilk kod, ve kaydediyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> 
<b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); 
</script> 
</div>
</b:if>

Kodlar içerisinde ;
relatedpoststitle="Bunlarda ilginizi çekebilir"
var maxresults=5
var defaultnoimage= Resmi olmayan konularınız için default image
Bölümlerini isteğinize göre değiştirebilirsiniz.
Not: Bu eklenti ana sayfa ve diğer sabit sayfalarda görünmez. Yani sadece açılan yazı sayfalarının altında görünür.Ama eklentinin Anasayfadaki tüm konuların devamını oku özelliğinin altında veya diğer sayfalarda da görünmesini isterseniz; Maviyle işaretlediğim yerleri silebilirsiniz.

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

Blogger Sekmeli İçerik Kutusu Eklentisi

Blogunuzun sidebarına ekleyeceğiniz bu eklenti ile tek bir gadgetlık alana birden fazla gadget sığdırabileceksiniz. Nasıl mı? Bu eklentide tab yani sekmeler bulunuyor. Her bir sekmeye farklı içerik ekeyebiliyorsunuz. İster resim, ister metin, ister video. Böylece hem kullanışlı hem de şık bir sidebar eklentisine sahip olabileceksiniz.

 

Eklenti resimde gördüğünüz şekldedir. Bu eklentiyi blogunuza eklemek için Blogger kumanda paneline girdikten sonra Yerleşim > Gadet Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları yapıştırmanız yeterli.

 

<!-- Blog Hocam Sekmeli İçerik Menüsü -->
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}

ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 4px ;
height: 31px;
line-height: 21px;
border: 1px solid #999999;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
width:50px;
}

ul.tabs li:hover {
background: #CCCCCC;
}

ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}

.tab_content {
padding: 10px;
font-size: 1.2em;
display: none;
}

#container {
width: 280px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>

<div id="container">
<ul class="tabs">
<li class="active" rel="tab1">Tab1</li>
<li rel="tab2">Tab2</li>
<li rel="tab3">Tab3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab2" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab3" class="tab_content">
<p>İçerik
</p>
</div>
</div>
</div>
<!-- Blog Hocam Sekmeli İçerik Menüsü -->

 

- Kodlarda mavi renkle gösterdiğim Tab1, Tab2, Tab3 yazan yerler sekmelerin başlıklarıdır. Örneğin 1. sekmenin içeriğine favori linklerinizi koyacaksanız Tab1 başlığını Linkler olarak değiştirebilirsiniz.

 

- Mor renkle gösterdiğim yerlere o sekmeye ait içeriğin HTML kodlarını yazabilirsiniz. Sekme içerisinde resim göstermek için oraya şöyle bir kod ekleyebilirsiniz:

 

<img src="https://resim.png" />

Takıldığınız bir yer olursa yorum bölümünden sorabilirsiniz.

Blogger’da Yazıları Sonsuz Kaydırma İle Yükleme

Bildiğiniz gibi Blogger’da sayfalar arası geçişler Önceki Kayıtlar – Daha Yeni Kayıtlar linkleri ile yapılıyor. Navigasyon dediğimiz bu klasik sayfa geçşini modifiye etmek için daha önce 2 seçenek sunmuştum.

 

1. Navigasyon Linklerini Resimle Değiştirmek

2. Numaralı Sayfa Navigasyonu

 

Bu yazıda son zamanlarda çok sık karşılaştığımız bir sayfa navigasyonu seçeneğini paylaşacağım. Infinite scrolling yani sonsuz kaydırma adı verilen bu yöntem şu şekilde çalışıyor:

 

 

Ana sayfada 7 kayıt gösterdiğinizi var sayalım. Normal şarlarda 7. kayıttan sonra bir resim veya link ile daha eski sayfaya geçi yapılması gerekir. Ancak bu eklentide 7. kayıttan sayfa aşağıya doğru kaymaya devam ediyor ve bir sonraki 7 kayıt yükleniyor. Bu döngü tüm yazılarınız gösterilinceye kadar devam ediyor.

 

Nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz.

 

 

Bu eklentiyi bizimle paylaşan Manki’ye teşekkür ettkiten sonra eklentiyi canlı test etmek isteyenleri kendisinin bloguna yönlendirmek istiyorum.

 

Eklentiye blogunuza eklemek çok kolay. Blogger kumanda paneline girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyin ve aşağıdaki kodları yapıştırın.

 

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/31219442542/bh-sonsuz-scroll.js' type='text/javascript'/></script>

 

İyi bloglar!

Blogger Avatarlı Son Yorumlar Eklentisi

3 değişik stil Blogger Avatarlı Son Yorumlar Eklentisi.
Recent Comment Widget With Avatar for Blogger.
Blogger Resimli Son Yorumlar Eklentisi (widget).
Blogspot Blogger Son Yorumlar Avatarlı Widget Eklentisi.

3 değişik stil resimli son Yorumlar eklentisi blogunuzun sidebar'ını renklendirecek güzel bir araç. Bu araç sayesinde blogunuzda yorum yapan kişiler avatarıyla birlikte yaptığı yorumun kısa özetini içeren bir kısım görebilecekler. Ziyaretcilerinizin ilgisini çekebilecek güzel bir eklenti.

Live Demo

1. Kumanda paneline giriş yapın.
2. Yerleşim → Gadget ekle → HTML/Javascript bulun.
3. Aşağıda Beğendiğiniz yorum kutusunun kodunu kopyalayıp yapıştırın.
4. Kod içinde;
numComments : Yorum sayısını ayarlayabilirsiniz.
avatarSize : Avatar boyutu.
defaultAvatar : Blogger standard avatarını değiştirebilirsiniz.
characters : Yorum karakter sayısı.
Kırmızı ile belirtdiğim yerede blogunuzun adresini yazın.

Style #1

<div id="wrapper">
<style type="text/css">
#wrapper{width:300px!important;}
.mef_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;border:2px solid transparent;background:none!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important;}
.mef_recent_comments li:hover{-webkit-transform:scale(1.2) translate(15px);box-shadow:0 0 20px 1px #aaa;}
ul.mef_recent_comments{list-style:none;margin:0;padding:0;}
.mef_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.mef_recent_comments li img{position:relative;overflow:hidden;display:block;padding:0;}
.mef_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4;font-family:georgia,arial;}
</style>
<script type="text/javascript">
//<![CDATA[
// Son Yorumlar Ayarları
var
numComments    = 5,
showAvatar     = true,
avatarSize     = 45,
roundAvatar    = true,
characters     = 40,
showMorelink   = false,
moreLinktext   = "More ?",
defaultAvatar  = "http://img1.blogblog.com/img/anon36.png",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
<script type="text/javascript" src="http://meftunmede.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
</script>
</div>

Style #2

<div id="wrapper">
<style type="text/css">
#wrapper{width:300px!important;}
.mef_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;background:none!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important;}
.mef_recent_comments li:hover{background:#C9FD7A!important;border-radius:100%;}
ul.mef_recent_comments{list-style:none;margin:0;padding:0;}
.mef_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.mef_recent_comments li img{position:relative;overflow:hidden;display:block;padding:0;}
.mef_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4;font-family:georgia,arial;}
</style>
<script type="text/javascript">
//<![CDATA[
// Son Yorumlar Ayarları
var
numComments    = 5,
showAvatar     = true,
avatarSize     = 45,
roundAvatar    = true,
characters     = 40,
showMorelink   = false,
moreLinktext   = "More ?",
defaultAvatar  = "http://img1.blogblog.com/img/anon36.png",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
<script type="text/javascript" src="http://meftunmede.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
</script>
</div>

Style #3

<div id="wrapper">
<style type="text/css">
#wrapper{width:300px!important;}
.mef_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;border:2px solid transparent;background:none!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important;}
.mef_recent_comments li:hover{border:2px Solid red;}
ul.mef_recent_comments{list-style:none;margin:0;padding:0;}
.mef_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.mef_recent_comments li img{position:relative;overflow:hidden;display:block;padding:0;}
.mef_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4;font-family:georgia,arial;}
</style>
<script type="text/javascript">
//<![CDATA[
// Son Yorumlar Ayarları
var
numComments    = 5,
showAvatar     = true,
avatarSize     = 45,
roundAvatar    = true,
characters     = 40,
showMorelink   = false,
moreLinktext   = "More ?",
defaultAvatar  = "http://img1.blogblog.com/img/anon36.png",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
<script type="text/javascript" src="http://meftunmede.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
</script>
</div>

Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

FeedBurner’ın İncelikleri

Daha önce sık sık bahsttiğim FeedBurner, blogunuzun beslemelerini herkesle paylaşmanızı sağlayan ücretsiz bir Google ürünüdür. Daha önce FeedBurner kurulumu ve yapılması gereken temel ayarları anlattığım bir yazı yayınlamıştım. Fakat FeedBurner özellikleri ve marifetleri o yazıda anlattıklarımla sınırlı değil elbette. Gelin FeedBurner hesabınıza ince ayar yapalım.

 

 

1. E-Posta Abonelerinizi Görün

 

Biliyorsunuz FeedBurner’ın en güzel özelliklerinden biri beslemeleri e-posta ile ulaştırablmesi. Peki hiç blogunuzu e-posta ile takip edenlerin kimler olduğunu merak ettiniz mi? FeedBurner’da e-posta abonelereinizi görmek mümkün.

 

 

Publicize > Email Subscriptions > Subscription Management > View Subscriber Details yolunu takip ettiğinizde blogunuza hangi e-posta adreslerinin kayıt olduğunu görebilirsiniz.

 

Burada e-posta adreslerinin yanında hangi tarihte abone oldukları ile Active veya Unverified şeklinde notlar yazar. Active yazanlara yazılarınız başarılı bir şekilde ulaşıyor. Unverified yazanlar ise e-posta adreslerine gelen onay linkine tıklamamış olanlar. Yazılarınız bu kişilere ulaşmaz.

 

Yazılarınızın gönderilmesini istemediğiniz e-posta adresleri varsa, o adresin yanındaki delete ikonuna tıklayarakk aboneliğini iptal edebilirsiniz.

 

 

2. Beslemelerinize Kişisel Mesaj Ekleyin

 

Dilerseniz beslemelerinizin başında abonelerinize kişisel mesajınızı gösterebilirsiniz. Bu mesaj bir duyuru, istek, hatırlatma veya reklam olabilir. İstediğiniz şeyi yazabilirsiniz.

 

 

Bu özelliği kullanmak için Optimize > Browser Friendly > Content Options bölümündeki ayarları şu şekilde yapın:

 

- Feed Content: List feed item titles and content

- Personal message: Enabled

 

Kutuya da göstermek istediğiniz mesajı yazın. Bu özelliği kullanmak için Browser Friendly servisinin aktif olması gerektiğini unutmayın.

 

 

3. Beslemelerinizi Otomatik Olarak İmleyin

 

Günümüzdeki SEO çalışmalarında sosyal imlemenin önemli bir yeri var. Google, popüler sosyal imleme sitelerinden gelen sinyallere çok önem veriyor.

 

FeedBurner, Link Splicer servisi sayesinde beslemelerinizi sizin yerinize en popüler sosyal imleme sitelerinden istediğinize ekliyor.

 

 

Bu özellikten faydalanmak için Optimize > Link Splicer  yolunu takip ettikten sonra listedeki sosyal imleme sitelerinden üyeliğiniz olan birini seçin ve alttaki kutuya o siteye girmek için kullandığınız kullanıcı adını yazın.

 

Benim tavsiyem del.icio.us veya Digg’i kullanmanız. Dünya çapında en popüler ve en itibarlı siteler bu ikisi. Seçiminizi yaptıktan sonra bu servisi aktifleştirmeyi unutmayın.

 

 

4. Beslemelerde Yazının Özetini Gösterme

 

Auto-Blogging diye bir şey duydunuz mu? İnsanlar bazı programları kullanarak diğer blogların beslemelerinden çektikleri yazıları kendi bloglarında otomatik olarak yayınlıyorlar. Ben de yazılarımın 7-8 blog tarafından bu şekilde kullanıldığını görünce beslemelerimi özet şeklinde göstermeye başladım.

 

 

Bu özelliği kullanmak için Optimize > Summary Burner yolunu takip ettikten sonra beslemelerde gösterilmsini istediğiniz maksimum karakter sayısını ve özetten sonra gözükmesini itediğiniz mesajı yazdıktan sonra servisi aktifleştirin.

 

Benim yazılarım genelde uzun olduğu için özette 1000 karakter gösteriyorum. Yazılarınızın uzunluğun göre farklı karakter sayıları belirleyebilirsiniz.

 

Teaser bölümüne yazının devamını okumak içinyazı başlığına tıklanması grektiğini yazmanızı öneririm.

 

 

5. Beslemelerinizin Gönderilme Saatini Belirleyin

 

Beslemelerinizi RSS okuyucusu ve tarayıcılar ile takip edenlere yeni yazılarınızanında gönderilir fakat e-posta aboneliğinde durum böyle değil. Günde 1 adet e-mail gönderileceği için gönderim saatini kendiniz belirlemelisiniz.

 

Gönderim saati için okuyucu kitlenizin en aktif olduğu saati veya yazılarınızı genellikle yazdığınız saati seçmeniz mantıklı olacaktır.

 

Takip edenler bilir benim yazı yayınlama saatlerim istisnalar dışında 11-13 arasıdır. Dolayısıyla e-mail gönderim saati olarak bu saat aralığını eçtim.

 

 

Bu özellikten yaralanmak için Publicize > Email Subscriptions > Delivery Options servisini açın ve TimeZone olarak GMT+02:00 seçeneğini seçerek maillerinizin gönderilmesini stediğiniz saat aralığını belirleyin.

 

 

6. Abone Sayacı Oluşturun

 

FeedBurner hesabınıza kaç kişinin abone olduğnu göstermek için kullanabileceğiniz Chicklet adı verilen FeedBurner sayaçları var. Bir örneğini benim e-posta abonelik kutumda göreblirsiniz.

 

 

Üstelik sayacı blogunuzun tasarımına uygun renklerde oluşturabliyorsunuz. Publicize > FeedCount servisini açtığınızda renk ayarlarınızı yaptıktan sonra oluşturulan HTML kodlarını blogunuza HTML > JavaScript olarak veya sayfadaki butonu kullanarak ekleyebilirsiniz.

 

 

FeedBurner’ın ince ayarları hakkında anlatacaklarım bu kadar. Bu özellikler sayesinde FeedBurner’ı tam anlamıyla kullanabileceksiniz.