Cara Memasang Multi Author Box Di Bawah Postingan Blog

Kali ini nyamukkurus akan memberikan Tutorial untuk membuat multi author box di bawah postingan,dengan membuat Author Box di setiap postingan blog akan membuat pengunjung lebih tau lagi tentang si Admin pada blog tersebut,ya walaupun singkat kita secara tidak langsung akan membuat pengunjung membaca nya,dan bisa juga membuat pengunjung balik lagi ke blog kita,dengan membuat multi author box di bawah postingan/artikel blog akan memberikan tampilan yang sedikit berbeda seperti tambahan media sosial agar pengunjung bisa tau langsung facebook/google+/twitter si pembuat artikel (Admin),nah Cara Memasang Multi Author Box Di Bawah Postingan Blog bisa kamu lihat pada gambar di bawah ini,artikel ini saya dapat dari twistedshape ataupun billy-art.

Tampilan Multi Author Box Di Bawah Postingan

Lantas bagaimana cara membuat multi author box di bawah postingan blog ? berikut ini cara nya :

1.Buka blogger seperti biasa
2.Klik Template lalu klik edit html
3.Cari kode 

 <data:post.body/>  

(gunakan Ctrl+F agar memudahkan mencarinya) , kode

 <data:post.body/>  

biasanya ada lebih dari satu,pada template yang saya pakai (evomagz hasil redesign) terdapat 3 kode

 <data:post.body/>  

jadi pilih yang terakhir.
4.Kemudian copy code di bawah ini dan letakan di bawah/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='https://www.facebook.com/Hafizkrauzer' rel='author'><data:post.author/></a></h4>  
 <p>  
 <data:post.authorAboutMe/>      
 </p>  
 <div class='authorsocial'>  
 <a class='img-circle1' href='https://www.facebook.com/Hafizkrauzer' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>  
 <a class='img-circle3' href='https://plus.google.com/u/0/105326401836576129319' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>  
 <a class='img-circle2' href='https://www.facebook.com/blognyamukkurus' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>  
 <div class='clr'/>  
 </div>  
 </div>  
 </div>  
 </div>  
 <div style='clear:both'/>  
 </b:if>  

5.Setelah itu letakan kode di bawah ini sebelum/di atas

 </style>  

 /* CSS Multi Author Box */
.authorboxwrap{background:#FFF;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #fff;}
.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:#eb4026;color:#fff;}
.authorsocial a:nth-child(3) i {background:#2d609b;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;} 

atau

 ]]></b:skin>  

6.Lalu klik "Simpan"

Bila Author Box belum muncul di bawah postingan blog,kamu masuk ke menu tata letak kemudian pada blog posts klik edit,lalu centang  "Tampilkan Profil Pengarang Di Bawah Pos",dan klik simpan.Demikian lah Cara untuk memasang multi author box di bawah postingan blog,semoga dapat bermanfaat.

Tweet

NYAMUKKURUS