DavutErarslan 10 von 109Oy 5 Kritik
Merhabalar, bir kaç gün önce artık blog için sık sık blogger ile ilgili paylaşımların olacağını söylemişim. Bugün blogger yazı altında konu ile ilgili bilgiler eklemeyi ve bu eklediğimiz bilgileri istediğiniz gibi değiştirmeyi anlatacağım. Yani size "Alın şu kodu şu kodu ekleyin tamamdır." demeyeceğim. Eklediğimiz kodların neye yaradığını anlatacağım.


Öncelikle bu yazıda ekleyebileceğiniz yazı bilgileri içerisinde neler var onu yazalım. Eklediğiniz özellikler yazar bilgisi, etiket bilgisi, yorum sayısı bilgisi, yazıyı paylaş ve devamını oku bağlantısı. Bu ekleyecekleriniz ve CSS ile katacağınız görsellik ile blogunuz bir ayrı görünecek.

Bu yazı oldukça uzun bir yazı. İsterseniz yazıda yer alan eklenti bilgilerini hiç öğrenmeden direk özet bölümüne geçebilirsiniz. TIKLA ÖZETE GİT !


İlk önce ekleyeceğimiz CSS kodlarına ve bu kodlarda ne neyi ifade ediyor ona bakalım. Bu css kodlarını ]]></b:skin> kodunun hemen üstüne ekleyeceksiniz. Haberiniz olsun :)
span.kategoribilgi1 {
float:left;
width:130px;
background:url(http://2.bp.blogspot.com/-epWODhXQ4cg/TgB64G7nXmI/AAAAAAAABvM/bhm5hcE_R_c/s1600/Folder-websites-Folder-icon.png) left center no-repeat;
height:26px;
line-height:26px;
display:inline;
overflow:hidden;
margin:0 0 0 20px;
padding:0 0 0 28px;
}

span.paylas1 {
float:left;
width:130px;
background:url(http://4.bp.blogspot.com/-pa4Aqx6jn8M/TgB79t_DdRI/AAAAAAAABvU/9-4_6pzLzM4/s1600/up-icon.png) left center no-repeat;
height:26px;
line-height:26px;
display:inline;
margin:0 0 0 20px;
padding:0 0 0 28px;
overflow:hidden;
}

span.tarihbilgi1 {
float:left;
background:url(http://4.bp.blogspot.com/-J9UbGqklJn8/TgB6ICvFI6I/AAAAAAAABu8/FyHxy00fkV8/s1600/Calendar-icon.png) left center no-repeat;
width:130px;
height:26px;
line-height:26px;
display:inline;
margin:0 0 0 20px;
padding:0 0 0 28px;overflow:hidden;
}

span.yorumbilgi1 {
float:left;
width:130px;
height:26px;
background:url(http://1.bp.blogspot.com/-FmgUyheVXh4/TgB6YDWGk8I/AAAAAAAABvE/j_k_WQBBXjI/s1600/Chat-icon.png) left center no-repeat;
line-height:26px;
display:inline;
margin:0 0 0 20px;
padding:0 0 0 28px;
}

.yazialtbilgi1 {
float:left;
width:580px;
height:55px;
background:url(http://4.bp.blogspot.com/-d3KA1l4rOnI/TgC20-Xm1HI/AAAAAAAABwY/_BApfOSmhiU/s1600/bilgiarkaplan.png) left center no-repeat;
color:#b2b2b2;
font-size:13px;
font-family:"Calibri", Arial, Helvetica, sans-serif;
font-style:italic;
margin:0 0 0;
}
.yazibilgisol {
float:left;
width:362px;
}
.yazibilgisag {
float:right;
width:210px;
position:relative;
}
a.devamet {
display:block;
float:right;
width:140px;
height:37px;
background:url(
http://1.bp.blogspot.com/-k8xgPAyY228/TgCE0yHXpFI/AAAAAAAABvc/MMn6Jydbiic/s1600/devam.gif) left top no-repeat;
text-indent:-9999px;
margin:9px 10px 0 0;
}


Bu kodların kısaca açıklaması şu şekilde:

span.kategoribilgi1 : etiketler için belirlediğimiz alanda istediğimiz özelliklerin oluşmasını sağladık. float:left; kodunu ekleyerek etiketlerin sola yaslanmasını sağladık. Bu sayede diğer eklediğimiz kodlar ile yanyana ve alt alta düzgün biçimde duracak. width:130px; özelliğini vererek genişliğini height:26px; ile yüksekliğini belirttik. background:url(...) kodu ile arkaplanı belirttik. Yanında yer alan logo background ile belirlendi. line-height:26px; ile satırlar arası boşluğu belirledik. vs. vs. vs.

span.paylas1 : Yazıyı paylaş butonunun alanını bu eklediğimiz css kodları ile düzenledik. Yukarıdaki span.kategoribilgi etiketiyle aynı. İkisinde de aynı kodlar var. Sadece backgroundlarındaki logo farklı.

span.tarihbilgi1 : Tarihi görüntülediğimiz alanı bu CSS kodu ile düzenledik. Yukarıdaki kodlardakiler ile aynı.

span.yorumbilgi1 : Yorum sayısının bulunduğu alanı bu CSS kodu ile düzenledik.

.yazialtbilgi1 Bu kod ile yorum,yazar, devamını oku, paylas ve tarih bilgilerinin bulunacağı alanı düzenledik. Arkaplanı, renk kodunu, genişliği, yüksekliği, yazı özelliklerini belirledik. Genişliği davuterarslan.com'daki yazı alanının genişliğine göre ayarladık. İsterseniz siz kendi temanıza göre ayarlayın ve genişliği düşürün. Ancak genişliği düşürünce görüntü bozulabilir. Bu yüzden span.tarihbilgi1 gibi 4 kodlada oynamanız ve genişliği azaltmanız gerekecek.

color:#b2b2b2; // Renk kodunu istediğiniz şekilde ayarlayabilirsiniz.
font-size:13px; // Yazı boyutunu px cinsinden ayarladık.
font-family:"Calibri", Arial, Helvetica, sans-serif; // Yazı türünü.
font-style:italic; // Yazıların eğik olmasını sağladık.


.yazibilgisol : Solda yer alan 4 özelliği yani yorum, yazar, paylas ve tarih bilgilerini sola aldık. Aynı şekilde eklediğimiz .yazibilgisag ile devamını oku butonunu sağa aldık.

a.devamet : Bu kod devamını oku butonunun özelliklerini gösteriyor. Burada http://1.bp.blogspot.com/-k8xgPAyY228/TgCE0yHXpFI/AAAAAAAABvc/MMn6Jydbiic/s1600/devam.gif resmini değiştirerek kendi resminizi ekleyebilirsiniz.

Buraya kadar CSS kodları ile ilgilendik şimdi yapmanız gereken şu kodları temanızın <data:post.body/> kodunun hemen altına eklemek. (Widget şablonunu genişletmeyi unutmayın.)

<div style='clear: both;'/>

<div class='yazialtbilgi1'>
<div class='yazibilgisol'>
<span class='kategoribilgi'>
<b:if cond='data:post.labels'>
<b> <data:postLabelsLabel/></b>
<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>
</span>
<span class='okunmabilgi'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if></span>
<span class='tarihbilgi'><b>Tarih</b>: <data:post.dateHeader/></span>
<span class='yorumbilgi'>Yorum: <span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

</span></span>
</div>

<div class='yazibilgisag'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a class='devamet' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></b:if>

</div>
</div>
<div style='clear:both'/>


Kolay gelsin. Aşağıdaki bölüm özetine bakmak isteyenler ve yazıyı okumak istemeyenler, css ile ilgili kodların neye yaradığını bilenler için hazırlanmıştır.

ÖZET

Temanızın CSS bölümüne yani kısaca ]]></b:skin> kodunun hemen üstüne şu kodları ekleyin. Daha sonrada <data:post.body/> kodunun hemen üstüne şu kodları ekleyin ve temanızı kaydedin.

Bundan sonra kefini çıkarabilirsiniz, yanlız çıkarmadan önce bir kere Allah razı olsun derseniz bizde memnun oluruz.
bir mühendisin günlüğü .. dedi ki...

çok faydalı olmuş.. teşekkürler..

Yorum gönderirken lütfen alakalı yorumlar yollayın.

Burada yer alan Haber7 haberleri ile güncel hayattan haberdar olun. Davut Erarslan haber eklentisi vardı önceden onu da bir ara eklerim.

Daha fazka haber için tıkla. Haber7 haberleri
blogger"