12 Aralık 2014 Cuma

Süslü Blogger Yorum Sayacı ve Kutusu Eklemek

5 yorumlar
Merhaba arkadaşlar. Bu yazımda ingilizce bir web-sitede gördüğüm ve türkçeye çevirdiğim bir eklentiden bahsedeceğim. Bu eklenti sayesinde hem yorum sayacınız olacak hemde yorum kutularınız çok daha şık görünecek. Bu şık görünmenin bir çok avantajı olacak tabi :) Ziyaretçi sayılarınızda ki artış olabilir mesela...
Sizi fazla merakta bırakmadan öncelikle eklentinin görünümünü paylaşmak istiyorum. Kendi web sitemde de ekleyecektim fakat temaya uyumlu olmadığı için kaldırdım. Diğer web-sitemde demosunu görebilirsiniz.

Eklentinin Görünümü

Süslü Blogger Yorum Sayacı ve Kutusu Eklemek
1.Adım: Web-sitenizin yönetim paneline girin.
2.Adım: Şablona tıklayınız.
3.Adım: Özelleştir butonuna tıklayınız.
4.Adım: Sol üst taraftaki butonlardan "Gelişmiş" butonuna tıklayınız.
5.Adım: Css ekle butonuna tıklayıp aşağıdaki kodları yapıştırıp kaydediniz.





/* Fancy Blogger Threaded Comments by MBT starts */              
.comment-thread ol {
                counter-reset: mbt-comments;
}
            .comment-thread li:before {
            content: "\25C4"counter(mbt-comments) "\25BA";
            counter-increment: mbt-comments;
            font-size: 16px;
            position: relative;
            top: 100px;
            font-weight: bold;
            font-family: arial, georgia;
            color: rgb(199, 199, 199);
            left: -110px;
            padding: 4px 8px;
}
            .comment-thread ol ol {
            counter-reset: mbt-comments-sub;
              padding-top: 20px!important;
              margin-bottom: 25px;
}
            .comment-thread li li:before {
            content: counter(mbt-comments) "." counter(mbt-comments-sub);
            counter-increment: mbt-comments-sub;
            font-size: 14px;
            position: relative;
            top: 100px;
                left: -80px;
}
               
          .comments .comments-content .comment-thread ol ol {
                padding: 0px 10px 40px 40px;
                border: 1px solid #ddd;
                box-shadow: 3px 4px 9px rgb(218, 218, 218);
                margin-top: 10px;
                  }
                .comments .comments-content .comment-thread ol ol li {
                    margin-bottom: -40px;
}
               
                  .comments {
                    clear: both;
                    margin-top: 10px;
                    margin-bottom: 0px;
                    line-height: 1em; border:0px !important;
                  }
                  .comments .comments-content {
                    font-size: 12px;
                    margin-bottom: 16px;
                    font-family: Verdana;
                    font-weight: normal;
                    text-align:left;
                    line-height: 1.4em;
                    width:88%; margin-left:70px;
                  }
                    .comment-form {
                    max-width: 100%;
                    clear: both;
}
               
                  .comments .comments-content .comment-thread ol li {
                    margin-top: -30px;
}
               
               
                  .comments .comment .comment-actions a {
               
                    cursor: pointer;
                    color: rgb(46, 46, 46);
                    padding: 2px 3px 2px 30px;
                    Position: RElative;
                    -moz-border-radius: 6px;
                    -webkit-border-radius: 6px;
                    border-radius: 6px;
                    font-family: 'Open Sans Condensed', sans-serif;
                    font-size: 12px;
                    font-weight: 700;
                    margin-right: 15px;
                    background: url(http://3.bp.blogspot.com/-IRuG_QnOUaM/UakmzAR_JRI/AAAAAAAAJxA/cfgolzZifRE/s1600/reply.png) no-repeat 9px 0px;
                    float:right;
                  }
               
               
             
               
                  .comments .comment .comment-actions a:hover {
                    text-decoration: underline;
                 
                  }
                  .comments .comments-content .comment-thread ol {
                    list-style-type: none;
                    padding: 0;
                    text-align: none;
                  }
               
                  .comments .comments-content .comment-thread ol li {
                  border-bottom: 0px dashed rgb(196, 196, 196);
                    margin-bottom:25px
                  }
               
                  .comments .comments-content .inline-thread {
                    padding: 0.5em 1em;
                  }
                  .comments .comments-content .comment-thread {
                    margin: 8px 0px;
                  }
                  .comments .comments-content .comment-thread:empty {
                    display: none;
                  }
                  .comments .comments-content .comment-replies {
                    margin-top: 1em;
                    margin-left: 40px;
                    font-size:12px;
                 
                  }
                  .comments .comments-content .comment {
                    margin-bottom:16px;
                    padding-bottom:8px;
                  }
                  .comments .comments-content .comment:first-child {
                    padding-top:16px;
                  }
                  .comments .comments-content .comment:last-child {
                    border:0px;
                    padding-bottom:0;
                  }
                  .comments .comments-content .comment-body {
                    position:relative;
                  }
                  .comments .comments-content .user {
                 
                    font-weight: 700;
                     font-size: 14px;
                    font-family: 'Open Sans Condensed', sans-serif;
                    color: #333!important;
                  }
             
               
                  .comments .comments-content .icon.blog-author{
                    position: absolute;
                    top: 52px;
                    right: -36px;
                    margin: 5px 0px 0px 0px !important;
                    background: url("http://4.bp.blogspot.com/-9PqmPwn5OTc/UakmGeTAJ1I/AAAAAAAAJw4/fv8iqn6sVOo/s320/aDMIN.png") no-repeat scroll 0% 0% transparent;
                    width: 90px !important;
                    height: 90px !important; }
               
               
                  .comments .comments-content .datetime, .comments .comments-content .datetime a {
                    margin:0px;
                    display: block;
                    line-height: 30px!important;
                    font: italic 11px georgia;
                    width:180px;
                  }
               
                  .comments .comments-content .datetime a {
                    text-decoration:none;
                  }
                  .comments .comments-content .comment-header
                  {
                    margin:0 0 15px 10px;
                  }
               
                  .comments .comments-content .comment-content {
                    margin: 0 0 10px -50px;
                    }
               
                  .comment-header a {
                    color:#333;
                  }
               
                  .comment-header a:hover {
                    color:#666;
                  }
               
               
                  .comments .comments-content .comment-content {
                    text-align:justify;
                    text-align: justify;
                    font-family: 'Open Sans Condensed', sans-serif;
                    font-size: 13px;
                    border: 1px solid #ddd;
                    padding: 20px;
                  }
                  .comments .comments-content .owner-actions {
                    position:absolute;
                    right:0;
                    top:0;
                  }
                  .comments .comments-replybox {
                    border: none;
                    height: 250px;
                    width: 100%;
                  }
                  .comments .comment-replybox-single {
                    margin-top: 5px;
                    margin-left: 48px;
                  }
                  .comments .comment-replybox-thread {
                    margin-top: 5px;
                  }
                  .comments .comments-content .loadmore a {
                    display: block;
                    padding: 10px 16px;
                    text-align: center;
                  }
                  .comments .thread-toggle {
                    cursor: pointer;
                    display: inline-block;
                  }
                  .comments .continue {
                    cursor: pointer;
                  }
                  .comments .continue a {
                    display: none;
                    padding: 0.5em;
                    font-weight: bold;
                  }
                  .comments .comments-content .loadmore {
                    cursor: pointer;
                    max-height: 3em;
                    margin-top: 3em;
                  }
                  .comments .comments-content .loadmore.loaded {
                    max-height: 0px;
                    opacity: 0;
                    overflow: hidden;
                  }
                  .comments .thread-chrome.thread-collapsed {
                    display: none;
                  }
                  .comments .thread-toggle {
                    display: inline-block;
                  }
                  .comments .thread-toggle .thread-arrow {
                    display: inline-block;
                    height: 6px;
                    width: 7px;
                    overflow: visible;
                    margin: 0.3em;
                    padding-right: 4px;
                  }
                  .comments .thread-expanded .thread-arrow {
                    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
                  }
                  .comments .thread-collapsed .thread-arrow {
                    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
                  }
                  .comments .avatar-image-container {
                    float: left;
                    width: 36px;
                    max-height: 36px;
                    margin-top: 15px;
                    overflow: hidden;
                  }
                  .comments .avatar-image-container img {
                    width: 36px;
                     box-shadow: 2px 2px 0px rgba(0,0,0,0.13)
                  }
                  .comments .comment-block {
                    margin-left: 48px;
                    position: relative;
                  }
               
                  .comments .comments-content .comment-replies {
                        margin-top: 3em;
                        margin-left: 40px;
                        font-size: 12px;
                            }
               
                  .comments .comments-content .comment-replies a {
                    color: #333;
                        }
/* For Animating Comment Header*/
.trigger {
margin-top: 3px;
font-weight: bold;
color: #A1A1A1;
cursor: pointer;
float: right;
font-size: 12px;
margin-right: 10px;
}
.triggeractive {
color:rgb(255, 5, 5);
}
.toggle_container {
overflow: hidden;
clear: both;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin-top: 10px;
}

                 
                 
                  /* Responsive styles. */
                  @media screen and (max-device-width: 480px) {
                    .comments .comments-content .comment-replies {
                      margin-left: 0;
                    }
                  }
/* Fancy Blogger Threaded Comments by MBT  ENDS*/


#comments h4{
color: #4E555A;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif!important;
line-height: 1.6em !important;
font-weight: bold;
margin: 20px 0 50px 0px;
padding: 5px 0 5px 55px;
background: url(http://1.bp.blogspot.com/-tZR7Njp97jo/UalQRiCT3UI/AAAAAAAAJxg/ba4PGdYsHj4/s1600/mbt-postcomment.png) no-repeat 5px 10px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.13);
border: 2px dashed #DDD;
border-radius: 4px;
}




6.Adım: Yukarıdaki kodları css bölümüne ekleyip kaydettikten sonra blogger site yönetim panelimize geri dönüyoruz.
7.Adım: Şablona tıklıyoruz.
8.Adım: HTML'yi düzenle diyoruz ve aşağıdaki kodu aratıyoruz.

<b:includable id='comments' var='post'>

9.Adım: Tıkladıktan sonra açılan pencereyi görüntüleyelim.
10.Adım: Aşağıdaki kodları yukarıdaki resimdeki kodlarla yer değiştiriyoruz.




<h4>
                   <b:if cond='data:post.numComments == 1'>
                     1
                     <data:commentLabel/>
                     :
                     <b:else/>
                     <data:post.numComments/>
                     <data:commentLabelPlural/>
                     :
                   </b:if>

</h4>

11.Adım: Ctrl + F ile aşağıdaki kodu aratıyoruz

<b:includable id='threaded_comments' var='post'>

12.Adım: Yukarıdaki kırmızı alan içerisindeki kodu tamamen silip yerine aşağıdaki kodu ekliyoruz.

<h4>
                   <b:if cond='data:post.numComments == 1'>
                     1
                     <data:commentLabel/>
                     :
                     <b:else/>
                     <data:post.numComments/>
                     <data:commentLabelPlural/>
                     :
                   </b:if>

</h4>

13.Adım:Aşağıdaki kodları </h4> kodundan önce ekleyip kaydediyoruz.
<a href='#comment-form'>Sevgiler Gönderin!</a> <span class='trigger'>Yorum Politikasını Oku &#9660;</span>
<div class='toggle_container'>
<div class='block'>
<font style='color:rgb(255, 0, 0); font-weight:bold;'>LÜTFEN AKLINIZDA BULUNDURUN:</font>

  <br/>
<b><u>Spam yorumlara karşı sıfır toleransımız vardır.</u></b>  Yapılmış olan <b>argo, küfür</b> gibi yorumlar incelendikten sonra silinecektir.
</div>
</div>

İşte o mükemmel sonucu bir kez daha görüntüleyelim. Ayrıca arkadaşlar bu yazıyı yazabilmek için 8 saatimden daha fazlasını verdim. Lütfen yorumlarınızı yazınız. Bir teşekkürde olsa yeter.
Süslü Blogger Yorum Sayacı ve Kutusu Eklemek

5 yorum :

  1. Teşekkürler :) Çok güzel bir eklenti. Ellerinize sağlık

    YanıtlaSil
  2. Şimdiden teşekkürler. Denemeden sonucu kendi bloğumda göremem. Biraz zahmetli ama sonuç güzel olacaktır. Ayrıca size katılıyorum. Bir yazı yazmak, bir eser oluşturmak çok uzun vaktimizi alıyor hele de yazımız özgünse. Bunun karşılığında tek beklentimiz bir yorum, bir teşekkür. Bu da bizim ödülümüz çünkü. Bu yüzden elinize emeğinize sağlık, yazınız için de teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Değerli yorumunuz için ben teşekkür ediyorum :) :)

      Sil