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&callback=mef_recent_comments&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&callback=mef_recent_comments&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&callback=mef_recent_comments&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...
