Blogger'da Son Yorumlar Widget'ı Ekleme

Bu kod, blogunuzdaki son yorumları okurlarınıza gösterir. Son yorumları sitenizin herhangi bir bölümünde sayfalar/ ana sayfa/ sidebar vb. gibi yerlerde kullanabilirsiniz. Yorumları sayfanızın tasarımına uygun hale getirebilir, profil fotoğraflarının kalitesini artırabilir ve yorum metinlerini istediğiniz düzende gösterebilirsiniz.

Aşağıdaki kod bloğu, CSS ve JavaScript etiketlerini tek bir pakette sunar. Bu kod, belirlediğiniz kurallara göre sayfanızda görüntüler.

Tam Kod:

<style type="text/css">
ul.last-comments {
list-style: none;
margin: 0;
padding: 0;
}
.last-comments li {
display: block;
clear: both;
border-bottom: 1px solid #e1e8ed;
overflow: hidden;
list-style: none;
word-break: break-word;
padding: 10px 4px;
border-radius: 5px;
margin-bottom: 10px;
}
.last-comments li .avatarImage {
float: left;
margin-right: 10px;
position: relative;
overflow: hidden;
}
.last-comments li img {
position: relative;
overflow: hidden;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.last-comments li a {
font-weight: 700;
font-size: 14px;
color: #1da1f2;
}
.last-comments li span {
color: #222;
display: block;
margin-top: 5px;
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.last-comments li:last-child {
border-bottom: 0;
background: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Son Yorumlar by İsmail Şevik
function lastComments(a){var e;e='<ul class="last-comments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s1600/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s1600/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("https:")?"https:"+n.replace("/s512-c/","/s1600/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://2.bp.blogspot.com/-am-sD4fOJlE/WNDl-8W4OlI/AAAAAAAAKOg/0NSMZEynkI0Z96P3ccf_vmazph9h62uRgCLcB/s1600/avatar.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="…",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=35,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="https://2.bp.blogspot.com/-am-sD4fOJlE/WNDl-8W4OlI/AAAAAAAAKOg/0NSMZEynkI0Z96P3ccf_vmazph9h62uRgCLcB/s1600/avatar.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://2.bp.blogspot.com/-am-sD4fOJlE/WNDl-8W4OlI/AAAAAAAAKOg/0NSMZEynkI0Z96P3ccf_vmazph9h62uRgCLcB/s1600/avatar.png",moreLinktext=moreLinktext||" More »",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=lastComments&amp;max-results=10" type="text/javascript"></script><ul class="last-comments"><li><div class="avatarImage avatarRound"></div></li></ul>

Alttaki kod yorumun tamamını gösterir. Kelime ve cümlelerde bir kesinti olmaz.

Yorumun tamamını göster.
<style type="text/css">
ul.last-comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.last-comments li {
    display: flex; 
    align-items: flex-start;
    border-bottom: 1px solid #e1e8ed;
    overflow: hidden;
    list-style: none;
    word-break: break-word;
    padding: 10px 4px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.last-comments li .avatarImage {
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; 
}
.last-comments li img {
    position: relative;
    overflow: hidden;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.comment-content {
    display: flex; 
    flex-direction: column;
    flex-grow: 1; 
}
.comment-content a {
    font-weight: 700;
    font-size: 14px;
    color: #1da1f2;
    text-decoration: none;
    margin-bottom: 2px;
}
.comment-content span {
    color: #222;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.last-comments li:last-child {
    border-bottom: 0;
    background: none;
}
</style>

<script type="text/javascript">
//<![CDATA[
// Son Yorumlar by İsmail Şevik 
function lastComments(a){var e;e='<ul class="last-comments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s1600/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s1600/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("https:")?"https:"+n.replace("/s512-c/","/s1600/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://2.bp.blogspot.com/-am-sD4fOJlE/WNDl-8W4OlI/AAAAAAAAKOg/0NSMZEynkI0Z96P3ccf_vmazph9h62uRgCLcB/s1600/avatar.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<div class="comment-content">';var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="…",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+='<a href="'+r+'">'+o+"</a>",e+="<span>"+v+"</span>",e+="</div>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=40,roundAvatar=!0,characters=999999,showMorelink=!1,defaultAvatar="https://2.bp.blogspot.com/-am-sD4fOJlE/WNDl-8W4OlI/AAAAAAAAKOg/0NSMZEynkI0Z96P3ccf_vmazph9h62uRgCLcB/s1600/avatar.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://2.bp.blogspot.com/-am-sD4fOJlE/WNDl-8W4OlI/AAAAAAAAKOg/0NSMZEynkI0Z96P3ccf_vmazph9h62uRgCLcB/s1600/avatar.png",moreLinktext=moreLinktext||" More »",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=lastComments&amp;max-results=10" type="text/javascript"></script><ul class="last-comments"><li><div class="avatarImage avatarRound"></div></li></ul>

Kodu Kopyalayın: Blogger'a Ekleme

  1. Blogger paneline gidin.
  2. DüzenHTML/JavaScript Ekle seçeneğine tıklayın.
  3. Açılan pencereye yukarıdaki kodun tamamını yapıştırın.
  4. Kaydedin.

Kodun başlangıç kısmındaki değişkenleri değiştirerek görünümü kolayca kişiselleştirebilirsiniz: Bu adımları tamamladıktan sonra blogunuzda, özelleştirilmiş ve canlı bir yorum listesi görünecektir.

Yorum yaz