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
Fungsi CDATA Dalam JS dan CSS
Jika kamu sering mengotak-atik CSS maupun JS atau mungkin cuma drag and drop kode dari orang lain kamu terkadang akan menemukan yang namanya CDATA atau tertulis // <
Cara Membuat Pop Up Window Di Blog
Tutorial yang sangat sulit dicari ini akan coba saya publikasikan, mungkin untuk seorang master, hal ini tidaklah sulit, tetapi untuk kita yang masih awam dalam masalah ini, pa ... 
Membuat Dropdown Menu Responsive Dengan Effect Float
Wah panjang sekali ini judul, sebenarnya ini menu lebih menggunakan position Fixed dan bukan float :D, tetapi karena menu ini seperti melayang maka saya menggunakan kata float ... 
Membuat Smooth Scroll To Section ID
Entahlah apakah judul ini tepat untuk penamaannya yang pasti saya tidak terlalu tahu tentang namanya yang penting kerja =D. Cek link berikut.
Demo
Sebelumnya, ID yang saya ... 
Cara Menghilangkan Kolom Pada Post Tertentu
Setelah lama saya gak nulis Artikel, akhirnya saya menulis lagi artikel yang berkategori Tutorial ini, judulnya "Cara Menghilangkan Kolom Pada Post Tertentu", maksud kolom dala ...
