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

]]> 

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

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

About Author:

<img align="left" src="Resim Linkiniz“/>

Hakkınızda kısa metin yazın

Let’s Get Connected: <a href="http://twitter.com/” rel=”nofollow” target=”_blank”>Twitter | <a href="http://www.facebook.com/” rel=”nofollow” target=”_blank”>Facebook | <a href="http://plus.google.com/” rel=”nofollow”>Google Plus

ilgili konu  Wordpress Ücretsiz BG Film Teması V2 - Mobil Uyumlu (Responsive) - Botlu

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

[youtube https://www.youtube.com/watch?v=OMwbvSQajQU]