Blogger İçin Wordpress Tarzı Yazar Kutucuğu

Blogger Yazar Hakkında Kutucuğu

Blog sektöründe bir çok ilki bizlere sunan Wordpress sistemini tercih edenlerin sıkça kullandığı   eklentilerden biri yazar hakkında kutucuğu. Daha önce sizler için yazar hakkında kutucuğu örneği göstermiştim. Blogger Yazar Hakkında Kutucuğu >>   Bu yayında da  sizlere Wordpress bloglarında kullanılan yazar a kutucuğunu paylaşacağım.

Özellikle Google sisteminin bloglara karşı güvenini kaybettiği günlerde Google Plus ile bağlantılı yazar kutucukları kullanmak size olumlu yönde katkı sağlayacaktır.


Blogger İçin Wordpress Yazar Hakkında Kutucuğu Demo

Blogger İçin Wordpress Yazar Hakkında Kutu Eklentisi 

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
 2 ) Ardından CTRL+F yardımı ile <div class='post-footer-line post-footer-line-1'> kodunu bularak hemen altına aşağıda ki Blogger için Wordpress yazar hakkında kutucuğu eklentisi  kodlarını ekliyoruz.

 <style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }
a.gplus-s{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7DZ6PhbtYtpS66ZraeFwCiWrR887ZehzheZa8WDNUQSFXZk7iEWipn_fCSQsN6XpgHojeNLcvCg8kuX59ws0wtV6JlQkTLzOKP4GH5YL9dJ4HbdI4tfBdMEA6hVJSeDcpWwGrfvPs0sf/s1600/gp-icon.png") no-repeat 0 0px; color: #666;  font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor">
<div id="author-info">
 <img alt='' src='https://lh6.googleusercontent.com/-NBdf1MafCr0/AAAAAAAAAAI/AAAAAAAAJLc/hHCELN73EGo/s250-c-k/photo.jpg'  height='80' width='80' /><h6 style="font:Georgia">Yazar: Sercan Sak <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<p>Yazar Hakkında İçerik Ekleyin - Kendinizden Bahsedin - Anahtar Kelimerinizi kullanın <strong> 
<<a href="http://www.bloggerdersleri.com" rel="dofollow">Dilerseniz Link Ekleyin </a> </strong></p></div>
<div id="author-connect">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhttps://www.facebook.com/BloggerDersleri&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>          
<a href="https://twitter.com/Bloggerblog_" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @Bloggerblog_</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
<a href="https://plus.google.com/117069198363134832012" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if></b:if>

Blogger Yazar Hakkında Kutucuğu Üzerinde Yapmanız Gereken Değişiklikler

Demo örneğinden inceleyerek takip edin : 

• Turuncu olan resim linkini, eklemek istediğiniz resim linki ile değiştirebilirsiniz.
• Pembe kısım, Yazar hakkında kutucuğunun başlık kısmı 
• Yeşil bölüm, kutucuğa kendiniz hakkında yazacağınız içerik 
• Yazı içinde link kullanabilirsiniz. Bu ayarı yapmak için mavi alanı değiştirin daha fazla link eklemek istiyorsanız.  Aşağıda görülen kodu devamına yapıştırın. 

• <a href="http://www.bloggerdersleri.com" rel="dofollow">Dilerseniz Link Ekleyin  </a> 

• Kırmızı alanlar kutucukta görülen sosyal paylaşım butonlarının linkleri, size ait olan sosyal paylaşım linkleri ile değiştirin.