Ada yang pernah melihat profil author pada halaman website atau blog baik blogger maupun wordpress atau mungkin ingin menampilkannya di halaman blog pribadi. Kebetulan hari ini saya ingin memberikan tutorial bagaimana Cara Mudah Menampilkan Profil Author di Bawah Postingan Blog. Tapi sebelumnya saya ingin menjelaskan secara singkat apa itu Profil author.
Jadi profil author adalah suatu widget yang ada pada sebuah halaman blog atau website yang berfungsi untuk memperlihatkan atau menampilkan ringkasan secara singkat biodata seorang pembuat atau penulis artikel blog tersebut. Menampilkan author profil di dalam blog juga berfungsi agar blog dan penulis lebih mudah dikenali, memberikan informasi tambah bagi pembaca dan tentunya lebih profesional.
Setelah memahami apa itu profil author dan fungsinya sekarang saat nya saya memberikan tutorial Cara Mudah Menampilkan Profil Author di Bawah Postingan Blog. Saya sendiri menggunakan profil author pada blog saya jadi saya harap cara ini dapat berhasil di terapkan pada blog kalian.
Cara Mudah Pertama Menampilkan Profil Author di Bawah Postingan Blog
Cara pertama menampilkan profil author
1. Masuk ke dalam blog anda > pilih Tata Letak > di bagian widget posting blog pilih Edit
2. Jika muncul menu baru, centang Tampilkan Profil Pengarang di bawah Pos > jika sudah pilih Simpan
3. Selanjutnya masuk ke halaman edit Profil dengan url https://www.blogger.com/edit-profile.g
4. Isi semua data indentitas anda terutama kolom Perkenalkan Diri Anda dan jangan lupa upload foto profil anda, setelah setelah selesai klik Simpan Profil
5. Setelah selesai coba masuk kehalaman postingan anda apakah sudah muncul tampilan Profil Author di Bawah Postingan Blog
Jika cara di atas masih belum menampilkan profil author di postingan, anda tidak perlu khawatir karna tidak semua template medukung hal tersebut jadi kalian hanya perlu menambahkan koding di bawah ini.
Cara Mudah Kedua Menampilkan Profil Author di Bawah Postingan Blog
1. Masuk kedalam Blog anda > Pilih Menu Tema > pilih edit HTML
2. Cari dan letakkan kode ini tepat di atas ]]></b:skin> atau </style>
/* Author Profile */
.author-profile {
background:#f5f5f5;
position:relative;
padding:20px;
overflow: hidden;
margin: 30px 0;
line-height: 1.5;
}
.author-profile img {
border:0;
float: left;
margin-right:20px;
width:100px;
}
.author-profile > span {
font-size: 14px;
color: #888;
}
.author-profile a.g-profile {
font-weight: 500;
color: #444444;
font-size: 18px;
margin-bottom: 5px;
display: inline-block;
}
.author-profile a.g-profile:hover {
color: #49ACE1;
}
.author-profile a.g-profile:after {
content: "\f058";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right: 4px;
color: #49ACE1;
}3. Selanjutnya cari kode <data:post.body/> (biasanya kode ini ada 1 sampai 5 atau lebih), jadi letakkan kode di bawah ini tepat berada di bawah <data:post.body/> yang pertama (Jika tidak bekerja letakkan pada pada bagian terakhir kode tersebut).
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='author profile' expr:src='data:post.authorPhoto.url' itemprop='image' title='author profile' width='90px'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>4. Jika sudah pilih Simpan Tema, Maka tampilannya akan seperti gambar dibawah ini:
Demikian Cara Mudah Menampilkan Profil Author di Bawah Postingan Blog, jika ada pertanyaan silahkan meninggalkan pesan di kolom komentar. Semoga informasinya bermafaat dan selamat mencoba.