Cara Membuat Multi Author Box di Bawah Postingan

Wednesday, February 15, 2017

Cara Membuat Multi Author Box di Bawah Postingan, ya kali ini RizkyTeknologi kembali lagi men share tutorial blog dan mudah mudahan dapat bermanfaat bagi anda anda sekalian para blogger.

Gambar dari website ArlinaDesign

Dalam artikel kali ini saya akan membahas tentang cara membuat lebih tepatnya memasang Multi Author Box, Author Box adalah sebuah kotak yang memberikan info penulis kepada pembaca.

Tutorial ini saya dapatkan dari blog yang cukup dikenal oleh kalangan blogger lainnya yaitu Arlina Design. Ok tanpa basa basi lagi mari kita bahas tuntas tutorial ini....

1. Pertama pastikan anda sudah login di blogspot.com karena tutorial ini hanya untuk blogspot

selanjutnya buka Template Editor dan masukan kode dibawah ini tepat di bawah 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>
TULISKAN KETERANGAN AUTHOR DISINI       
</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>

TULISAN BERWARNA MERAH DIGANTI SESUAI KEINGINAN

2.setelah itu pasang kode dibawah ini tepat di atas kode ]]></b:skin> dan </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 dan selamat mencoba....

SELESAI.

Ya seperti itu tutorial yang saya coba share untuk para pembaca semoga bermanfaat, silahkan komentar jika ada masalah akan kami bantu semampu kami.... Terima kasih

sumber: http://www.arlinadzgn.com/2016/02/memasang-multi-author-box-di-bawah-postingan.html-

Ini Rizky