Kategori : Blogger
Hemen hemen 1 hafta önce yazıların içinde yazı bilgilerini gösteren bir kutu kodlamıştım. Bayram dolayısıyla memkeletimde maillerimi kontrol ederken bir ziyaretçi o kodu benden istedi. Memlekette olduğum için şimdi paylaşma kararı aldım. Tabii benimkinin tıpatıp aynısı değil.(Bir kaç yeri değişik) Kodlarken CSS Sprite kullandım. Bu yüzden sitenizin açılışını kat'iyen azaltmaz. Yüzde ile konumlandırdığım için her çözünürlükte aynı yerde gözükmeye devam edecektir. Ayrıca CSS'ye açıklama kodlarını ekledim. Tarzınıza göre düzenleyebilirsiniz.

Önizleme

CSS Kodu

Bu kodu Blogger şablonundaki <b:skin> ile </b:skin> kodları arasına ekleyiniz.
#yaziİciBilgi{ width:auto; height:auto; padding:3px; border:1px solid #aaa;/*Kenarlık boyutu, tipi ve rengi*/ display:inline-block; position:fixed; top:10%/*Yukarıya uzaklığı*/; right:1%;/*Sağa uzaklığı. Sola hizalamak için değeri left yapın*/ font:13px Arial;/*Yazı boyutu ve adı*/ background:#fff/*Arkaplan rengi*/ } #yaziİciBilgi a{ color:#aaa/*Linklerin rengi*/ } #yaziİciBilgi a:hover{ color:#000/*Linklerin üzerinde gelince alacağı renk*/ } #yaziİciBilgi h3{ color:#5d98d8;/*Başlık rengi*/ border-bottom:1px dotted #aaa;/*Başlığın altındaki çizginin boyutu tipi ve rengi*/ font:bold 14px Arial;/*Yazı kalınlığı, boyutu ve adı*/ text-align:center;/*Başlığı ortalama*/ padding:3px 0; margin:0 } #yaziİciBilgi .kategori,#yaziİciBilgi .tarih,#yaziİciBilgi .yorum{ height:20px; width:20px; padding-left:24px; float:left; font-size:13px; margin:3px 0; width:100% } #yaziİciBilgi .kategori{ background:url(https://lh3.googleusercontent.com/-sW75ut86b3M/UgjZV47n9mI/AAAAAAAAHJY/k0bOwW8Pcu0/s62/yaziBilgisi.png) no-repeat center left; background-position:0 0 } #yaziİciBilgi .tarih{ background:url(https://lh3.googleusercontent.com/-sW75ut86b3M/UgjZV47n9mI/AAAAAAAAHJY/k0bOwW8Pcu0/s62/yaziBilgisi.png) no-repeat center left; background-position:0 -21px } #yaziİciBilgi .yorum{ background:url(https://lh3.googleusercontent.com/-sW75ut86b3M/UgjZV47n9mI/AAAAAAAAHJY/k0bOwW8Pcu0/s62/yaziBilgisi.png) no-repeat center left; background-position:0 -42px }

HTML Kodu

Bu kodu ise Blogger şablonundaki <b:includable id='post' var='post'> kodunun altına ekleyiniz.
<b:if cond='data:blog.pageType == "item"'><div id='yaziİciBilgi'> <h3>Bu Yazı Hakkında</h3><div class='kategori'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + "?max-results=7"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> - </b:if></b:loop></div><br/><br/> <div class='tarih'><b:if cond='data:post.dateHeader'><script>var Tarih = '<data:post.dateHeader/>';</script><data:post.dateHeader/><b:else/><script>document.write(Tarih);</script></b:if></div><br/><br/> <div class='yorum'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>Yorum yok.<b:else/><b:if cond='data:post.numComments == 1'>1 yorum.<b:else/><data:post.numComments/> yorum.</b:if></b:if></a></div></div></b:if>

Bunu E-postayla GönderBlogThis!X'te paylaşFacebook'ta Paylaş