Cara Memasang Kotak Tentang Author Seperti DiBlog nafasmedia.my.id | nafasmedia
Update : Agustus 23, 2020nafasmedia | Pernahkan kalian membaca artikel pada sebuah blog sampai habis dan melihat ada kotak mengenai penulis artikel yang kamu baca tersebut?
Tepatnya pada blog ini pun juga memiliki kotak mengenai penulis artikel diblog ini yaitu saya sendiri. Mungkin bagi kalian yang juga seorang blogger dan memiliki sebuah blog akan bertanya bagaimana cara membuatnya ya?
Kali ini saya akan memberikan cara membuat Kotak tentang penulis seperti diblog saya ini. Bisa kalian lihat, kotak tentang penulis diblog saya memiliki desain yang keren, dengan background Game Minecraft Dan ditengah tengah terdapat foto author yaitu foto saya, disertai juga tombol media sosial seperti facebook,tweeter dll.
Saya mendesain kotak tersebut hanya menggunakan HTML dan sedikit CSS jadi tidak akan memberatkan loading blog, namun karena saya menggunakan background dan foto saya,jadi akan sedikit memberatkan loading.
Tetapi jangan khawatir background tersebut bisa diakali menggunakan base 64 image, sehingga tidak akan memberatkan loading blog. Tertarik untuk membuatnya? Jika iya silahkan simak tutorial dibawah ini.
TUTORIALNYA
.box-author{background:#fff;color:#222;font-weight:500;padding:10px;margin:1em 0;max-width:100%;border-radius:4px;box-shadow:0 10px 3rem -1rem rgba(0,0,0,0.5);transition:all .5s;}
.authorbox-widget{width:100%;border:0;position:relative}
.authorbox .boxauthor-header{border-top-left-radius:.25rem;border-top-right-radius:.25rem;height:135px;padding:1rem;text-align:center;color: #fff;}
.authorbox .author-username{color:#fff;font-size:25px;font-weight:300;text-align: right;margin-bottom:0;margin-top:0;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.authorbox .author-title{color:#fff;text-align: right;}
.authorbox .author-image{left:50%;margin-left:-45px;position:absolute;top:80px}
.authorbox .author-image>img{box-shadow:0 15px 3rem -10px rgba(0,0,0,0.5); border-radius:50%;border:3px solid #fff;height:auto;width:90px}
.authorbox .card-footer{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-7.5px;margin-left:-7.5px;padding-top:50px;}
.boxauthor-header{border-top-left-radius:.25rem;border-top-right-radius:.25rem;padding:1rem}
.author-username{font-size:25px;font-weight:300;margin-bottom:5px;margin-top:5px}
.author-title{margin-top:0}
.author-title,.author-username{margin-left:75px}
.author-image>img{float:left;height:auto;width:65px}
.author-deskripsi{display:block;position:relative;width:100%;margin-top: 3em;text-align: center}
.author-border-bottom{width:70%;border-bottom:1px solid #c5d0db!important;padding-top: 10px;}
.author-border-top{width:70%;border-top:1px solid #c5d0db!important;padding-bottom: 10px;}
.author-follow{font-weight: 600;text-align: center;}
<div class='box-author'>
<div class='authorbox-widget authorbox'>
<!--ganti dengan gambar terserah dengan bentuk persegi panjang-->
<div class='boxauthor-header lazy' style='background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Tag0AFc7xsvXQHSxcBI8XZ6eA4Exs5BXghFlV7IJewJydiaVEccRMDm1u1IYQuU8xij5i8rHwVL2eV5fiqtgXzh6JthArB-DZQoUu-A4xPVE-tcx0wZHCfgqEg1Gb_SWf1dstkT_J5w/s1280/activity2.jpeg') center center;'>
<!--ganti dengan nama atau nama blog kamu-->
<div class='author-username'>Nafasmedia</div>
<!--ganti dengan Profesi kamu-->
<div class='author-title'>Blogger</div>
</div>
<div class='author-image lazy'>
<!--ganti dengan gambar author 160x160px-->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQacAo3U_aCQz1-FrcIA2EJGUXGKgezfcjHjbuOm8QocyEoZ-XwLdtf9QT-Zn7eDDuyzNxOkkVSo4Q7EpXAweK2sK6_28HOuuHscggFqVOEIqGusP3tKYM3n78nc25Zp5zEQWzJdWpp_8/s150/author-160x160.jpg'/>
</div>
<div class='author-deskripsi'>
<center>
<div class='author-border-bottom author-border-top'>
<span class='author-desc'>
<!--ganti dengan deskripsi blog kamu-->
at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam
</span>
</div>
<div class='author-follow'>Follow</div>
<!--ganti dengan url media sosial kamu-->
<a href='https://facebook.com/nafasmedia/' target='blank' title='facebook'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='currentColor'></path>
</svg></a>
<a href='https://t.me/nanangwrldd' target='blank' title='telegram'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z' fill='currentColor'></path>
</svg></a>
<a href='https://twiter.com/nafasmedia' target='blank' title='twitter'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='currentColor'></path>
</svg></a>
<a href='https://instagram.com/nafasmedia_inc/' target='blank' title='instagram'><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' fill='currentColor'></path>
</svg></a>
</center>
</div>
</div>
</div>
<i class='fa fa-facebook'/>
PENUTUP
Populer
-
nafasmedia | jQuery sangatlah berguna bagi seorang programmer, banyak hal yang bisa dilakukan dengan jQuery, salah satunya menampilkan IP ...
-
nafasmedia | berjumpa lagi dengan saya, kali ini saya akan memberikan tutuorial cara membuat Error 404 dengan effek glitch, tutorial ini...
-
nafasmedia | Halo teman teman bertemu lagi dengan saya di Shizenku Blog. kesempatan kali ini saya akan membagikan sebuah game yang dari...
-
nafasmedia | Kali ini kita masih diseri "mempercantik blog". pada seri mempercantik blog kali ini kita akan membuat tombol downloa...
-
nafasmedia | Halo semua, apa kalian suka bermain dengan kode pemrograman seperti html,javascript,php? atau saat ini kalian ingin mempelajar...
0 Comments