Blogger Yazılarınız Altında Profesyonel Sosyal Bağlantılı Yazar Kutusu

   Blog'unuzda yazılarınız,sayfalarınız altında sosyal medya iconlu özelleştirilebilir yazar kutusu eklemek isterseniz bu eklentiyi kullanabilirsiniz.Eklentiyi kendinize göre rengini,boyutunu ayarlayabilirsiniz.
Şimdi bu yazar kutusu eklentisini blog'umuza nasıl ekleriz onu görelim.

• Blogger hesabınıza giriş yapın.
• Kumanda Paneli> Şablon> HTML Düzenle yolunu izliyoruz.
• Ctrl+F kısayol tuşları ile <b:includable id='post' var='post'> kodunu aradıyoruz.

• Bulduğunuz <b:includable id='post' var='post'> kodunun hemen sol tarafında ki (►) işaretine tıklayarak kodu genişletin.

• Üste ki resimde de gördüğünüz gibi kod </b:includable> ile bitiyor.
• </b:includable> kodunun hemen üst kısmına aşağıda ki kodları ekleyin.

<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/facebook kullanıcı adınız" rel="nofollow"></a></li>
<li><a class="twitter" href="https://twitter.com/twitter kullanıcı adınız" rel="nofollow"></a></li>
<li><a class="google" href="https://plus.google.com/google profil adınız" rel="author"></a></li>
<li><a class="in" href="http://linkedin.com/in/linkedin profil adınız" 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://etralibela-61.blogspot.com/">Devamını Oku</a></p>
</div>
</div>
</div>
</b:if>

Kod içerisinde düzenleyecek olduğunuz yerler;

• Pembe renkli yazılı olan "YAZAR HAKKINDA" başlık kısmını kendinize göre düzenleyebilirsiniz.Ayrıca başlığın boyutunu sarı ile renklendirilmiş kısımdan ayarlayabilirsiniz.
• Kırmızı renkli olan yerlere sosyal medya profil kullanıcı adlarınızı ekleyin.
• Mavi renkli olan yere yazar kutusunda görünecek olan resim linkini ekleyecek olduğunuz yerdir.
• Turuncu yazılı yerleri de kendinize göre düzenleyin.
• Yeşil renkli olan yere kendi sitenizin linkini eklemeyi unutmayın.

Şimdi eklentimize farklı bir görüntü için stil kodlarını ekleyelim,

• Tekrar Ctrl+F kısayol tuşları ile ]]></b:skin> kodunu aradıyoruz.
• Bulduğunuz ]]></b:skin> kodunun hemen üst kısmına aşağıda ki kodları ekleyin.

.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/AVvXsEjLtJfuxT_Ms9dXcYPFu6IjX0LbYdVuA7_WoG8UzqRWQPEmaKU-iaFLSmSuF4FFVnj_-M97XQRn2kSny5d_9FuBUhIorhmaZFfYCIq0TkIgfZ7LdBbtsilVnD_kb6y6S_nAryzidKla2Wg/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;}

Şimdi işlemi bitirmek için şablonumuzu kaydedelim.Böylece artık sizinde yeni bir yazar kutunuz oldu.



Bizi Takip Edin..
Pinterest>> Facebook>> Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...