En yeni: Dünyanın en iyi 10 video düzenleme programı Trending: İnternetten para kazanmak, Ekgelir, En iyi Tıkla Kazan (PTC) Siteleri

Blog Yazılarının Altına Yazar Bilgi Kutusu

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="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://www.meftunmede.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(http://2.bp.blogspot.com/-5pVjrOEOM70/UxnR1nubmlI/AAAAAAAAACg/eIkJhgGfdoE/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 yorum:

  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

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!

 
  • Meftun Apart

    Meftun Apart Fethiye

    Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

  • Meftun Mede Blogger

    MEDE Blogger Tema Yardım

    Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

  • Sitemap sayfası oluşturma

    Sitemap sayfası oluşturma

    Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

  • hit arttırma

    Sitenizin hitini arttırın!

    Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

  • internetten para kazan

    İnternetten para kazan !

    Boş zamanınızı internetde reklam izleyek ve bundan para kazanarak geçirebilirsiniz. Ek gelir elde edebilirsiniz!