Blogger de Avatarlı Son Yorumlar Eklentisi

Blog yazarları için bloglarına yapılan yorumlar çok önemlidir. Yapılan her yorum hem yazarın yazma şevkini artırır hem de ziyaretçisinin en çok hangi gönderiden yararlandığını gösterir. Bunun yanında blogunuzda görsel bir eklentiyle sidebarınızıda daha renkli bir hale getirebilirsiniz. 

Bu düşüncelerle google de küçük bir araştırma yaptım. Benim en çok beğendiğim çalışma http://meftunmede.blogspot.com/2013/05/blogger-avatarli-son-yorumlar-eklentisi.html adresindekiler oldu. Begendiğim stil üzerinde küçük bir düzenlemeyle kendi bloguma uygun hale getirdim. 

Önce kodlara bir göz atalım;

<div id="wrapper">
<style type="text/css">
#wrapper {
     width: 270px!important;   (width: 270px değeri yorumlar eklentisinin genişlik değeridir, genişlik ayarı buradan yapılmalı)
}
.mef_recent_comments li {
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.mef_recent_comments li:hover {
    background: #E0E4CC!important; (#E0E4CC bu kod fare ile üzerine geldiğiniz yorumun arka planında görünen renk kodudur, blogunuza uygun bir kod ile değiştirebilirsiniz)
    border-radius: 100%;
}
ul.mef_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mef_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.mef_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.mef_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.mef_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;    line-height: 1.4;
    font-family: arial;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments    = 5,
    showAvatar     = true,
    avatarSize     = 45, (avatarSize değeri yorumda görünecek avatarın boyutunu gösterir)
    roundAvatar    = true,
    characters     = 40, (Anasayfadaki yorumda görünecek karakter -harf- sayısını gösterir)
    showMorelink   = false,
    moreLinktext   = "More ?",
    defaultAvatar  = "http://img1.blogblog.com/img/anon36.png", (Bu adres anonim yorumcunun avatar resminin alındığı adresi gösterir. İstenirse değiştirilebilir)
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
<script type="text/javascript" src="(buraya kendi blog adresinizi yazmalısınız)/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5"> (5 değeri anasayfada gösterilecek yorum sayısı değeridir)
</script></div> 

Bu kodları kendinize göre düzenledikten sonra kırmızı ile bıraktığım notları silebilirsiniz. Daha sonra blogumuzun yönetim paneline giriyoruz.

Yerleşim  > Gadget ekle > HTML/Javascript e gelerek yukarıdaki düzenlediğimiz kodları yapıştırıp kaydediyoruz. 

Selametle kalın...