AUTOR
SUMBER :
https://www.arsipbiru.com/2022/08/cara-membuat-author-box-keren-dengan-css-di-blogger.html Masukan kode fontawesome berikut ini sebelum kode </head>.
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" rel="stylesheet"></link>
/* 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;}
Masukkan kode berikut ini di kotak HTML/JavaScript.
<div class='card hovercard'>
<div class='cardheader'>
</div>
<div class='avatar'>
<img alt='display picture' src='URL GAMBAR PROFIL' title='NAMA PROFIL'/>
</div>
<div class='info'>
<div class='title'>
<a href='<span style="color: #ff0000;">#</span>' rel='author' target='_blank'><span style="color: #ff0000;">NAMA PROFIL</span></a>
</div>
<div class='desc'>Creator di <a href='' rel='author' target='_blank'>NAMA BLOG</a></div>
<div class='desc'>" <span style="color: #ff0000;">CUPLIKAN IDENTITAS/QUOTES</span> "</div>
</div>
<div class='bottom'>
<a class='btn btn-primary btn-facebook btn-sm' href='https://facebook.com/#' rel='nofollow' target='_blank'>
<i class="fab fa-facebook-square"></i></a>
<a class='btn btn-primary btn-twitter btn-sm' href='https://twitter.com/#' rel='nofollow' target='_blank'>
<i class="fab fa-twitter-square"></i></a>
<a class='btn btn-danger btn-pinterest btn-sm' href='https://pinterest.com/#' rel='nofollow' target='_blank'>
<i class="fab fa-pinterest-square"></i></a>
<a class='btn btn-ig' href='https://instagram.com/#' rel='nofollow' target='_blank'><i class="fab fa-instagram"></i></a>
</div>
</div>
Silahkan sesuaikan dengan keinginan Anda tulisan yang ditandai berikut ini.
URL GAMBAR PROFIL ganti dengan URL gambar profil Anda.
NAMA PROFIL ganti dengan nama profil Anda.
NAMA BLOG ganti dengan nama blog Anda.
CUPLIKAN IDENTITAS/QUOTES diisi dengan hal-hal yang mengenai diri Anda
atau cuplikan quotes atau kata-kata singkat.
Untuk akun media sosial, silahkan sesuaikan dengan akun media sosial Anda.
Posting Komentar