Blogger Yazı Sonuna Yazar Profili Ekleme


Blogerlik hızla yayılırken ve kullanıcı kitlesini geliştirirken bloger görsel düzenlemelerine dağir artık blogumda yer vermeye çalışacağım. Bu makalede yazımızın sonuna hoş bir yazar profili eklemeyi anlatmaya çalışacağım.

1. Blogunuzun yönetim paneline girin ve sol menüden "Şablon"a tıklayın ve açılan sayfada site önizlemesinin altında kalan "HTML'yi Düzenle" butonuna tıklayın.
2. Açılan kodsayfasında kodlar aarasında bir yere tıklayın ve CTRL + F ye tıklayın. Ardından

]]></b:skin> 


Kodunu arama barına yapıştırarak ENTER e basın. Çıkan sonuç solda kodlar arasında vurgulanacaktır.Vurgulanan kodlardan hemen öncesine aşağıdaki kodları yapıştırın:

/*Professional Author Box CSS Code*/
.about-author {
width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
    background: #f2f2ef;
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #EAEDEF;
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    font-family: Georgia, Tahoma, Verdana;
    line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
/*Professional Author Box CSS Code*/

3. Arfından yine CTRL + F ile

<data:post.body/>

Kodunu aratın. Çıkan sonucun hemen üstüne ya da altına seçim size kalmış aşağıdaki kodları yapıştırın:

<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="Resim Linkiniz"/><p>Hakkınızda kısa metin yazın</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>

kırmızı renk ile vurguladığım kısımları kendi bilgilerinize göre düzenleyin.
4. İşlem bu kadar "şablonu kaydet" deyip çıkın.

Devamı gelecek iyi çalışmalar ve bol şanslar ...

Video Anlatım

4 yorum

TutkusuYolda

Merhaba, paylaştığınız eklentiyi çok beğendim ancak ben bu eklentiyi ana sayfamda görünmesini istemiyorum yalnızca yazılarıma tıkladığında konu açıldığından metnin en altında görünmesini istiyorum. Bu özelliği nasıl ekleyebiliriz?

Beytullah Güneş

Konuyu d,kkatli incelerseniz zaten eklenti yazı sonu için. Videoyu izleyebilirsiniz önizleme ve uygulama için.

TutkusuYolda

Anlattıklarınızı harfiyen uyguluyorum hiç bir sorun yok. Dediğiniz gibi eklenti yazı sonlarında zaten görünüyor bu kısımda problem yok. Ancak anasayfama tıkladığımda yayınlarımın yalnızca atlama aralığına kadar olan kısmı görünmeli fakat bu eklenti normalde atlama aralığından sonra da olsa ana sayfada görünüyor.Umarım bu kez daha açıklayıcı olabilmişimdir.Şimdiden teşekkürler..

Beytullah Güneş

siteniz için (div class="tombol-berbagi-arlina") div gurubu sonrasına ya da hemen bir üst satırına ekleyebilirsiniz. Temanızda tam olarak eklentiye etki edebilecek neler yapıldığını bilemediğimden ancak afaki olarak önerilerde bulunabiliyorum.

Blog içeriklerinin temel paylaşım amacı o konuyu tartışmaya açmaktır. Sende fikirlerin ile konu hakkında katkıda bulun.
İfadeleri Gösterİfadeleri Gizle