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

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