Cara Membuat Author Box Pada Sidebar Blog

Baiklah sobat publisher semua kali ini saya akan memeberikan artikel tenyang cara membuat author box pada blog anda.

Beberapa hari yang lalu saya telah posting artikel cara menampilkan cuitan twetter di blog, yang mungkin anda ingin juga melakukan itu.

Mungkin sebelun saya tunjukan cara pembuatanya alangkah baiknya saya bahas sedikit apa itu author box.

Jadi author box adalah suatu widget yang berisi informasi, identitas mengenai penulis atau pemilik blog ataupun profil pembuat konten.

Jadi nantinya ketiaka anda sebagi pemilik blog akan di tampilkan pada sisi halaman blog anda, untuk memudahkan pengunjung mengenali anda jika mereka penasaran dengan pemiliknya.

Cara pembuatanyapun cukup simpel tidak seslit apa yang di bayangkan karena anda hanya perlu mengcopy code di bawah ini dan pastekan pada blog anda.

Baiklah langsung saja berikut caranya membuat author box, silahkan anda cermati.

Pertama silahkan anda login ke akun blog anda dan masuk ke menu tema terus pilih edit HTML.

Kemudian silahkan anda tekan ctrl + f dan ketiakn ]]></skin>.

Setelah ketemu silahkan anda copy code css di bawah ini dan letakan di atas nya kode ]]></skin>.

/* CSS AUTHOR BOX KEREN */
.card{padding-top:20px;margin:10px 0 20px 0;background-color:rgba(214,224,226,0.2);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card .card-heading{padding:0 20px;margin:0;}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5;}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top;}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626;}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999;}
.card .card-body{padding:0 20px;margin-top:20px;}
.card .card-media{padding:0 20px;margin:0 -14px;}
.card .card-media img{max-width:100%;max-height:100%;}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0;}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8;}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px;}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap;}
.card-comments .media-heading{font-size:13px;font-weight:bold;}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top;}
.card.people:first-child{margin-left:0;}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff;}
.card.people .card-top.green{background-color:#53a93f;}
.card.people .card-top.blue{background-color:#427fed;}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040;}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis;}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:#fff;Border-radius: 30px;}
.card.hovercard .cardheader{background:url("ISI DENGAN URL BACKGROUND BLOG ANDA");background-size:cover;height:135px;}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px;}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5);}
.card.hovercard .info{padding:4px 8px 10px;margin-bottom:5px;}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle;}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis;margin:0 25px;}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px;}
.btn{color:#fff;padding:6px 6px 6px 10px;border-radius:3px;margin-right:5px;}
.card .btn-facebook{background:#E9E4F0;}
.card .btn-twitter{background:#E9E4F0;}
.card .btn-pinterest{background:#E9E4F0;}

.card .btn-ig{background:#E9E4F0;padding-right: 10px;}

Setelah itu silahkana anda klik save atau simpan.

langkah berikutnya silahkan anda masuk ke menu tata letak pilih tambahkan widget > Html atau Javaskrip.

Kemudian copy scrip di bawah ini dan paste di kolom yang ada.

<div class='card hovercard'>
<div class='cardheader'>
</div>
<div class='avatar'>
<img alt='display picture' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ks2nyMIuCf4H4gX08Y3Q5rnh_ytbYviV5xXnJ8jr4Df-H7VsGOFpNcksFKcVqhiLfQh0GodyoirnvgwSVRrMdZSK_7X0zg34Vjmj2iyUtbF_4QcUX8ZYbvQw4fQqggVGyV_EkUQ1rKof/w140-h140-p/LogoChannel.jpg' title='Kurniawan'/>
</div>
<div class='info'>
<div class='title'>
<a href='http://web.facebook.com/SeriesWans-289539498428038/?ref=bookmarks' rel='author' target='_blank'>Kurniawan</a>
</div>
<div class='desc'>Admin dari <a href='' rel='author' target='_blank'>serieswans.com</a></div>
<div class='desc'>" Tidak ada kata Tapi dan Tidak ada kata Nanti jika anda ingin Sukses "</div>
</div>
<div class='bottom'>
<a class='btn btn-primary btn-facebook btn-sm' href='http://facebook.com/' rel='nofollow' target='_blank'>
<i class="fab fa-facebook-square"></i></a>
<a class='btn btn-primary btn-twitter btn-sm' href='http://twitter.com/' rel='nofollow' target='_blank'>
<i class="fab fa-twitter-square"></i></a>
<a class='btn btn-danger btn-pinterest btn-sm' href='http://pinterest.com/' rel='nofollow' target='_blank'>
<i class="fab fa-pinterest-square"></i></a>
<a class='btn btn-ig' href='http://instagram.com/' rel='nofollow' target='_blank'><i class="fab fa-instagram"></i></a>
</div>
</div>

Setelah itu silahkan anda klik save dan lihat pada tampilan blog anda apakah ada yang berubah.

Jika tidak ada perubahan apapun atau ada kendala anda bisa hubungi kami di kolom komentar atau melaui email.

Mungkin cukup sekian tutorial kali ini semoga bisa bermanfaat dan selamat mencoba.

Baca juga : Cara menambahkan link di blog