Yazı Bilgisini Kenar Çubuğunda (Sidebar) Gösterme

Yazdığınız yazılara okuyucu tıkladığı zaman sidebar kısmında o yazı ile ilgili genel bilgi verebilirsiniz.



Resimden de anlaşılacağı gibi nerde olduğu , yorum sayısı, etiketler ve yazılış tarihi blogunuzun kenar çubuğunun (sidebar) üst kısmında yer alıyor. Burada yapılmış örnek çalışmaya bakabilirsiniz. İsterseniz renklerle oynabilir veya farklı bir bölüme yerleştirebilirsiniz.


Kenar çubuğuna yerleştirmek için;

1. Yerleşim--->Html Düzenle
2. ctrl+f ile ]]></b:skin> kodunu bulup hemen üst satırına alttaki css kodun yerleştiriyoruz.

.meta {
background: red;
font-family: 'Century Gothic', sans-serif;
padding: 5px;
margin: 10px 0 0;
}
.meta .title {background: blue; color: white; padding: 3px;}
.meta .comments {background: green; color: white; padding: 3px;}
.meta .comments a {color: white; text-decoration: underline;}
.meta .labels {background: orange; color: black; padding: 3px;}
.meta .labels a {color: white;}
.meta .date {background: purple; color: white; padding: 3px;}


2. ctrl+f ile <b:section class='sidebar' id='sidebar' preferred='yes'> kodunu bulup alttaki kodu hemen alt satırına yapıştırıyoruz.( preferred='yes' kısmı preferred='no' şeklinde ise bunu yes olarak değiştirin.)


<b:widget id='Blog99' locked='false' title='Blog Meta' type='Blog'>

<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>

<b:includable id='post' var='post'>
<div class='meta'>
<div class='title'>Buradasınız: "<data:post.title/>".</div>
<div class='comments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>
</a>
</div>
<div class='labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</div>
<div class='date'>
Yazılış Tarihi: <data:post.dateHeader/>.
</div>
</div>
</b:includable>

</b:widget>


İşlem tamam :))