Cara Menciptakan Widget Author Box Sederhana Di Sidebar Blog - Gasskeun Cara Menciptakan Widget Author Box Sederhana Di Sidebar Blog | Gasskeun

Cara Menciptakan 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 semoga pengunjung situs dapat lebih mengenal Anda.

Ada banyak sekali macam widget author box yang dapat Anda temukan di internet dengan desain yang keren dan berbeda-beda.

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

Namun kali ini saya menciptakan widget author box sederhana hanya dengan memakai isyarat 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 memakai Font Awesome sehingga masih terlihat keren walau desainnya yang masih sederhana.

Saya juga sudah mencoba memasangnya di banyak sekali jenis template blog yang saya miliki dan balasannya cukup bagus.

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

Akhirnya saya dapat mempublikasikan widget ini untuk Anda semua yang sedang mencari widget profil penulis atau author box sederhana yang memakai isyarat pure css.

Berhubungan widget ini mempunyai ukuran lebar 300px jadi saran saya gunakan di kepingan sidebar blog, tapi kalau Anda paham dengan isyarat css silahkan modifikasi lagi kotak penulis ini sesuai dengan impian Anda.

Baik pribadi saja, jikalau Anda tertarik untuk menciptakan widget author box sederhana di sidebar blogger silahkan ikuti langkah-langkahnya di bawah ini.

Memasang widget author box atau profile penulis di sidebar blog merupakan hal yang baik un Cara Membuat Widget Author Box Sederhana di Sidebar Blog

Cara Memasang Widget Author Box Sederhana di Blogger


1. Masuk ke Blogger.com
2. Klik Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript
3. Lalu masukkan isyarat 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="Memasang widget author box atau profile penulis di sidebar blog merupakan hal yang baik un Cara Membuat Widget Author Box Sederhana di Sidebar Blog" title="Cara Membuat Widget Author Box Sederhana di Sidebar Blog"/> <div class="myprofile">   <h3><a href="https://plus.google.com/+FicriPebriyana" title="Cara Membuat Widget Author Box Sederhana di Sidebar Blog">Ficri Pebriyana</a></h3>   <div class="icons">     <a href="https://www.facebook.com/caramanual" title="Cara Membuat Widget Author Box Sederhana di Sidebar Blog"><i class="fa fa-facebook"></i></a>     <a href="https://twitter.com/caramanual" title="Cara Membuat Widget Author Box Sederhana di Sidebar Blog"><i class="fa fa-twitter"></i></a>     <a href="https://www.instagram.com/caramanual" title="Cara Membuat Widget Author Box Sederhana di Sidebar Blog"><i class="fa fa-instagram"></i></a>     <a href="https://www.youtube.com/caramanual" title="Cara Membuat Widget Author Box Sederhana di Sidebar Blog"><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 isyarat ini di atas isyarat </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 menciptakan widget author box sederhana di sidebar blog, selamat mencoba dan semoga bermanfaat.

Jika mengalami problem saat memasang widget ini silahkan hubungi kami melalui halaman kontak, sebisa mungkin kami akan membantu Anda untuk memakai widget ini.
Sumber https://www.caramanual.com/

Related Posts