Memasang Multi Author Box di Bawah Postingan

2/27/2016
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

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.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 comment

Berhasil, terimakasih tutorialnya

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.