Cara Membuat Author Box Keren, Responsive & Simple di Blog

Cara membuat widget Author Box dan memasangkan di blog itu sangat mudah.

Selain mudah dan gampang dibuat serta dipasangkan, Author Box berfungsi juga untuk meningkatkan otoritas blog. Selain itu agar blog lebih menarik.

Widget Author Box yang ini dilengkapi dengan foto profil Google+ dan deskripsi singkat. Dilengkapi juga dengan ikon sosial media button seperti Google Plus, Facebook dan Twitter. Mau menambahkan icon Instagram? Bisa!

Baca Juga: Author Box widget ini Mengalami Error

Beberapa fitur kotak penulis profesional ini diantaranya adalah:

1. Dukungan untuk banyak penulis, setiap Author Box akan berbeda namanya (siapa si penulisnya)
2. Otomatis dari Google Plus
3. Terlihat elegan dan simple sehingga tampak lebih ganteng
4. Desain yang responsive, menyesuaikan dengan layar smartphone (Mobile)
5. Kode yang pendek dan singkat sehingga tidak mempengaruhi kecepatan loading blog
6. Desain CSS yang sederhana
7. Mudah untuk dilakukan: Install dan Customization
8. Author box widget di bawah posting blog (di bawah artikel, diatas Related Post)
9. Setelan yang dibuat khusus untuk template blogger kita, - Apa pun templatnya, work 100% bro!

Otoritas itu memang penting, apalagi banyak pembaca yang ingin berkomunikasi (interaksi) dengan kita. Nah dengan bantuan Author Box, tentunya membantu banget kan? Mereka bakal mudah menemukan kita.

Secara otomatis, widget Author Box kali ini mengambil info Google Plus kita seperti gambar profil dan kalimat pengenalan.

Cara Membuat Author Box Keren, Responsive & Simple di Blog

1. Template > Edit Template
2. Cari kode ini: ]]> </ b: skin> di dalam template
3. Copy kode dibawah ini:

/* Author Box CSS SEOKLR Start*/
.authorboxwrap{background:#fff;margin:20px auto 20px;padding:20px;overflow:hidden;border:1px solid #bdc3c7;}
.avatar-container{float:left;margin:0 20px 0 0;border-radius:100%}
.avatar-container img{width:90px;height:auto;max-width:100%!important;border-radius:100%;transition:all .3s;}
.avatar-container img:hover{transform:rotate(-15deg)}
.author_description_container h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#333}
.author_description_container p{margin:0;color:#333;font-size:14px;font-family:'Poppins',sans-serif;margin-bottom:8px;line-height:25px;font-weight:400}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:rgba(0,0,0,0.5);color:#fff;font-size:13px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:30px;height:30px;line-height:30px;border-radius:100%}
.social-links li:nth-child(1) a{background:#516ca4;}
.social-links li:nth-child(2) a{background:#00c3f3;}
.social-links li:nth-child(3) a{background:#f20000;}
.social-links li a:hover{opacity:.9;color:#fff}
/* Author Box CSS SEOKLR End*/

4. Paste kode tersebut, diatas kode ]]></b:skin> yang telah kita temukan tadi
5. Ok lanjut ke tutorial selanjutnya.

Nb: Kebetulan saya pakai Font Family Poppins ('Poppins',sans-serif) untuk gayanya, sesuai pada gambar Author Box di posting ini. Silahkan sesuaikan Fontnya dengan Font Style yang Anda miliki.

1. Masih di template, cari kode ini: <div class = 'post-footer'>
2. Copy kode dibawah ini, letakkan (paste) diatas kode <div class = 'post-footer'>

<!-- Author Box SEOKLR -->
<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='90' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='https://tipsseokiller.blogspot.co.id/p/about.html' rel='author'><data:post.author/></a>
<i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>
<p><data:post.authorAboutMe/><b/>
</p>
<div class='social-links'>
<li><a class='external external-link' href='https://www.facebook.com/algazaliofficial' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='https://twitter.com/ariefghozaly' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='https://plus.google.com/+AlgazaliOfficials' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
/* Author Box CSS SEOKLR END*/

3. Save template!

Nb: silahkan ubah atau ganti semua link URL yang saya warna-merahkan diatas dengan link URL kepunyaan Anda sendiri.

Kode seperti <div class = 'post-footer'> terkadang berbeda-beda dengan satu template dengan template lainnya.

Kode tersebut, tempatnya peletakkan Author Box kita nantinya. Sebenarnya terserah sih mau ditempatkan dimana, Author Box di pasang dibawah posting atau atas posting pun, bisa!

Mengisi Deskripsi Author Box di Google plus

1. Buka Profil Google: https://aboutme.google.com/
2. Edit Cerita > Edit Perkenalan (bukan semboyan)
3. Isi deskripsi dengan kalimat menarik namun singkat, padat dan jelas
4. Simpan perubahan, Ok!

Mengaktifkan Fitur Author Box di Layout Blogger

1. Masuk ke Tata Letak (Layout) Blogger
2. Tap "edit" pada Blog Post
3. Centang Ok pada "Show Author Profile below Post"
4. Save, Ok!

Ok sampai disini tutorial cara membuat Author Box simple tapi keren di blog, dan cara pasang widget author box di blog blogspot pun sudah selesaikan dilakukan; sekaligus dokumentasi pengelaman blogging saya.*