Blog Yazılarının Altına Yazar Bilgi Kutusu
Blogunuzda, yazılarınızın/yayınlarınızın hemen altında, sizi yada blogunuzu tanıtan bir eklenti istermisiniz? Yazar bilgi kutusu, her blog yazısının sonunda yer alan ve yazarla ilgi kısa bilgiler ile iletişim bilgilerini içeren bir kutudur. Yazar hakkında eklentisi sayesinde kendiniz hakkında bilgi verebilir, ne ile uğraştığınızı, ilgi alanlarınızı vs. kendinizi ziyaretçilerinize kısaca tanıtabilirsiniz. Sade ve kullanışlı bu kolay eklenti sayesinde blogunuzda yazılarınızın altında kendi tanıtımınız ve resminizi ekleyebilirsiniz. Her renge ve boyuta ayarlanabilen bu eklenti kesinlikle çok işinize yarayacaktır.

  • 4 Sosyal Ağ bağlantısı
  • Uyumlu ve Esnek tasarım
  • Yazar fotoğraflı
  • Kısa Biyografi Özeti
  • Özelleştirilebilir
  • Uygulaması Kolay

ÖNİZLEME
1. Blogger panelinize giriş yapın Şablon HTML'yi Düzenle
2. Ctrl+F yardımı ile <b:includable id='post' var='post'> kodunu aratıp bulun.
includable post

Ve Genişletin ().
post includable

Resimde görüldügü gibi post alanı </b:includable> ile bitiyor.
hemen üstüne aşağıdaki kodları kendinize göre düzenleyip, kopyalayıp yapıştırın.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="yazar-hakkinda">
<h3 class="kutubasligi">YAZAR HAKKINDA</h3>
<div class="yazarkutusu">
<div class="yazarsosyal">
<li><a class="fb" href="https://www.facebook.com/meftunmede.blogger" rel="nofollow"></a></li>
<li><a class="twitter" href="https://twitter.com/MeftunMEDE" rel="nofollow"></a></li>
<li><a class="google" href="https://plus.google.com/113884753756003696845" rel="author"></a></li>
<li><a class="in" href="https://linkedin.com/in/meftunmede" rel="nofollow"></a></li>
</div>
<div class="yazarinfo">
<img src="https://Profil-Resminiz.jpg" alt="Author"/>
<p>Yazar Hakkında kısa bilgi...<a href="https://meftunmede.blogspot.com">Devamını Oku</a></p>
</div>
</div>
</div>
</b:if>

Yukarıdaki kırmızı ile belirttiğim alanları kendinize göre düzenlemeyi unutmayın!

3. Şimdi CSS kodunu ekleyerek yazar kutusuna stil verelim. Tekrar ]]></b:skin>  kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
.yazar-hakkinda{width:100%;}
.yazarkutusu{overflow:hidden;background:#26292c;color:#ccc;padding:0;box-shadow:1px 3px 4px #bcbcbc;}
.yazarkutusu .yazarinfo{color:#ccc;}
.yazarkutusu .yazarsosyal{float:left;}
.yazarkutusu .yazarsosyal li{list-style:none;position:relative;margin:0;}
.yazarkutusu .yazarsosyal li a{width:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu2E7pfpIyKJCU3i9ciwke5mrJtyyKLRNLIRIY9-TA20zgk1se2DL2k-akdPM_jzZFwKr6enX4v8DBgAJO_uJXZ70WVKv9IpidMHRDBryMHe1UKW4icASJ3cyo9kutvBG1PYroMZrkQM4/s1600/yazarkutusu_social_logo.png);height:32px;margin:0;}
.yazarkutusu .yazarinfo img{float:left;border-radius:100%;width:17%;background:#fff;margin:4px 10px 4px 5px;padding:5px;}
.yazarkutusu .yazarinfo p{font-size:18px;line-height:25px!important;font:15px georgia, Arial;text-align:left;margin:0;padding:5px;}
.yazarinfo p a{text-decoration:none;color:#1BC3F8;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;-ms-transition:.5s;transition:.5s;padding:2px 4px;}
.yazarinfo p a:hover{background:#2882b7;color:#fff;}
h3.kutubasligi{background:#26292c;color:#fff;text-align:center;width:25%;font:17px georgia, Arial;margin:0 auto;padding:2px 10px;}
.yazarkutusu .yazarsosyal li .fb{background-position:0 0;}
.yazarkutusu .yazarsosyal li .twitter{background-position:0 -32px;}
.yazarkutusu .yazarsosyal li .google{background-position:0 -64px;}
.yazarkutusu .yazarsosyal li .in{background-position:0 -96px;}
.yazarkutusu .yazarsosyal li .in:hover{background-position:-32px -96px;}
.yazarkutusu .yazarsosyal li .google:hover{background-position:-32px -64px;}
.yazarkutusu .yazarsosyal li .twitter:hover{background-position:-32px -32px;}
.yazarkutusu .yazarsosyal li .fb:hover{background-position:-32px 0;}
.yazarkutusu:hover img{background:#1BC3F8;}
.yazarkutusu .yazarinfo img,.yazarkutusu .yazarsosyal li a{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;}
4. Şablonu Kaydet diyip çıkıyoruz.
Not: Bu eklenti tek yazarlı bloglar içindir.
Çok yazarlı bloglar için yazar bilgi kutusu için tıklayın.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

2 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. hocam yaptıgım hıcbırsey olmuyor yardımmmmm

    YanıtlaSil
  2. Meftun Abi , birden çok yazar varsa o zaman ne olacak ?

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale