2 Ağustos 2010

Blogger'e Yorum Kabarcığı (Bubble) Eklenmesi

Blogger alt yapılı web sitemizde yayınladığımız yazıların sağ üst tarafında yazılara yapılan yorum sayısını gösteren ve kabarcık(bubble) sistemine tıklanıldığında yapılan yorumları görmemizi sağlayan bir sistemi blogger sitemize nasıl ekleyeceğimizi adım adım anlatacağım. Bu sistem sayesinde blogger sitemiz daha profesiyonel bir görünüme kavuşmuş olacaktır.
Nasıl Eklenir?
1 Adım: Blogger'e Giriş / Kumanda Paneli / Tasarım(Yerleşim) / HTML'yi Düzelt / Widget Şablonunu Genişlet bölümlerinden sonra CTRL+F(Arama) yardımıyla ;

]]></b:skin>
kodunu buluyoruz ve hemen üstüne(üst satırına);

/*------Commment Bubble Start------*/

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7b0b84HTbP6O7n6VyBeniAsEaeHJQIOsIZffHnlDeQJNdIy6iQB8Sx6iiXlxFWSDat3PIhQ85oPEeo6AZBPF5_C10R0j0NihPJZ8ZQ02jrMtf9EIJBui7qkGwAl4vaqKqjtmbN5R6Hq0/) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}

/*------Commment Bubble End Introblogger------*/

kodlarını ekliyoruz.
2. Adım: 

<h3 class='post-title entry-title'>
kodunu buluyoruz ve hemen bu kodun devamında;

<b:includable id='post' var='post'><div class='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<h2><a expr:href='data:post.link'><data:post.title/></a></h2>
<b:else/>
<b:if cond='data:post.url'>
<h2><a expr:href='data:post.url'><data:post.title/></a></h2>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
kodlarını görmüş olursunuz. Hemen bu kod bölümünün altına (alt satırında);

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
kodlarını ekliyoruz.
Temanızı önizlemeye alın eğer hata vermiyorsa kaydedin. İşlem bu kadar.
Not: 
Dilerseniz kabarcık koleksiyonun indirme linki veriyorum.İndirdikten sonra birini herhangi bir web siteye (örn: tinypic.com) yükleyip direkt linkini  koddaki kabarcık urlsiyle değiştirebilirsin
İndir: Kabarcık Koleksiyonu.zip (Comment Bubble.zip) /box.com
İgili görüşlerinizi belirtmek için yorum bölümünü kullanabilirsiniz.

1 yorum:

  1. teşekürler, çok güzel bir eklenti kendi blog siteme uyguladım ve başarılı oldu.

    YanıtlaSil

Ziyaretci içerik hakkında düşüncelerini bizimle paylaşmak ister misin?