Cara Terbaru Memasang Multi Author Box Keren Di Setiap Postingan Blog
Kotak profil ini berguna untuk memberi tahu bahwa yang menulis artikel adalah orang yang muncul di kotak profil disetiap postingan, multi author profil ini sangat cocok digunakan oleh blog dengan beberapa admin, artinya yang mengelola blog bukan hanya satu orang, dengan memasang multi author box dibawah ini maka setiap penulis akan muncul masing-masing profilnya sesuai dengan artikel yang mereka tulis.
Multi author box ini selain untuk memberi tahu kepada visitor bahwa sobat yang menulis juga memberikan kesan propesional dan kredibelitasnya tidak diragukan lagi, bagaimana tidak? visitor bisa langsung melihat siapa penulis artikel dari website yang dia temukan.
Oleh karena itu, multi author box ini sangat direkomendasikan untuk blog yang dikelola oleh kelompok bukan hanya oleh satu orang.
Lalu bagaimana cara membuat multi author box disetiap postingan blog ini? silahkan sobat ikuti tutorialnya dibawah ini:
Cara Terbaru Memasang Multi Auhtor Box
1. Petama silahkan masuk ke blog>theme>edit HTML.2. Kemudian copy kode dibawah ini diatas kode </style> atau bisa juga diatas kode ]]></b:skin>
/* 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;}
<b:if cond='data:blog.pageType == "item"'>
<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>
4. Setelah itu silahkan save.
Cara Setting:
1. Agar deskripsi dari setiap author muncul maka mereka harus mengisi masing-masing deskripsi di google plus mereka, sehingga nanti akan muncul tentang pemilik blog di author box ini, untuk settingnya silahkan sobat log in ke google+>About sobat, kemudian isi deskripsi sobat.
2. silahkan seting seperti gambar dibawah ini
3. save.
4. satu langkah lagi, agar mulit author box ini benar-benar muncul di setiap postingan sobat, silahkan pergi ke tataletak
5. Setting seperti gambar dibawah ini
6. kemudian klik ok.
7. selesai.
Bagamina mudah bukan? silahkan ikuti langkah-langkahnya dengan benar, jika ada pertanyaan silahkan tuliskan di kolom komentar.
Demikian Cara Terbaru Memasang Multi Auhtor Box Keren Di Setiap Postingan Blog, semoga bermanfaat.