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/AVvXsEjSQ0rIBpKMsbXNzsoJvYahPXuBGOXmW5yYDg_2qyQxYAsP6AqZIPuHTKmiGNyI1vrynK0ACAX0dyyaN2sh_ebNm0Xu2unRH4L5hd_l3faV4Z0v_BimBcOIfOr1W9i0j720FtrPS-DLHfWE/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 

Şu sıralar bana gelen soruların büyük bir kısmı "şablon yükleyemiyorum" konusu üzerine. Bu yüzden bu konuyu anlatma ihtiyacı duydum.

İlk olarak birbirinden güzel temaların bulunduğu http://btemplates.com/ sitesini kullanmayı göstereceğim sizlere. Size tavsiyem basit, sade temaları kullanın, hareketli cafcaflı temalardan uzak durun. Çünkü tema ne kadar karmaşık olursa içerisinde o kadar javascript dosyası olur ve o dosyaları da hostunuza yüklemeniz, daha sonra da şablonda yerleştirmeniz gerekir. Uyarıyı da verdikten sonra şimdi anlatıma geçelim.

İlk olarak http://btemplates.com/ sitesine giriyorsunuz. Sağda "Categories" başlığı altında birçok tema kategorisi görebilirsiniz. Onlardan birisine tıkladığınızda karşınıza yine ana sayfadaki gibi birçok tema çıkacaktır. Şimdi o temalardan sade olarak gördüğünüz herhangi birisine tıklayın. Daha sonra açılan sayfada "Download" ve "Live Demo" şeklinde iki tane buton görürsünüz. Bunlardan "Download" butonuna tıklayarak şablonunuzu bilgisayarınıza indirebilirsiniz. "Live Demo" ise o şablonun yüklü olduğu bir blog açar size ve şablonu canlı canlı inceleme imkanı sunar. Neyse uzatmadan, "Download" butonuna basın ve şablonu masaüstünüze indirin.

Şimdi masaüstünüze inmiş olan dosyayı inceleyelim. O bir sıkıştırılmış dosyadır ve onu açmadan şablon olarak blogunuza yükleyemezsiniz. Bu dosyaya sağ tıklayıp "klasöre çıkart ...\" şeklindeki winrar komutunu seçiyoruz. Örnek olsun diye ben "Nourish" isminde bir tema indirdim masaüstüne onu gösteriyorum resimlerde:

Bu işlemi yaptıktan sonra masaüstünüzde yeni bir klasör oluşacak, klasörün ismi indirdiğiniz zipli dosyanızın ismiyle aynı olacak şekilde. O klasörün içine göz gezdirecek olursanız, bir tane "XML Belgesi" bulursunuz.

Şimdi bu dosyayı Blogger'a yüklemek kaldı geriye. Şu yolu takip edin:
Blogger yönetim panelinde Yerleşim -> HTML'yi Düzenle sayfasına giriyorsunuz.
Orada "Dosya Seç" butonuna tıklıyorsunuz. Masaüstünüzde zipi açtıktan sonra oluşan klasörün içindeki xml dosyasını  seçiyorsunuz ve "Aç" butonuna basıyorsunuz. Daha sonra da "Dosya Seç" butonunun yanındaki "Yükle" butonuna basıyorsunuz.
"Lütfen aşağıdaki widget’ların silinmesi gerektiğini doğrulayın. Tüm widget’ların yapılandırma verileri kaybolacak."
şeklinde bir uyarı alırsanız "Onayla ve Kaydet" butonuna basın ve yolunuza devam edin. Şablonunuzda bir hata yoksa yüklenecektir.

Not: Bilgisayarınıza indirdiğiniz sıkıştırılmış dosyayı açabilmek için Winrar programına ihtiyacınız olacaktır. Winrar programını indirmek için aşağıdaki linke tıklayın:
http://www.rarlab.com/rar/wrar380tr.exe