Cara Memasang Widget Author Box Sederhana di Blogger

     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.

     Kali ini saya akan membagikan 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.

     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. 

     Sebagai contoh widget ini saya gunakan di blog ini bisa dilihat bagian bawah sidebar, ada beberapa masalah yang saya temui seperti background dan foto yang terpotong, untuk mengakalinya sesuaikan tinggi dan gunakan foto dengan background transparan.   

     Jika Anda tertarik untuk memasang progress scrollbar pada blog silahkan ikuti langkah-langkahnya di bawah ini.

PERHATIAN!!!
Web ini dilengkapi dengan scrip link sumber artikel. Jadi setiap paste script wajib dicek kembali dan pastikan terhapus sumber artikel pada bagian paling bawah 

1. Masuk ke Blogger.com

2. Klik Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript

3. Kemudian tambahkan kode berikut

<style type="text/css">

/* Author Box Start */

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvaXp6MNnpAdv0i3TZBS1iE6q-QuiQl2xqi_SbVS_lMGux3BRv7oXXzwwGriR-xrJgx9u1H3Z3Y8n76IXHyGhXT0UsQm0dz2KF55L_Bb5Mgxwdfy4JQQBXpIhZx6tMdo1h5DSVzE57HwxX/" alt="hafid edo" title="hafid edo"/>

<div class="myprofile">

  <h3><a href="https://plus.google.com/#" title="hafid edo">hafid edo</a></h3>

  <div class="icons">

    <a href="https://www.facebook.com/#" title="Facebook"><i class="fa fa-facebook"></i></a>

    <a href="https://twitter.com/#" title="Twitter"><i class="fa fa-twitter"></i></a>

    <a href="https://www.instagram.com/#" title="Instagram"><i class="fa fa-instagram"></i></a>

    <a href="https://www.youtube.com/#" title="Youtube"><i class="fa fa-youtube-play"></i></a>

  </div>

  <div class="mysite">#</div>

</div>

/* Author Box End */

CATATAN:

Ganti kode dibawah ini dengan link file foto anda, gunakan foto/logo yang memiliki background transparan :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvaXp6MNnpAdv0i3TZBS1iE6q-QuiQl2xqi_SbVS_lMGux3BRv7oXXzwwGriR-xrJgx9u1H3Z3Y8n76IXHyGhXT0UsQm0dz2KF55L_Bb5Mgxwdfy4JQQBXpIhZx6tMdo1h5DSVzE57HwxX/

Ganti kode dibawah ini dengan link akun anda :

https://plus.google.com/#
https://www.facebook.com/#
https://twitter.com/#
https://www.instagram.com/#
https://www.youtube.com/#

Ganti kode dibawah ini dengan nama anda : 
hafid edo

Ganti kode warna merah dibawah ini dengan catatan di widget anda anda : 
<div class="mysite">#</div>

Anda juga bisa mengubah kode dibawah ini menjadi  : 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvaXp6MNnpAdv0i3TZBS1iE6q-QuiQl2xqi_SbVS_lMGux3BRv7oXXzwwGriR-xrJgx9u1H3Z3Y8n76IXHyGhXT0UsQm0dz2KF55L_Bb5Mgxwdfy4JQQBXpIhZx6tMdo1h5DSVzE57HwxX/" alt="hafid edo" title="hafid edo"/>
menjadi :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvaXp6MNnpAdv0i3TZBS1iE6q-QuiQl2xqi_SbVS_lMGux3BRv7oXXzwwGriR-xrJgx9u1H3Z3Y8n76IXHyGhXT0UsQm0dz2KF55L_Bb5Mgxwdfy4JQQBXpIhZx6tMdo1h5DSVzE57HwxX/" height:50px; width:50px "alt="hafid edo" title="hafid edo"/>

4. Terakhir klik Simpan tema

REFRENSI : https://www.caramanual.com/2018/05/widget-author-box-sederhana.html