Cara Membuat Widget Author Bio Box di Blogger - Dengan Ikon Sosial Media

Cara Membuat Widget Author Bio Box di Blogger - Dengan Ikon Sosial Media

Cara Membuat Widget Author Bio Box di Blogger (Dengan Ikon Sosial Media) - Cara membuat widget author bio box dengan ikon media sosial di blogger, adalah topik artikel kali ini.

Fungsi Widget Author Bio Box di Blogger

Widget author box ini, berfungsi untuk menampilkan rincian biodata penulis sebuah blog. Seperti foto penulis, deskripsi penulis, dan juga tautan akun media sosial penulis. Ini merupakan sebuah fitur tambahan yang Saya tambahkan di widget ini.

Dengan begitu, kalian bisa mengenal lebih dalam si penulis melalui akun media sosial miliknya.

Nah, untuk tutorial membuat widget author box ini, kalian simak saja pembahasan berikut.

Membuat Widget Author Bio Box dengan Ikon sosial media

  • Login ke akun blogger kalian dahulu.
  • Kemudian, pergi ke opsi Tema => Edit HTML => pastekan kode CSS ini sebelum kode ]]></b:skin>
 /* CSS Author Bio Box by MS Design */
.authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;border: 1px solid silver;padding: 3px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-family:Open Sans; 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;font-family: Open Sans;}
.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:50%;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;} 
  • Setelah itu, pastekan kode dibawah ini sebelum kode <data:post.body/>
Biasanya, kode tersebut ada lebih dari satu dalam template blog. Karena itu, jika pada kode pertama tidak bisa, kalian coba lagi pada kode yang kedua dan seterusnya.
<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>Author: <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> 
Konfigurasi:
- Ganti tag # dengan url akun media sosial kalian.
  • Simpan perubahan dan cek hasilnya.

Akhir Kata ...

Widget author bio box ini memiliki fitur seperti responsive untuk berbagai template, ada icon media sosial, dan tentunya mudah digunakan. Oh ya, jika kalian mengalami kendala, bisa tuliskan kendala tersebut di komentar.

Sekian artikel tentang cara membuat widget author bio box di blogger dengan ikon media sosial. Jika kalian tidak keberatan, mohon untuk membagikan artikel ini ke akun media sosial kalian. Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel