Memasang Multi Author Box Di Bawah Postingan

Memasang Multi Author Box di Bawah Postingan - Postingan ini Saya buat atas seruan sahabat blogger di blog untuk menciptakan 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 kalau di blog yang dikelola memiliki beberapa admin atau penulis lain (guest post).

Tampilan Multi Author Box

Berikut cara penerapannya :

1. Buka blogger > Template editor > Kemudian tambahkan arahan di bawah ini sempurna sehabis arahan <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 arahan di bawah ini sempurna 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 sahabat sudah mengisi keterangan di profil google plus. Caranya buka halaman profil google plus sobat, klik tab about, buka Story, isi keterangan pada Introduction (jika memakai tampilan Google+ terbaru, dapat revert dulu ke yang tampilan kelasik untuk edit)

2. Setelah melaksanakan 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.