Blog Yorumlarına Balon Ekle

Blogger yorumlar kutusuna değişik Balonlar ekleyin.Blogger, Klasik ve Dinamik bloglarınızda yazılan yorumların, yorum sayfanızda numaralı...

...

Blogger yorumlar kutusuna değişik Balonlar ekleyin.Blogger, Klasik ve Dinamik bloglarınızda yazılan yorumların, yorum sayfanızda numaralı balon şekinde görünümünü sağlayabilirsiniz. Yorumlarınızda görülmesini istediğiniz şık balon CSS kodunu blogunuz yönetim sayfasından HTML düzenlemesi ile hemen uygulamaya geçirmek için aşağıdaki adımları izleyiniz.

1.Şablonlar Yedekle/Geri yükle ile yedeğinizi alın
2.Şablon HTML düzenle tıklayın
3.Devam tıklayın
4.Aşağıdaki kodu kopyalayın
5.Açılan şablonda CTRL+F ile aratın

]]></b:skin>

6.Yukarıdaki kodu bulduktan sonra aşağıdaki kodu kopyalayarak hemen üstüne yapıştırın.
ve şablonunuzu kaydedin

.comment-thread li:before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    font-size: 22px;
    color: #555555;
    padding-left: 10px;
    padding-top: 3px;
    background: url(https://lh5.googleusercontent.com/-TNumi1YHwYo/UJApVtHGsMI/AAAAAAAALBI/Mtnodgr9Kj8/s128/9.konu%C5%9Fma%20balonu.png) no-repeat;
    margin-top: 7px;
    margin-left: 10px;
    width: 50px;
 /*image-width size*/
    height: 48px;
 /*image-height size*/
}
 
.comment-thread ol ol {
    counter-reset: contrebasse;
}
 
.comment-thread li li:before {
    content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
    counter-increment: contrebasse;
    float: right;
    font-size: 18px;
    color: #666666;

Yukarıdaki kodlarınızı özelleştirmek isterseniz ;
Numara açıklamaları :
1.Sayı olarak görülen metnin sol (sayı) boyutunu düzenleyin
2.Üstte gördünüz balon içindeki metinin konum boyutunu
3.Balon görünüm şeklini farklı bir balon resim linkinide “URL” kullanarak değiştirebilirsiniz.Resim için picasa kullanabilirsiniz.
4.Kenar konumunu değiştirebilirsiniz
5.Kenar değeri zevkinize göre px yükseltip, düşürebilirsiniz.

1. padding left: 10px
2. padding top: 3px
3. background:url(https://lh3.googleusercontent.com/oOYzlA1HucKs9Rkai8t6
4. VrDFvttl5nfOHCpQjDBZB3JD51U2yFtK52y9Qc4C1h2wzvhi-thbbrOh_ZSCyCwzYVijJOGyme6KPfhFE5I1fBl6R5Jucm9w)norepeat;
5. margin top: 7px
6. margin left: 10px

Aşağıdaki örneklerde beğendiğiniz resmin üzerinde sağ tıklayın Resmin URL'sini kopyalayın.Denemek için tarayıcıda açın.İlgili alana yapıştırarak kullanın.

Yukarıda verilen resim linkini değiştirmek için hazırladığım Yorum Balonlarından birini seçerek URL linkini alıp, kod içindeki resim linki ile değiştirerek kullanabilirsiniz.
Yorum balon resimlerini buradan inceleyin. Picasa da hazırladığım resimler web ortamında yayınlanmış olup, istediğinizi kullanabilirsiniz. Anlatılan konuyu beğendiyseniz aşağıda bir yorum bırakın.

Balon resim örnekleri ;