Cara Menambahkan Info Penulis/Author Info di bawah Postingan Blog

Blog

Salah satu hal yang menarik dan mempromosikan diri bagi jomblogger adalah dengan memasang profil diri di blog. Sarannya nih, berkiblat pda beberapa template blog yang saya lihat ada keterangan tentang penulis, author info pada bagian akhir postingan.

Lalu hal ini juga penting ketika Anda memanage blog lebih dari satu penulis. Misalnya pada sebuah blog yang memiliki 4 penulis, agar masing masing artikel jelas siapa yang menulis, saya sarankan menggunakan fitur Author Info pada setiap akhir postingannya. Contohnya dulu deh seperti ini

Langkah dan Cara membuat Author Info di bawah postingan Blog tersebut sebagai berikut:
1)Buka template Editor HTML dan  Dibawah tag ]]></b:skin> letakkan kode di bawah ini.

 /* CSS Info Penulis dibawah Postingan */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

2) Tambahkan dibawah tag <data:post.body/> dengan script di bawah ini,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
<a class='img-circle1' href='URL FACEBOOK' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='URL TWITTER' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='URL G+' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if> 

3) Simpan template Anda. Agar profil penulis bisa tampil penuh, Anda harus mengisi detail tentang diri Anda pada profil Google Plus. Kemudian Anda juga harus mengatur pada halaman Tata Letak/Layout - Posting -Edit- akan muncul jendela pop up. Kemudian perhatikan di sana, centang bagian Tampilkan Profil Pengarang...
*Note: tag <data:post.body/> ada beberapa buah dalam editor HTML anda. Coba saja satu persatu hingga tampil Info Penulis tersebut.

Share Yuk

Facebook Twitter Linkedin

Related Posts

Loading...