Cara Menciptakan Author Box Keren, Responsive & Simple Di Blog

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

Selain simpel dan simpel dibentuk serta dipasangkan, Author Box berfungsi juga untuk meningkatkan otoritas blog. Selain itu biar blog lebih menarik.

Widget Author Box yang ini dilengkapi dengan foto profil Google+ dan deskripsi singkat. Dilengkapi juga dengan ikon sosial media button ibarat 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 menghipnotis 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 dibentuk 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 tunjangan Author Box, tentunya membantu banget kan? Mereka bakal simpel menemukan kita.

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

Cara Membuat Author Box Keren, Responsive & Simple di Blog

1. Template > Edit Template
2. Cari isyarat ini: ]]> </ b: skin> di dalam template
3. Copy isyarat 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 isyarat tersebut, diatas isyarat ]]></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 isyarat ini: <div class = 'post-footer'>
2. Copy isyarat dibawah ini, letakkan (paste) diatas isyarat <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 ibarat <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 hingga disini tutorial cara menciptakan 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.*