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

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://4.bp.blogspot.com/-cWaWwXEAc9U/XZSLNfWwDXI/AAAAAAAAAuo/ezvtoKD-81cV_FSa6cl6apYxJbXU60MRwCLcBGAsYHQ/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.

Cari Blog Ini

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

Baca Juga

Bagaimana Cara Membuat Author Box?

Posting Komentar

Artikel Terbaru

Baca Juga Artikel Lainya:

Terpopuler

Traveling

SeedBacklink

Pilihan Editor

Digital Poin