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

Demo Görüntüsü

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.


Ve Genişletin (►).


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="http://linkedin.com/in/meftunmede" rel="nofollow"></a></li>
</div>
<div class="yazarinfo">
<img src="http://Profil-Resminiz.jpg" alt="Author"/>
<p>Yazar Hakkında kısa bilgi...<a href="http://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/AVvXsEgV73ubASsgbdopbVn2nkNjQSVaGvrS1rz-3wqr_2as4Up5wT0cT0ZXt43y3d29c6gHp30vv9Hu4H41Mf6KEsu-g6oAeIOX85Jm1X3Zgkps-rHj_yk4FJpSOKZREb-fIwzuVx8ZvVj9MZk/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.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...