Klasik Blog Yorum Balon Eklentisi

Blogger Blog, Yorumlar bölümünde yorum ve cevapları gösteren, sayısal balon eklentisini ekleyerek blogunuza şık bir görünüm verebilir...

...

Blogger Blog, Yorumlar bölümünde yorum ve cevapları gösteren, sayısal balon eklentisini
ekleyerek blogunuza şık bir görünüm verebilirsiniz. Blog şablonunuza balon görünümlü CSS kodlarını eklemek çok kolaydır. CSS Kodlarını eklemek için yapılacak işlemleri aşağıdan takip ederek blogunuza ekleyebilirsiniz.

1.Blogunuza giriş yapın
2.Şablon HTML düzenle tıklayın → Widget Şablonu Genişlet tıklayın
3.Açılan şablonda CTRL+F tıklayın, arama kutusu açılsın
4.Aşağıdaki kodu kopyalayın ve kutu içinde aratın

]]></b:skin>

6.Yukarıdaki kodu bulduktan sonra aşağıdaki verilen kodu kopyalayarak hemen üstüne yapıştırarak ş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;

1. 2. 3. 4. 5.

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

Yukarıdaki kodlarınızı özelleştirmek için aşağıdaki açıklamaları uygulayın
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.

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 ;