Hızlı ve blog yüklenmesini yormayan bir son yorumlar eklentisi için aşağıdaki adımları uygulayarak hızlıca son yorumları ziyaretçilerinize gösterebilirsiniz.
DEMO
CSS Kodları (İster temanızın css kodları arasına ekleyin isterseniz aşağıdaki adımlarda gadgete hazır olarakta ekleyebilirsiniz):
.recent-card-content {
font-size: 14px;
display: -ms-flexbox;
display: flex
}
.recent-data{line-height: 1.4}
.recent-image {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s
}
.recent-card-content:hover .recent-image {
-webkit-transform: translateY(-.25em);
transform: translateY(-.25em)
}
.recent-card-content {
padding: 1.5em;
margin-bottom: .5em;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0,21,64,.14), 0 2px 20px rgba(0,21,64,.05);
}
.recent-image {
margin-right: 1em;
}
.recent-image img {
width: 45px;
border-radius: 50%;
box-shadow: 0 2px 3px rgba(0,21,64,.2), 0 2px 5px rgba(0,21,64,.05);
}
.recent-snippet {
color: #37474F;
}
.recent-title {
font-size: 1em;
margin-bottom: .25em;
}
.recent-title a {
color: #263238;
margin-right: .5em;
font-weight: 500;
}
.recent-date {
color: #B0BEC5;
margin-bottom: .5em;
font-size: .9em;
}
HTML/JavaScript gadgeti oluşturun ve içerisine ekleyin:
<style>.recent-card-content{font-size:14px;display:-ms-flexbox;display:flex}.recent-data{line-height:1.4}.recent-image{-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transform:translateY(0);transform:translateY(0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.recent-card-content:hover .recent-image{-webkit-transform:translateY(-.25em);transform:translateY(-.25em)}.recent-card-content{padding:1.5em;margin-bottom:.5em;border-radius:5px;box-shadow:0 2px 6px rgba(0,21,64,.14),0 2px 20px rgba(0,21,64,.05)}.recent-image{margin-right:1em}.recent-image img{width:45px;border-radius:50%;box-shadow:0 2px 3px rgba(0,21,64,.2),0 2px 5px rgba(0,21,64,.05)}.recent-snippet{color:#37474F}.recent-title{font-size:1em;margin-bottom:.25em}.recent-title a{color:#263238;margin-right:.5em;font-weight:500}.recent-date{color:#B0BEC5;margin-bottom:.5em;font-size:.9em}</style>
<div /* Yorum sayısı */ data-cnumber='6'
/* Yorum uzunluğu */ data-csnippet='50'
/* Varsayılan avatar */ data-cphoto='https://www.ilkaygurler.com/i/anon-default.png' id='recent-comment'></div>
<script src="//www.ilkaygurler.com/script/recent-comments.js"></script>
