26 Nis 2012

Blogger İçin Şık Yorum Baloncukları

Son zamanlarda Blogger'a yönelik pek fazla yeni şeylerden bahsedemedik. Artık bu konuya biraz daha ağırlık vermek istiyorum çünkü gün geçtikçe Blogger daha cazip bir sistem haline gelmeye başlıyor. Bizler de Google'ın sunduğu bu sayısız nimetlerden faydalanmış oluyoruz

Bugün sizlere Blogger için hazırlanmış şık yorum baloncuklarından bahsedicem. Bilindiği üzere Wordpress'te onlarca farklı stilde yorum baloncukları / kutuları kolaylıkla bulunabiliyor. Fakat bizdeki olay bugüne kadar hep Blogger'in bize biçtiği çerçevedeydi. Tarif edeceğim kodlar ile blogunuzda bambaşka bir tarzda yorum formuna sahip olabilirsiniz. Üstelik Reply yaparken ayrı bir pencerenin açılmasını beklemek yerine tıklandığında hemen altına gelen kutucuktan yorumunuzu gönderebiliyorsunuz.

Şık yorum formu için öncelikle HTML'yi düzenle bölümümüzden CTRL+F ile
]]></b:skin>
 kodunu buluyoruz ve hemen üzerine (öncesine) şu kodu ekliyoruz:
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4
gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQAiPd4YAyE4lOMzi2HVFopAhdyRxZfyyL7-2RgRL2hVnJYIMkSbgQJqS9xUduedn-_NKHGfWzp6Lvbiuw1iPXjwZrApZViYLOhDjBIWNTZ_4AS26vXVdhHWrZaQ39WE6drykA-OnDeJ0/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
Son olarak temamızı kaydediyoruz ve işlemimiz tamamdır!

Bitirmeden önce kodların en iyi, klasik Blogger temalarında işe yaradığını da söylemem gerekiyor. Şahsen ben kendi blogumda denedim fakat ortaya karman çorman bişeyler çıktı. Şimdilik pek uğraşamadım kodlarla. Muhtemelen geniş bir zamanda el atıp sizlerle paylaşırım. Eğer aramızdan özel temalar için de bunu başarabilen olursa da lütfen burada bizimle paylaşsın.

kod kaynağı: spiceupyourblog

3 yorum:

  1. Teşekkürler dostum.. Özel temaların çoğu sorunlu. Klasik temaya geçicem yakında zaten bunu bildiğim iyi oldu yer imlerime ekliyorum hemen :)

    YanıtlaSil
  2. Rica ederim. Çok kaliteli yapılan özel temalar mutlaka var ama mutlaka ince ayar yapmak gerekli.

    YanıtlaSil
  3. eyvallah hocam yalnız blogu çok ihmal ediyosun sölim.

    YanıtlaSil

Yorum Yaparken...
* "Her", "Şey" gibi kelimeler kesinlikle ayrı yazılır.
* "Mi" soru eki daima ayrı yazılır.
* "Dahi" anlamındaki "de" ayrı yazılır.
* "Dil isimlerine gelen ekler kesme işareti ile ayrılmaz:
Örn: "Türkçe'yi" değil "Türkçeyi"

Dikkat!
Türkçe kelimelerde q, w, x gibi harflerin KESİNLİKLE kullanılmaması, kullanıldığı taktirde yayınlanmayacağını belirtmek isterim.

Ayrıca blogumda Türkçe karakterlerin kullanılmasına da özen gösterdiğimi bilmenizi isterim. Türkçe klavye desteği bulunmayanlar için:
ç ğ ı ö ş ü â î û