Cari di Blog ini

May 10, 2013

Cara Membuat About Me Author Bio Profil Blogspot

Author Bio / About Me / Profil Box pada Blogspot dapat dibuat dengan berbagai kombinasi dan teknik. Cara mudah membuat Kotak About Me ini adalah dengan menyisipkan sedikit kode-kode sederhana.

Profil Box yang nantinya terpasang dibawah post artikel, dipastikan akan meningkatkan kualitas SEO dari setiap halaman, karena mengandung Authorship dan Meta Description blog.

Untuk membuat Author Bio dibawah artikel, dapat dilakukan langkah-langkah berikut:

Author Bio Profil Box

Langkah 1
Cari dan temukan:

<div class='post-footer-line post-footer-line-3'/>

atau

<div class='post-footer-line post-footer-line-3'>
...content...
</div>

Langkah 2
Letakkan kode ini dibawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.profil{width:auto;margin:10px;padding:10px;border:1px solid #dedede}
.profil h3{font-family:Baskerville,&#39;Baskerville Old Face&#39;,&#39;Hoefler Text&#39;,Garamond,&#39;Times New Roman&#39;,serif;font-size:125%}
.g-plus,.profil-photo{float:left;margin:0 10px 0 0}
</style>
<div class='profil'>
<h3>About Me</h3>
<div class='profil-photo'>
<a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author'>
<div style='width:72px; height:72px'>
<img expr:alt='data:post.author' expr:title='data:post.author' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuFFWHdrWdnS6tFHVMzOfzZllvctXuxy24SSM8kdeGSu6Ef8WtO5wFgswwVvnJtkTdtOYryCxeqTpD3ebm-CP1djNCavMgN7zGNy_xTtpGYr-6aLEjOymLfDNPG_qmtozUkkhh1MOEdV8/s1600/avatar.png' width='72'/>
</div>
</a>
</div>
<div class='blog-info'>
<span><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> : <data:description/></span><br/>
<span><data:blog.pageTitle/> - <data:blog.metaDescription/></span>
</div>
<span>Posted By: <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='publisher'><data:post.author/></a> On: <data:post.dateHeader/></span>
<div class='g-plus' data-rel='publisher' data-width='100%' expr:data-href='data:post.authorProfileUrl'/>
</div>
</b:if>

1 comment:

  1. sayangnya saya memakai wordpress tapi mungkin kalau di wp ada pluginnya..

    ReplyDelete

Copyright © Fauzi Blog