Cara Membuat About Me Box Sederhana dan Keren !

Kali ini saya akan membuat tutorial tentang cara membuat Abouut Me Box dengan tentunya hanya menggunakan CSS yang simple. About Me Box ini bisa anda pasang di side bar dengan ukuran 300px lebar sidebar, tetapi juga bisa anda sesuaikan sendiri. About Me Box ini memiliki link yang saya tempatkan dibawahnya untuk membawa pengunjung ke halaman about me yang lebih lengkap, jadi About Me Box ini sifatnya singkatnya about me anda.

Demo

Oke langsung saja.
Pertama, tempatkan CSS dibawah ini diatas </style>


#utama {background:#eee;text-align:center;line-height:1.4em;width:300px}
.artikel {padding:7px 23px 15px}
.tombol {background:#3DC3A8;margin-top:2px;padding:8px}
.tombol a {color:#fff;text-transform:uppercase;letter-spacing:0.5px}
.tombol:active {background:#43DABB}
.sosmed {display:inline-block;letter-spacing:0.1px;margin:0;padding:4px 13px;}
.fb,.tw,.ig {transition:all .2s ease-in-out}
.fb {background:#3A539B;color:#fff}
.fb:hover {background:#4865BC}
.tw {background:#19B5FE;color:#fff}
.tw:hover {background:#49C6FF}
.ig {background:#F62459;color:#fff}
.ig:hover {background:#FF3668}

Kemudian masukan kode HTML dibawah ini didalam Tata Letak, anda bisa memasukannya dengan cara pilih Tambahkan Widget, kemudian pilih HTML/Javascript.


<div id='utama'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnGVKawzkpTLeu6CjtIyfZpb5C3RZlX94-ftfVQ8jxsuada8tPSwqahi5_CX37HYiwWR6CiARMX1pMu9gEPnuUKF29B6TMUkoURSVUzjQzNBbGgyYqha8WjyivnvvILxuodHU-yxdARKC7/s400/bingung.jpg' height='200px' width='300' alt='About Me' title='About Me'/>
  <div class='sosmed'>
  <a class='sosmed fb' href='#' target='blank'>Facebook</a>
  <a class='sosmed tw' href='#' target='blank'>Twitter</a>
  <a class='sosmed ig' href='#' target='blank'>Instagram</a>
  </div>
  <div class='artikel'>Jangankan gunung semeru, jangankan juga gunung everest, apalagi gunung rinjani, gunung depan rumahku saja tak mampu tuk ku daki....
  </div>
  <div class='tombol'><a href='#'>kenali lebih dalam</a>
  </div>
</div>

Note : Ganti yang berwarna merah dengan URL gambar kawan, ganti tulisan yang berwarna ungu dengan tulisan atau cuplikan kawan., ganti pagar warna biru dengan URL tujuan, ganti yang warna pink dengan tulisan terserah.
Nah selesai, seperti yang katakan tadi sedehana. Ok, sekian artikel saya, terima kasih

Kamu bisa menggantikan tulisan sosmed diatas dengan Font Awesome jika mau