Cara Termudah Memasang Author Profil Keren Di Sidebar Blog

Pekanan.com- Pada kesempatan kali ini saya akan memberikan tutorial cara untuk memasang author box di samping blog atau sidebar, kotak profil ini sudah dilengkapi dengan sosial media dan keterangan, sehingga pengunjung blog anda bisa mengenal lebih dekat dengan anda.

Profil Box sangat berguna untuk menjalin kedekatan dengan visitor, dengan profil yang dilengkapi sosial pribadi penuli, pengunjung blog anda akan lebih mudah untuk menanyakan tutorial yang mereka pikir belum jelas langsung kepada anda.

Dengan kotak about me di sidebar, selain untuk memberitahu pengunjung bahwa blog yang sedang mereka kunjungi adalah blog anda juga akan lebih mempercantik tampilan blog anda.

Sambil fokus untuk menulis artikel di blog anda, tidak ada salahnya untuk selalu merawat dan mempecantik tampilan blog, agar pengunjung bisa lebih bertahan lama menavigasi blog anda.

Lalu bagaimana cara memasang author profil atau author box di sidebar blog? silahkan anda ikuti tutorialnya dibawah ini dengan teliti.

Warning! Backup terlebih dahulu template anda, untuk berjaga-jaga jik ada kesalahan menaruh kodenya nanti

Cara Termudah Memasang Author Profil Keren Di Sidebar Blog

1. Hal yang paling pertaman yang harus anda lakukan adalah masuk ke blog edit HTML
2. Setelah edit HTML terbuka silahkan masukan kode CSS dibawah ini diatas kode </style> atau ]]></b:skin>


/* CSS AUTHOR BOX */
.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:#ffffff;}
.card.hovercard .cardheader{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekrS_kSXN8lhdPfylsOKgJK88rQgOw8bhpx8EQUwdMoT7kyVqTO4g3RtkOkWpJZDlT8J-k7mF9hnquRHSDUge36quno_-xgInI89RP-Nh1ksk5gcJSHPf0NOlpihjYZoM4_5ryERcp6Y/s1600/pekanancover.PNG");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{color:#ffffff;padding:0 20px;margin-bottom:17px;}
.btn{color:#ffffff;padding:6px 6px 6px 10px;border-radius:3px;margin-right:5px;}
.card .btn-facebook{background:#3b5998;color:#ffffff;}
.card .btn-twitter{background:#55acee;color:#ffffff;}
.card .btn-gplus{background:#dd4b39;color:#ffffff;}
.card .btn-ig{background:#125688;padding-right: 10px;color:#ffffff;}

3. Silahkan save template anda
4. Silahkan gunakan kode HTML dibawah ini untuk meletakanya disidebar. dengan cara masuk ke tata letak dan buat gadget baru di sidebar blog anda.


<div class='card hovercard'>
<div class='cardheader'>
</div>
<div class='avatar'>
<img alt='display picture' src='FOTO-ANDA-DISINI' title='NAMA_ANDA'/>
</div>
<div class='info'>
<div class='title'>
<a href='https://plus.google.com/XXX' rel='author' target='_blank'>Nama Nada</a>
</div>
<div class='desc'><a href='https://plus.google.com/XXX' rel='author' target='_blank'>Google+/XXX</a></div>
<div class='desc'>TENTANG-ANDA-DISINI</div>
</div>
<div class='bottom'>
<a class='btn btn-primary btn-facebook btn-sm' href='https://www.facebook.com/XXX' rel='nofollow' target='_blank'>
<i class='fa fa-facebook'/>
</i></a>
<a class='btn btn-primary btn-twitter btn-sm' href='https://twitter.com/XXX' rel='nofollow' target='_blank'>
<i class='fa fa-twitter'/>
</i></a>
<a class='btn btn-danger btn-gplus btn-sm' href='https://plus.google.com/XXX' rel='nofollow' target='_blank'>
<i class='fa fa-google-plus'/>
</i></a>
<a class='btn btn-ig' href='https://www.instagram.com/XXX' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></i></a>
</div>
</div>

Keterangan:

Ganti FOTO-ANDA-DISNI dengan url foto anda
Ganti XXX dengan shortname sosial media anda
Ganti TENTANG-ANDA-DISINI dengan deskripsi anda

Demikian cara memasang author profil keren di sidebar blog, semoga bermanfaat. happy blogging