Cara Membuat Widget Profile Box Dengan CSS Tanpa Font Awesome

Cara Membuat Widget Author Box Dengan CSS Tanpa Font Awesome - Sebenarnya membuat auhtor box ini sudah banyak yang memberikan panduannya bahkan sudah ada sejak zaman dulu, tapi gak apa-apa kami membuat artikel tentang cara membuat widget author box ini juga

Daftar Isi

Cara Membuat Widget Profile Box Dengan CSS Tanpa Font Awesome - Sebenarnya membuat auhtor box ini sudah banyak yang memberikan panduannya bahkan sudah ada sejak zaman dulu, tapi gak apa-apa kami membuat artikel tentang cara membuat widget author box ini juga, itung-itung buat ngisi kekosongan konten blog yang selama ini jarang update dan sepertinya bisa dijadikan ide juga yang membuat artikel-artikel lama untuk dibuat ulang, daur ulang lebih baik :)

Seperti halnya membuat author box ini, author box atau yang lebih dikenal dengan kotak penulis blog (admin blog) biasanya dipasang dibagian widget sidebar blog atau kolom sidebar. Author box ini digunakan untuk menampilkan identitas pemilik blog yang biasanya berisi profil blog dan profil sosial media yang dimilikinya. Selain itu juga ada tulisan singkat yang menggambarkan identitas dari profil penulis tersebut. Contohnya seperti gambar dibawah ini:

Bagaimana Cara Membuat Author Box?

Untuk membuat auhtor box ini kami sudah merangkai kode CSS yang sangat sederhana dan tidak repot untuk memasangnya di blog Anda (Jika berkenan). Selain itu juga tidak menambah beban loading blog, karena author box ini murni menggunakan CSS dan tidak perlu menambahkan kode script font awesome untuk icon-icon yang digunakan. Kami menggunakan icon SVG yang tidak membuat loading blog lambat.

Berikut Cara Menambahkan Author Box di Sidebar Blog :
Sebelum membuat author box ini, silahkan cek demonya dulu, kalau menarik bisa digunakan kalau tidak yaa bisa dibiarkan saja hehe

Cek Demo

Masuk ke dashboar akun Blogger, pilih menu Tema dan klik Edit HTML.

Salin kode CSS dibawah ini kedalam kode CSS template blog Anda atau diantara kode <head> dan </head>

.author_box{width:300px;margin:10px auto;padding-top:20px;background:linear-gradient(to right, #FF6A00, #FFB228);}
.author_box.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:#47cf73;}
.author_box.hovercard .cardheader{background:#555555;background-size:cover;height:100px;}
.author_box.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px;}
.author_box.hovercard .avatar img{background:linear-gradient(45deg, #6F0000, #200122);width:100px;height:100px;max-width:100px;max-height:100px;padding:5px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid #e172b1;}
.author_box.hovercard .info{padding:4px 8px 10px;margin-bottom:5px;}
.author_box.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle;}
.author_box.hovercard .info .title a,.card.hovercard .info .desc a{color:#555555;text-decoration:none;}
.author_box.hovercard .info .desc,.card.hovercard .info .desc1{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis;margin:0 25px;}
.author_box.hovercard .info .desc1{color:#8696a7;font-size:14px;}
.author_box.hovercard .bottom{padding:0 20px;margin-bottom:17px;}
.btn{color:#fff;padding:6px 6px 6px 10px;border-radius:3px;margin-right:5px;}
.author_box .btn-facebook svg,.card .btn-twitter svg,.card .btn-pinterest,.card .btn-ig svg{width:24px;height:24px}
.author_box .btn-facebook svg path{fill:#337ab7;}
.author_box .btn-twitter svg path{fill:#1da1f2;}
.author_box .btn-pinterest svg path{fill:#e60023;}
.author_box .btn-ig svg path{fill: #3f729b;}

Salin kode HTML ini kedalam kolom Widget blog Anda, buka menu Tata Letak dan tambah Widget

<div class='author_box hovercard'>
<div class='cardheader'>
</div>
<div class='avatar'>
<img alt='Profil' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8TfQ8nGPvx94TBxCzuRkraxcjPOq1youzrq2FqS7X11ON_ftxQJaJ5Uhsju45aMO7R5K8tpJXiGmTF9NT_YNUs_U_3_W9UBphBq4raZeB-D8BUxkHOd_36fQbrapWpN9yz7Z9f933iE/s1600/ronisw.jpg' title='Digital Poin'/>
</div>
<div class='info'>
<div class='title'>
<a href='#' rel='author' target='_blank'>Digital Poin</a>
</div>
<div class='desc'><a href='' target='_blank'>www.digitalpoin.com</a></div>
<div class='desc1'>"Tulis Deskripsi Disini"</div>
</div>
<div class='bottom'>
<a class='btn-facebook' href='https://facebook.com/' rel='nofollow' target='_blank'>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
</svg></a>
<a class='btn-twitter' href='https://twitter.com/' rel='nofollow' target='_blank'>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z" />
</svg></a>
<a class='btn-pinterest' href='https://pinterest.com/' rel='nofollow' target='_blank'>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z" />
</svg></a>
<a class='btn-ig' href='https://instagram.com/' rel='nofollow' target='_blank'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</svg></a>
</div>
</div>

Ganti: Ganti kode yang ditandai dengan warna.
Berikut adalah tampilan Widget Author Box

Itulah cara membuat widget author box yang bisa dipasang di blog Anda, sebenarnya tidak hanya di sidebar saja, dimanapun bisa sesuai dengan keinginan Anda. Semoga bermanfaat.