Saturday, February 27, 2016

Memasang Multi Author Box di Bawah Postingan

Memasang Multi Author Box di Bawah Postingan

Memasang Multi Author Box di Bawah Postingan - Postingan ini Saya buat atas permintaan sobat blogger di blog Arlina Design untuk membuat tutorial cara memasang multi author box pada postingan.

Widget multi author box ini berfungsi untuk menampilkan foto profil google plus dan profil singkat dari penulis artikel. Widget ini sudah mendukung beberapa penulis jika di blog yang dikelola mempunyai beberapa admin atau penulis lain (guest post).

Tampilan Multi Author Box


Berikut cara penerapannya :

1. Buka blogger > Template editor > Kemudian tambahkan kode di bawah ini tepat setelah kode <data:post.body/>

<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='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

2. Selanjutnya terapkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* CSS Multi Author Box */
.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;}

3. Simpan template.

Setelan :

1. Untuk memunculkan deskripsi penulis, pastikan sobat sudah mengisi keterangan di profil google plus. Caranya buka halaman profil google plus sobat, klik tab about, buka Story, isi keterangan pada Introduction (jika menggunakan tampilan Google+ terbaru, bisa revert dulu ke yang tampilan kelasik untuk edit)

keterangan gplus

2. Setelah melakukan langkah di atas, kembali ke blogger, klik tata letak, klik edit pada widget posting blog dan tambahkan tanda centang pada tulisan Tampilkan Profil Pengarang Di Bawah Pos


3. Simpan widget.