Setelah lama tidak menulis artikel seperti ini karena sibuk ngurus template yang gak mutu itu, akhirnya saya bisa nulis lagi pada jam /4 ini. Oke, membuat kotak author info ini tidaklah sulit, karena kita hanya cukup memainkan sedikit CSS dan perpaduan HTML maka terbentuklah sebuah author info yang nyaman dipandang ini. Tidak ada yang spesial sih sebenarnya dengan tampilannya, tapi ya sudahlah.
Sebenarnya membuat kotak author atau about me box ini sudah saya bahas di artikel sebelumnya
Namun kotak author atau about me box kali ini kita desain ulang supaya lebih joss :D.
Sebelum memasang, pastikan sudah instal font awesome.
Praktek
Letakkan CSS dibawah ini diatas </style>, tetapi hindari yang ada dalam tag kondosional
.inner_wrapper {background:#fff}
.aboutme-img {position: relative;height: 150px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaUesVqNmSQ9-QDtaKTiHpFC4spa7QD_t9giEjmuqv2IbXWKf4eL3OclwG6B__W-f1FPoko4LSQ9JOHbKelQNw2Ch-E_2B-SH3Ekvlkwt7lR_B5PGX44qsh4y6vmJ6_-lyWJSuxl7FjdH/s1600/bg6.jpg) no-repeat top;background-size:cover}
.aboutme-img img {width: 100px;height: 100px;display: block;border-radius: 50%;margin: 0 auto;position: relative;top: 100px;}
.aboutme-info {font-size: 13px;padding: 66px 20px 10px;text-align: center;}
.aboutme-info h4 {margin-bottom: 10px;text-align: center;font-size: 16px; text-transform: uppercase;color: #202020;font-weight: 700;}
.aboutme-ikon {display: block;margin: 0 auto;padding: 10px 10px 20px;position: relative;}
.aboutme-ikon .sosialmedia {width: 100%;display: block;text-align: center;}
ul.sosialmedia {padding:0}
.sosialmedia .aboutme-icon a {font-family:fontawesome;font-weight:400;color:#222;}
.sosialmedia .aboutme-icon, .sosialmedia .ig,.sosialmedia .fb, .sosialmedia .twt, .sosialmedia .ggl{border-radius: 3px;background: #f6f6f6;height: 42px;width: 42px;line-height: 42px;display: inline-block;border: 0;margin: 0;padding: 0;}
.sosialmedia li.fb:hover, .sosialmedia li.fb:hover a {color: #fff;background-color: #3b5998;}
.sosialmedia li.twt:hover, .sosialmedia li.twt:hover a {color: #fff;background-color: #00aced;}
.sosialmedia li.ggl:hover, .sosialmedia li.ggl:hover a {color: #fff;background-color: #dd4b39;}
.sosialmedia li.ig:hover, .sosialmedia li.ig:hover a {color: #fff;background-color: #dd4b39;}
Silahkan kawan sesuaikan sendiri, saya ngantuk hahaha.
Oke selanjutnya pasang HTML dibawah ini kedalam Widget di Tata Letak.
<div class="inner_wrapper">
<div class="aboutme-img">
<img alt="Author" src="https://i0.wp.com/santuarie.files.wordpress.com/2017/03/ys2.png" title="Author" />
</div>
</div>
<div class="aboutme-info">
<h4>Brayen Luhat</h4>
<p>Selamat datang orang lemah yang kalo joging pake sepatu. Saya no, saya pake sendal refleksi, dan itu sakit!</p>
</div>
<div class="aboutme-ikon">
<ul class="sosialmedia">
<li class="twt"><a href="//twitter.com/brayenid" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li class="ggl"><a href="//plus.google.com/u/0/+Brayenluhat" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li>
<li class="ig"><a href="//instagram.com/brynfree" rel="nofollow" target="_blank" title="IG"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
Saya rasa kode diatas cukup jelas, silahkan disesuaikan sendiri kawan.
Oke saya rasa itu saja, jika kesulitan silahkan bertanya pada saya. Sekian dan terima kasih.
Artikel Terkait
Cara Memasukan Bible Quote Dalam Blog
Kali ini saya akan share kepada sobat Blogger khususnya yang bergama Kristen tentang cara memasang Bible Quote dalam Blog.
Saya menulis Artikel ini karena saya terinspirasi da ... 
Desain "Poni" iPhone X Yang Menjamur
Oke sepertinya ini sedikit melenceng dari Niche blog ini cuma ya karena didorong oleh keinginan yang luhur untuk menulis saya memutuskan untuk menulis saja dan persetan deng ... 
Pakai Credit Link ? Gengsi !
Seperti itulah segelintir Blogger yang saya temui selama ini. Saya memulai ngeblog dari tahun 2013, saat itu saya masih kelas 1/2 SMP, saya mempunyai ketertarikan pada blog na ... 
Cara Pasang Breadcrumb Yang Terindeks Google
Kali ini saya akan memberi tutorial kepada sahabat Blogger cara memasang breadcrumb agar terindeks Google. Tutorial ini saya dapatkan dari Maskolis, tapi rubah sedikit gaya Bre ... 
Pentingnya Meta Viewport Untuk Web Responsive
Meta viewport, mungkin ini meta yang sedikit asing untuk para blogger yang jarang mengutak-atik meta tag, tetapi walaupun asing meta tag ini tentu sangat vital perannya dala ...
