Cara Membuat Widget Author Box Sederhana di Sidebar Blog

Memasang widget author box atau profile penulis di sidebar blog merupakan hal yang baik untuk dilakukan, ini bertujuan agar pengunjung situs bisa lebih mengenal Anda.

Ada berbagai macam widget author box yang bisa Anda temukan di internet dengan desain yang keren dan berbeda-beda.

Sebelumnya saya juga pernah membuat widget author box mirip google badge dengan dilengkapi ikon sosial media dan juga tombol subscribe dan tombol follow blog.

Namun kali ini saya membuat widget author box sederhana hanya dengan menggunakan kode CSS dan HTML saja, sehingga tidak akan memperlambat loading blog Anda.

Widget kotak admin atau profil penulis ini juga dilengkapi dengan tombol icon social media menggunakan Font Awesome sehingga masih terlihat keren walau desainnya yang masih sederhana.

Saya juga sudah mencoba memasangnya di berbagai jenis template blog yang saya miliki dan hasilnya cukup bagus.

Meski menemukan beberapa masalah seperti foto profil yang tertutup atau terpotong ketika saya coba pasang di blog lain dengan template berbeda, namun hal ini sudah saya atasi.

Akhirnya saya bisa mempublikasikan widget ini untuk Anda semua yang sedang mencari widget profil penulis atau author box sederhana yang menggunakan kode pure css.

Berhubungan widget ini memiliki ukuran lebar 300px jadi saran saya gunakan di bagian sidebar blog, tapi kalau Anda paham dengan kode css silahkan modifikasi lagi kotak penulis ini sesuai dengan keinginan Anda.

Baik langsung saja, jika Anda tertarik untuk membuat widget author box sederhana di sidebar blogger silahkan ikuti langkah-langkahnya di bawah ini.

Cara Memasang Widget Author Box Sederhana di Blogger

DEMO

1. Masuk ke Blogger.com
2. Klik Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript
3. Lalu masukkan kode berikut ini:

<style type="text/css">
/* author box by caramanual.com */
.cm-author{font-family:'Open Sans',Arial,sans-serif;position:relative;display:inline-block;min-width:230px;max-width:336px;width:100%;text-align:left;font-size:16px;background:#f5f5f5;border-radius:5px;margin-top:15px}
.cm-author *,.cm-author:before,.cm-author:after{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
.cm-author img{max-width:35%;margin-top:-15px;margin-left:60%;margin-bottom:15px;backface-visibility:hidden;vertical-align:top;border-radius:5px}
.myprofile{position:absolute;top:0;right:40%;left:0;bottom:0;padding:15px}
.cm-author h3{margin:0;font-size:1.1em;font-weight:bold}
.cm-author h3 a{color:#656565;text-decoration:none}
.cm-author h3 a:visited{color:#656565;text-decoration:none}
.cm-author .icons{font-size:1.6rem}
.fa-facebook{color:#bababa}
.fa-facebook:hover{color:#3b5998}
.fa-twitter{color:#bababa}
.fa-twitter:hover{color:#55acee}
.fa-instagram{color:#bababa}
.fa-instagram:hover{color:#e95950}
.fa-youtube-play{color:#bababa}
.fa-youtube-play:hover{color:#ff0000}
.mysite{font-size:12px;font-style:italic}
</style>
<div class="cm-author">
<img src="https://lh3.googleusercontent.com/qOaUXrOEROvJVYw9aR52a8lmvzpcyJ_TmrU4PYMo4DHSMc8vMvhFxHqffd9PSroe0JuUxfT0FBVeHg" alt="Ficri Pebriyana" title="Ficri Pebriyana"/>
<div class="myprofile">
  <h3><a href="https://plus.google.com/+FicriPebriyana" title="Ficri Pebriyana">Ficri Pebriyana</a></h3>
  <div class="icons">
    <a href="https://www.facebook.com/caramanual" title="Facebook"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/caramanual" title="Twitter"><i class="fa fa-twitter"></i></a>
    <a href="https://www.instagram.com/caramanual" title="Instagram"><i class="fa fa-instagram"></i></a>
    <a href="https://www.youtube.com/caramanual" title="Youtube"><i class="fa fa-youtube-play"></i></a>
  </div>
  <div class="mysite">www.caramanual.com</div>
</div>

4. Klik Simpan, dan lihat hasilnya

Catatan:
Jangan lupa ganti URL sosial media dan foto profil Anda.

Jika ikon sosial media tidak muncul, tambahkan kode ini di atas kode </body> pada editor template blog Anda.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Itulah artikel mengenai cara membuat widget author box sederhana di sidebar blog, selamat mencoba dan semoga bermanfaat.

Jika mengalami masalah ketika memasang widget ini silahkan hubungi kami melalui halaman kontak, sebisa mungkin kami akan membantu Anda untuk menggunakan widget ini.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini