Search This Blog

Memasang Author Box Di Bawah Postingan

  • Sunday, June 10, 2018 at 12:07:00 PM
  • 0 Comments
  • Views
Awal Kisah
Setiap blog walking di internet aku selalu menemukan author info di bawah setiap postingan yang aku baca. Aku tertarik untuk menerapkan nya di blogku, kemudian aku mulai searching di Google tentang author box Blogspot. Aku kemudian membaca sebuah artikel tentang cara memunculkan Author Info di bawah postingan di blognya mas Sugeng. Sayangnya dari tutorial mas Sugeng aku tidak berhasil memunculkan author infonya, gak tahu kenapa mungkin template aku yang tidak support.

Percobaan Yang Kedua
Setelah beberapa lama aku menemukan tutorial yang lain tentang cara memasang Author Box di bawah postingan, kali ini di kasih juga kodenya untuk memunculkan author info. Tutorialnya adalah dari blog mbak Arlina Design. Dari tutorial kali ini aku berhasil memunculkan author info di bawah setiap postingan. Hasilnya bisa dilihat di bawah setiap postingan di blog ini.
Untuk kodenya aku berhasil memodifikasi beberapa kode CSS-nya sehingga tampilannya berbeda dari yang aslinya dan sesuai dengan keinginanku. Oke biar tidak lupa aku akan simpan kodenya di dalam postingan ini beserta tutorial nya.

Kode Beserta Tutorial Pemasangan
Berikut adalah Author Box versiku yang aku modifikasi dari kode mbak Arlina. Pertama-tama untuk kode CSS-nya adalah seperti di bawah ini. Aku simpan di antara style CSS blogku.
/* CSS Author Box by Arlina Design Modified by Eka Awaludin */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:0px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:10px;}
.avatar-container img{width:110px;height:auto;margin: 0 0 -6px 0;}
.author_description_container {padding:10px 0 0 0}
.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:#333333;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;}
Kemudian yang kedua adalah kode XML nya, aku simpan setelah <data:post.body/> yang ketiga. Perlu di ketahui aku menemukan tiga buah kode itu di template blogku.
<!-- Author Box by Arlina Design Modified by Eka Awaludin-->
<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='http://ekaawaludin.blogspot.com/p/about.html' rel='author' target='_blank'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
  <a class='img-circle1' href='http://github.com/ekaawaludin' rel='nofollow' target='_blank'><i class='fa fa-github'/></a>
  <a class='img-circle2' href='http://twitter.com/ekaawaludin' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
  <a class='img-circle3' href='http://plus.google.com/+ekaawaludin' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
Jika ingin menggunakan kode ini ganti URL media socialnya dengan URL media sosial kalian. Selesai dan akhirnya aku bisa menampilkan Author Box di akhir setiap postingan blogku.

Referensi
No comments
No comments

Post a Comment