Çok yazarlı bloglar için yazar bilgi kutusu

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. Ziyaretçilerinizin ilgisini çekebilecek güzel bir eklenti.



3 değişik stil: Blogger Avatarlı Son Yorumlar Eklentisi.



ÖNİZLEME



1. Blogger 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.


Özelleştirme

Kod içinde;
numComments : Yorum sayısını ayarlayabilirsiniz.
avatarSize : Avatar yani kullanıcı resim 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  = "https://img1.blogblog.com/img/anon36.png",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="https://meftunmede.github.io/javascripts/Blogger_Avatarli_Son_Yorumlar.js"></script>
<script type="text/javascript" src="https://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  = "https://img1.blogblog.com/img/anon36.png",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="https://meftunmede.github.io/javascripts/Blogger_Avatarli_Son_Yorumlar.js"></script>
<script type="text/javascript" src="https://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  = "https://img1.blogblog.com/img/anon36.png",
hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="https://meftunmede.github.io/javascripts/Blogger_Avatarli_Son_Yorumlar.js"></script>
<script type="text/javascript" src="https://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...

17 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. Teşekkür ederim.Zahmet çekmişsin

    YanıtlaSil
  2. Teşekkür ederim, bloguma göre düzenleyerek kullandım.

    YanıtlaSil
  3. kardeş 5 yorumdan fazlasına izin vermiyor. Yardımcı olurmusun, selametle

    YanıtlaSil
  4. numComments = 5,
    <script type="text/javascript" src="http://meftunmede.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
    5 olan bölümleri 6 yapın, olacaktır.Kolay gelsin.

    YanıtlaSil
  5. Elinize sağlık çok güzel bir paylaşım olmuş

    YanıtlaSil
  6. çok güzel paylaşım üçüncü stildeki kırmızı çerçeve rengini mavi yapabilirmiyiz

    YanıtlaSil
  7. Mustafa bey, red bölümünü blue yapın.
    .mef_recent_comments li:hover {
    border: 2px Solid red;
    }

    YanıtlaSil
  8. hallettim teşekkürler

    YanıtlaSil
  9. Teşekkürler admin eline sağlık çok güzel olmuş.Style1 'i tavsiye ederim.

    YanıtlaSil
  10. Saol hocam Style1 kurdum gerçekten harika

    YanıtlaSil
  11. Merhaba meftun hocam , ben size şunu soracaktım ; yorumların altında gözüken yanıtla seçeneğine tıklayınca benim blogta yeni bir pop-up açılır penceresi çıkıyor. Sizde ise hemen yanıtlamak istediğimiz yorumun altında gözüküyor. Nasıl düzeltebilirim bunu ? Şimdiden teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Blogger cevapla, yanıtla butonunuz için şablonunuzdan böyle ayarlanmış. Şablonunuzu görmeden şurayı silin düzelir demem imkansız. cm_reply bölümüne onclick= script'i eklenmiş gibi görünüyo. Ve blogger ayarlarınızda Yayınlar ve yorumlar "Kelime doğrulamasını göster" bölümü evet olarak işaretli sanırım. isterseniz bana burdan Şablonunuzu yedekleyip gönderin. Ben çözer geri gönderirim size.

      Sil
  12. Blogumda denedim çok teşekkürler.

    YanıtlaSil
  13. merhaba hocam şuan bu kod çalışmıyor. js kodunun düzenlemesi lazım yapabilir misiniz.

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale