Selamat malam, kawan.
Wah, udah lama nih tidak posting dikarenakan kesibukan ngurus blog lain. Wajarlah, blogger pemula seperti saya ini saking semangatnya jadi lupa deh masih punya blog lain (ini), hehe.
Oke, di postingan ini saya akan membagikan tutorial lagi seputar blogging. Tutorial kali ini ialah bagaimana membuat Foto Profil Penulis (Admin) dan Blog Multi Author terpampang di bawah tiap artikel. Contohnya bisa dilihat disini.
Well, langsung saja ikuti langkah-langkah berikut ini.
1. Pertama masuk ke Dashboard, lalu ke menu Template dan klik Edit HTML. (Saya sarankan untuk mem-back up dulu templatenya sebelum mencoba.)
2. Di Template editor, cari kode <span class='post-author vcard'> (gunakan Ctrl+F untuk memudahkan pencarian).
3. Perhatikan kode berikut ini.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
Kode di atas akan terlihat jika menggunakan template bawaan dari Blogger (default). Sedangkan jika menggunakan template yang sudah dimodifikasi, akan terlihat seperti berikut.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/>
</span>
</b:if>
</span>
4. Setelah kode di atas ditemukan, hapus dari kode yang diberi warna kuning sampai kode di bawahnya yang diberi warna sama. Kode di atas terdapat dua kali di template blog, jadi harus dihapus dua kali.
5. Kemudian cari lagi kode <div class='post-header-line-1'/> , kode ini ada dua, pilih yang ke dua.
6. Paste-kan kode berikut ini TEPAT DI BAWAH kode di atas.
<span class='post-author vcard'>
<b:if cond='data:post.author == "AuthorName"'>
<span class='author'><a href='Author-Profile-URL'><img src='Author-Image-URL'/></a></span>
</b:if>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>
*Catatan:
- Ganti AutorName dengan nama anda sendiri.
- Ganti Author-Profil-Url dengan URL profil anda sendiri.
- Ganti Author-Image-Url dengan URL gambar anda sendiri (saya sarankan menggunakan ukuran 40pixel x 40pixel).
7. Jika blog anda memiliki lebih dari satu Author/Admin, letakkan kode dibawah ini TEPAT DI ATAS kode <b:if cond='data:top.showAuthor'>
<b:if cond='data:post.author == "AuthorName2"'>
<span class='author'><a href='Author2-Profile-URL'><img src='Author2-Image-URL'/></a></span>
</b:if>
*Catatan:
- Ganti AutorName dengan nama anda sendiri.
- Ganti Author-Profil-Url dengan URL profil anda sendiri.
- Ganti Author-Image-Url dengan URL gambar anda sendiri (saya sarankan menggunakan ukuran 40pixel x 40pixel).
8. Langkah terakhir adalah dengan menambahkan kode berikut ini TEPAT DI ATAS kode
]]></b:skin>.
.author img{
float: left;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
margin: 0px 5px 10px 0px;
width:35px;
height:35px;
}
.post-author{
color:#777;
font-size: 13px;
}
.post-author a {
color:#777;
margin-top: 10px;
}
Untuk mengubah ukuran avatar/foto admin, naikkan/turunkan ukuran 35px sesuai keinginan.
9. Save Template!
Demikian tutorial Menambahkan Foto Profil Penulis dan Multi Author, semoga dapat membantu kawan-kawan dalam memoles blognya.
Terimakasih.
